Merge pull request #3 from Maps4HTML/Polymer-1.0-migration

Polymer 1.0.6, Leaflet 1.0.0 Beta1 migration
Maps4HTML · Aug 6, 2015 · 193a4fb · 193a4fb
2 parents cd87ecb + abd93a4
commit 193a4fb
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="./bower_components/platform/platform.js"></script>
     <link rel="import" href="mapml-map.html">
     <style>
       mapml-map {

diff --git a/mapml-map.html b/mapml-map.html
@@ -1,13 +1,13 @@
 <link rel="import" href="./bower_components/polymer/polymer.html">
 
-<script src="./bower_components/leaflet/dist/leaflet-src.js"></script>
-<script src="http://maps4html.github.io/MapML-Leaflet-Client/scripts/mapml.js"></script>
-<script src="http://maps4html.github.io/MapML-Leaflet-Client/scripts/URI.js"></script>
+<script src="http://localhost/leaflet-1.0.0-b1/leaflet-src.js"></script>
+<script src="http://localhost/mapflet/scripts/mapml.js"></script>
+<script src="http://localhost/mapflet/scripts/URI.js"></script>
 <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js'></script>
 
-<polymer-element name="mapml-map" attributes="lat lon zoom">
-
-<template>
+<dom-module id="mapml-map">
+  <!-- in polymer 1.0.x, styles must be outside of the <template> element
+       https://www.polymer-project.org/1.0/docs/migration.html#local-dom-template -->
   <style>
    :host {
      display: block;
@@ -22,71 +22,84 @@
      left: 0;
    }
   </style>
-  <link rel="stylesheet" href="./bower_components/leaflet/dist/leaflet.css">
+  <link rel="stylesheet" href="http://localhost/leaflet-1.0.0-b1/leaflet.css">
   <!-- THIS IS HARDCODING. NEED TO DYNAMICALLY LOAD THE CSS FROM THE MAPML RESPONSES,
   AND FIGURE OUT HOW TO GET POLYMER / THE BROWSER TO LOAD AND APPLY THOSE STYLES 
   WITHIN THE SHADOW CONTENT (?). -->
   <link rel="stylesheet" href="http://localhost/mapml/styles/canvec_cantopo_svg.css">
   <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css' rel='stylesheet'>
+
+<template>
   <div id="map"></div>
   <content></content>
 </template>
 <script>
 Polymer({
     is: "mapml-map",
-    publish: {
-      lat: {
-        value: 0, 
-        reflect: true 
+    properties: {
+      lat : {
+        type: Number,
+        value: 0,
+        reflectToAttribute: true
       },
-      lon: {
+      lon : {
+        type: Number,
         value: 0,
-        reflect: true 
+        reflectToAttribute: true
       },
-      zoom: {
-        value: 10, 
-        reflect: true
+      zoom : {
+        type: Number,
+        value: 0,
+        reflectToAttribute: true
       }
     },
+    hostAttributes: {
+        lat: 0,
+        lon: 0,
+        zoom: 0
+    },
     attached: function() {
-      console.log(this.localName + '#' + this.id + ' was attached');
-
-      for (var i = 0,lyrs = [],controls = {},layers = this.querySelectorAll('[src]');i < layers.length;i++) {
-       /* 
-        * Explicitly set the z-index for all layers based on their document order. 
-        * Note that zIndex has no effect on vector layers, as they are managed
-        * separately by Leaflet, and it looks like too much work to change for 
-        * a demo. 
-        *
-        * Set the opacity based on the CSS property calculated for the mapml-layer.
-        */
-        var o = window.getComputedStyle(layers[i]).opacity,
-            layer = M.mapMLLayer(layers[i].getAttribute('src'), {zIndex: i+1, opacity: o}),
-            label = layers[i].getAttribute('label') ? layers[i].getAttribute('label') : "Basemap " + i;
-        controls[label] = layer;
-        lyrs.push(layer);
-      }
+      /* needs a delay to provide setup time for polymer */
+      this.async( function () {
+        console.log(this.localName + '#' + this.id + ' was attached');
 
-      this.map = L.map(this.$.map, {
-        center: new L.LatLng(this.lat, this.lon),
-        zoom: this.zoom,
-        layers: lyrs[0],
-        fullscreenControl: true
-      });
-      var  layerControl = M.mapMlLayerControl(controls).addTo(this.map);
-      this.map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">MapML</a>')
+        for (var i = 0,lyrs = [],controls = {},layers = this.querySelectorAll('[src]');i < layers.length;i++) {
+         /* 
+          * Explicitly set the z-index for all layers based on their document order. 
+          * Note that zIndex has no effect on vector layers, as they are managed
+          * separately by Leaflet, and it looks like too much work to change for 
+          * a demo. 
+          *
+          * Set the opacity based on the CSS property calculated for the mapml-layer.
+          */
+          var o = window.getComputedStyle(layers[i]).opacity,
+              layer = M.mapMLLayer(layers[i].getAttribute('src'), {zIndex: i+1, opacity: o}),
+              label = layers[i].getAttribute('label') ? layers[i].getAttribute('label') : "Basemap " + i;
+          controls[label] = layer;
+          lyrs.push(layer);
+        }
 
-      console.log("map center: "+this.map.getCenter());
-      var west = this.map.getBounds().getWest(),
-          south = this.map.getBounds().getSouth(),
-          east = this.map.getBounds().getEast(),
-          north = this.map.getBounds().getNorth();
-
-      if (west === east || south === north) {
-        console.log('ERROR: BAD EXTENT');
-      }
-      console.log("map bounds bbox=" + this.map.getBounds().toBBoxString());
+        this.map = L.map(this.$.map, {
+          center: new L.LatLng(this.lat, this.lon),
+          zoom: this.zoom,
+          layers: lyrs[0],
+          fullscreenControl: true
+        });
+        var  layerControl = M.mapMlLayerControl(controls).addTo(this.map);
+        this.map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">MapML</a>')
+
+        console.log("map center: "+this.map.getCenter());
+        var west = this.map.getBounds().getWest(),
+            south = this.map.getBounds().getSouth(),
+            east = this.map.getBounds().getEast(),
+            north = this.map.getBounds().getNorth();
+
+        if (west === east || south === north) {
+          console.log('ERROR: BAD EXTENT');
+        }
+        console.log("map bounds bbox=" + this.map.getBounds().toBBoxString());
+      },10);
     }
 });
 </script>
-</polymer-element>
+</dom-module>