prushforth · prushforth · Dec 21, 2017 · Jul 4, 2016 · Jul 5, 2016 · Jul 6, 2016
diff --git a/README.md b/README.md
@@ -1,14 +1,29 @@
 
-# web-map Customized Built-In &lt;map&gt; Element
+# Customized Built-In &lt;map&gt; Element
 
 [![Build Status](https://travis-ci.org/prushforth/Web-Map-Custom-Element.svg?branch=master)](https://travis-ci.org/prushforth/Web-Map-Custom-Element)
 
-The web-map Customized Built-In &lt;map&gt; Element is a [prototype implementation](http://maps4html.github.io/Web-Map-Custom-Element/) of the [HTML-Map-Element specification](http://maps4html.github.io/HTML-Map-Element/spec/).
+The Customized Built-In &lt;map&gt; Element is a prototype [implementation](http://maps4html.github.io/Web-Map-Custom-Element/) of the [HTML-Map-Element specification](http://maps4html.github.io/HTML-Map-Element/spec/).
 
-## Objective
+The HTML author can add MapML sources/layers by one or more the &lt;`layer- src="..."`&gt; elements as children of &lt;`map`&gt;.  The map provides a default set of controls which are turned on or off with the map@controls boolean attribute.  The @width and @height of the map should be specified either as attributes or via CSS rules.  The initial zoom and location of the map are controlled by the @zoom and @lat, @lon attributes.  The default projection is Web Mercator (OSMTILE).
 
-The objective of this web component is to upgrade the &lt;map&gt; HTML element to support modern Web mapping requirements.  As such, it relies on [Map Markup Language](http://maps4html.github.io/mapml/spec/) which delivers map information as hypertext.
-This element depends on the [MapML Leaflet Plugin javascript library](https://github.com/Maps4HTML/MapML-Leaflet-Plugin).
+Example:
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="web-map.html">
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<map is="web-map" zoom="3" lat="0" lon="0" width="800" height="400" controls>
+    <layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked></layer->
+</map>
+```
 
 ## Maps4HTML Community Group
 

diff --git a/bower.json b/bower.json
@@ -6,7 +6,7 @@
     "Maps for HTML Community Group"
   ],
   "homepage": "http://maps4html.github.io/Web-Map-Custom-Element/",
-  "license": "W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE",
+  "license": "W3C",
   "keywords": [
     "web-components",
     "polymer",

diff --git a/demo/index.html b/demo/index.html
@@ -34,23 +34,24 @@
   <body>
     <div>
       <!-- the @width / @height attributes take precedence over properties, but currently don't change to reflect updates -->
-      <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />
+<!--      <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />-->
       <map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls hidden>
-        <layer- id="osm" src="http://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked hidden></layer->
-        <layer- id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/en/osmtile/cbmt/" checked></layer->
-        <layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
-        <!-- the HTML author can create MapML files and serve them as layers if they prefer -->
+        <layer- id="osm" src="http://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked ></layer->
+        <device-location centered></device-location>
+<!--        <layer- id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/en/osmtile/cbmt/" checked></layer->-->
+<!--        <layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
+         the HTML author can create MapML files and serve them as layers if they prefer 
         <layer- id="marker" label="Marker layer" src="marker.mapml"></layer->
 
-        <!-- or the HTML author can create map 'area's (links) within the HTML document -->
-<!--        <area is="map-area"id="wholemap" href='http://example.com/default/' alt="Default" shape="default" style="fill: salmon; stroke: none; fill-opacity: 0.01"></map-area>-->
+         or the HTML author can create map 'area's (links) within the HTML document 
+        <area is="map-area"id="wholemap" href='http://example.com/default/' alt="Default" shape="default" style="fill: salmon; stroke: none; fill-opacity: 0.01"></map-area>
         <area is="map-area" id="marker2" href='http://example.com/marker/' alt="Marker" coords="265,185,265,185" shape="marker">
         <area is="map-area" id="line" href='http://example.com/line/' alt="Line" coords="275,275,540,107" shape="line">
 
         <area is="map-area" id="doughnut" alt="Circle" href='http://example.com/circle/' coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px;fill-opacity: 0.0">
         <area is="map-area" id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none;fill-opacity: 0.3;">
         <area is="map-area" id="rect" href='http://example.com/rectangle/' alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px;fill-opacity: 0.4">
-        <area is="map-area" id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px;fill-opacity: 0.4">
+        <area is="map-area" id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px;fill-opacity: 0.4">-->
       </map>
     </div>
   </body>

diff --git a/device-location.html b/device-location.html
@@ -0,0 +1,123 @@
+<dom-module id="device-location">
+<script>
+
+Polymer({
+    is: "device-location",
+    properties: {
+      lat : {
+        type: Number,
+        value: 0,
+        reflectToAttribute: false
+      },
+      lon : {
+        type: Number,
+        value: 0,
+        reflectToAttribute: false
+      },
+      centered : {
+          type: Boolean,
+          reflectToAttribute: true
+      }
+    },
+    observers: [
+      '_toggleCentered(centered)'
+    ],
+    _toggleCentered: function (centered) {
+        if (centered) {
+            // TODO create a point feature on the controls pane at the map center
+            // DONE register a watchPosition function to move the map as the device
+            // location changes
+            var self = this,
+                options = {
+                        enableHighAccuracy: true,
+                        timeout: 5000,
+                        maximumAge: 0
+                    };
+                function moveTo(position) {
+                    self.lat = position.coords.latitude;
+                    self.lon = position.coords.longitude;
+                    if (self.parentNode.zoomTo && self.parentNode._map) {
+                        // TODO when the zoomTo bug is fixed, remove zoom+1
+                        self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
+                    }
+                };
+            this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
+        } else {
+            this._deleteWatch();
+            // TODO replace the marker on the control pane at the center of the map
+            // with an actual point feature , or simply move that point from
+            // the control pane to the vector pane
+
+            // TODO register a navigator.geolocation.watchPosition function to
+            // update the location of the above point feature
+        }
+    },
+    detached: function() {
+        this._deleteWatch();
+        // TODO if there is a point associated to this control, remove/delete it
+    },
+    attached: function() {
+        this._deleteWatch();
+        this._createWatch();
+        if (this.parentNode.controls) {
+            // add the device-location radio button control to the controls pane
+            this._map = this.parentNode._map;
+        }
+    },
+    ready: function() {
+        if (this.centered) {
+            var self = this,
+                options = {
+                        enableHighAccuracy: true,
+                        timeout: 5000,
+                        maximumAge: 0
+                    };
+                function moveTo(position) {
+                    self.lat = position.coords.latitude;
+                    self.lon = position.coords.longitude;
+                    if (self.parentNode.zoomTo && self.parentNode._map) {
+                        // TODO when the zoomTo bug is fixed, remove zoom+1
+                        self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
+                    }
+                };
+            this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
+        }
+    },
+//    attached: function() {
+//        this._deleteWatch();
+//        // could have a _watchID from being created without being detached
+//        // i.e. never having been attached before...
+//        if (this.centered) {
+//            // create point on the control layer at the map center...
+//            
+//        }
+//        
+//    },
+    _deleteWatch: function() {
+        if (this._watchID) {
+            navigator.geolocation.clearWatch(this._watchID);
+            delete this._watchID;
+        }
+    },
+    _createWatch: function() {
+        if (this.centered) {
+            var self = this,
+                options = {
+                        enableHighAccuracy: true,
+                        timeout: 5000,
+                        maximumAge: 0
+                    };
+                function moveTo(position) {
+                    self.lat = position.coords.latitude;
+                    self.lon = position.coords.longitude;
+                    if (self.parentNode.zoomTo && self.parentNode._map) {
+                        // TODO when the zoomTo bug is fixed, remove zoom+1
+                        self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
+                    }
+                };
+            this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
+        }
+    }
+});
+</script>
+</dom-module>
diff --git a/web-map.html b/web-map.html
@@ -1,10 +1,11 @@
 <link rel="import" href="./bower_components/polymer/polymer.html">
+<link rel="import" href="device-location.html">
 <link rel="import" href="map-layer.html">
 <link rel="import" href="map-area.html">
 <!-- styles scoped to inside a custom element must be in a style module -->
 <link rel="import" href="map-styles.html">
 
-<script src="./bower_components/polymer-leaflet/leaflet.js"></script>
+<script src="./bower_components/polymer-leaflet/leaflet-src.js"></script>
 <script src="./bower_components/proj4Leaflet/lib/proj4-compressed.js"></script>
 <script src="./bower_components/proj4Leaflet/src/proj4leaflet.js"></script>
 <script src="./bower_components/mapml-leaflet-plugin/mapml.js"></script>