Finish up initial map implementation for HTML writer.

adiwg · May 6, 2015 · 46a34e2 · 46a34e2
1 parent 5ca1222
commit 46a34e2
Showing 1 changed file with 39 additions and 15 deletions.
diff --git a/lib/adiwg/mdtranslator/writers/html/sections/html_bodyScript.js b/lib/adiwg/mdtranslator/writers/html/sections/html_bodyScript.js
@@ -1,8 +1,6 @@
 if ( typeof L === "object") {
     (function() {
-        //forEach Polyfill
-        // Reference:
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
+        //forEach Polyfill, Reference: https://goo.gl/hFIfSd
         if (!Array.prototype.forEach) {
             Array.prototype.forEach = function(callback, thisArg) {
                 var T, k;
@@ -22,7 +20,6 @@ if ( typeof L === "object") {
                     var kValue;
                     if ( k in O) {
                         kValue = O[k];
-
                         callback.call(T, kValue, k, O);
                     }
                     k++;
@@ -33,7 +30,7 @@ if ( typeof L === "object") {
         var extentNodeList = document.querySelectorAll('section.extent-section');
         var extents = Array.prototype.slice.call(extentNodeList);
 
-        var mqAttr = '<p>Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"></p>';
+        var mqAttr = '<span>Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"></span>';
         var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
 
         L.TileLayer.OSM = L.TileLayer.extend({
@@ -46,19 +43,17 @@ if ( typeof L === "object") {
             }
         });
 
-        var check = function(i, me) {
+        var check = function(i, me, bnds) {
             if (i < 3) {
                 var resize = me.getSize().x === 0 && me.getContainer().offsetWidth > 0;
-                console.info('norez');
 
                 me.invalidateSize();
                 if (resize) {
-                    console.info('rez');
-                    me.setView([0, 0], 2);
+                    me.fitBounds(bnds);
                 } else {
                     i++;
                     setTimeout(function() {
-                        check(i, me);
+                        check(i, me, bnds);
                     }, 100);
                 }
             }
@@ -67,20 +62,49 @@ if ( typeof L === "object") {
         extents.forEach(function(extent, idx, arr) {
             var map = L.map(extent.querySelector('div.map'));
             var header = extent.querySelector('summary.map-header');
+            var geoNodelist = extent.querySelectorAll('div.geojson');
+            var geoArray = Array.prototype.slice.call(geoNodelist);
+            var geojson = [];
+
+            geoArray.forEach(function(geo, geoIdx, geoArr) {
+                var json = JSON.parse(geo.textContent || geo.innerText);
+                var bbox = json.bbox;
+                if (json.geometry === null && bbox) {
+                    json.geometry = {
+                        "type": "Polygon",
+                        "coordinates": [[[bbox[2], bbox[3]], [bbox[0], bbox[3]], [bbox[0], bbox[1]], [bbox[2], bbox[1]], [bbox[2], bbox[3]]]]
+                    };
+                    if (!json.properties) {
+                        json.properties = {};
+                    }
+                    json.properties.style = {
+                        color: '#f00',
+                        fill: false
+                    };
+                }
+
+                geojson.push(json);
+            });
+
+            var geoLayer = L.geoJson(geojson, {
+                style: function(feature) {
+                    return feature.properties.style || {};
+                }
+            }).addTo(map);
+
+            var bnds = geoLayer.getBounds();
 
             L.DomEvent.addListener(header, 'click', function() {
                 var me = this;
                 var i = 0;
 
-                //if (resize) {
                 setTimeout(function() {
-                    check(i, me);
+                    check(i, me, bnds);
                 }, 100);
-                //}
+
             }, map);
 
-            console.info( map1 = map);
-            map.setView([0, 0], 2);
+            map.fitBounds(bnds);
             map.addLayer(new L.TileLayer.OSM());
         });
     })();