Add topojson, gpx and kml layers

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.3.0 - Add ability to add KML and TOPOJSON overlay layers
  - v1.2.4 - Let weblink also specify target page. eg `msg.payload.weblink = {name:"BBC News", url:"news.bbc.co.uk", target:"_new"}`
  - v1.2.3 - Add higher maxZoom values for some layers
  - v1.2.2 - Re-fix simultaneous command plus payload

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.3.0 - Add ability to add KML, GPX and TOPOJSON overlay layers and optional zoom to fit.
 - v1.2.4 - Let weblink also specify target page. eg `msg.payload.weblink = {name:"BBC News", url:"news.bbc.co.uk", target:"_new"}`
 - v1.2.3 - Add higher maxZoom values for some layers
 - v1.2.2 - re-fix simultaneous command plus payload
@@ -101,8 +102,7 @@ The OSM Buildings layer is available in the layers menu. You can replace this wi
 sending a msg.payload containing a name and a building property. The building property should be
 a GeoJSON Feature Collection as per the OSMBuildings spec.
 
-    msg.payload = { name:"My Block", building: {
+    {   "type": "FeatureCollection",
-        "type": "FeatureCollection",
         "features": [
           {
             "type": "Feature",
@@ -126,7 +126,7 @@ a GeoJSON Feature Collection as per the OSMBuildings spec.
               ]
             }
           }
-        ] }
+        ]
     }
 
 **Note**: the object you supply will replace the whole buildings layer. To delete the building send a msg with a name and the building property set to ""  (blank string).
@@ -194,7 +194,9 @@ Optional properties include
  - **lat** - move map to specified latitude.
  - **lon** - move map to specified longitude.
  - **zoom** - move map to specified zoom level (1 - world, 13 to 20 max zoom depending on map).
- - **layer** - set map to specified layer name (can be a base layer or an overlay layer).
+ - **layer** - set map to specified base layer name - `{command:{layer:"Esri"}}`
+ - **showlayer** - show the named overlay - `{command:{showlayer:"foo"}}`
+ - **hidelayer** - hide the named overlay - `{command:{hidelayer:"bar"}}`
  - **map** - Object containing details of a new map layer:
    - **name** - name of the map base layer OR **overlay** - name of overlay layer
    - **url** - url of the map layer
@@ -206,7 +208,7 @@ Optional properties include
 
 #### To switch layer, move map and zoom
 
-    msg.payload.command =  {layer:"Esri Relief", lat:51, lon:3, zoom:10 };
+    msg.payload.command =  {layer:"Esri Satellite", lat:51, lon:3, zoom:10 };
 
 #### To draw a heavily customized Circle on a layer
 
@@ -235,10 +237,24 @@ Optional properties include
     msg.payload.command.map = {
         overlay:"myGeoJSON",
         geojson:{ your geojson feature as an object },
-        opt:{ optional geojson options, style, filter, onEach, Feature, etc }
+        opt:{ optional geojson options, style, filter, onEach, Feature, etc },
+        fit:true
     };
 
-see http://leafletjs.com/examples/geojson/ for more details about options
+
+The `fit` property is optional. If present the map will automatically zoom to fit the area relevant to the geojson.
+see http://leafletjs.com/examples/geojson/ for more details about options for opt.
+
+#### To add a new KML, GPX, or TOPOJSON overlay
+
+As per the geojson overlay you can also inject a KML layer or TOPOJSON layer. The syntax is the same but with either a `kml` property - containing the KML string - or a `topojson` property containing the topojson.
+
+    msg.payload.command.map = {
+        overlay:"myKML",
+        kml:"<kml>...your kml placemarks...</kml>"
+    };
+
+Again the `fit` property can be added to make the map zoom to the relevant area.
 
 #### To add a Velocity Grid Overlay
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.2.4",
+    "version": "1.3.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap/css/map.css

@@ -51,10 +51,10 @@ a {
 
 #foot {
     position:absolute;
-    height:20px;
+    bottom:1px;
-    bottom:0;
+    left:-1px;
-    width:100%;
+    z-index:1;
-    z-index:10;
+    font-size:9px;
 }
 
 #heat {

worldmap/index.html

@@ -54,6 +54,7 @@
     <script type="text/javascript" src="leaflet/leaflet-velocity.min.js"></script>
     <script type="text/javascript" src="leaflet/tile.stamen.js"></script>
     <script type="text/javascript" src="leaflet/OSMBuildings-Leaflet.js"></script>
+    <script type="text/javascript" src="leaflet/leaflet-omnivore.min.js"></script>
 
     <script type="text/javascript" src="leaflet/dialog-polyfill.js"></script>
     <link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
@@ -1163,6 +1164,7 @@ function doCommand(cmd) {
     var existsalready = false;
     // Add a new base map layer
     if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
+        console.log("BASE",cmd.map);
         if (basemaps.hasOwnProperty(cmd.map.name)) { existsalready = true; }
         if (cmd.map.hasOwnProperty("wms")) {   // special case for wms
             console.log("New WMS:",cmd.map.name);
@@ -1188,11 +1190,58 @@ function doCommand(cmd) {
             map.removeLayer(overlays[cmd.map.overlay]);
             existsalready = true;
         }
-        overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,cmd.map.opt);
+        var opt = cmd.map.opt || {style:function(feature) {return {color:feature.properties.color||feature.properties.roofColor}}};
+        //console.log("OPT",opt);
+
+        opt.onEachFeature = function (f, l) {
+            l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
+        }
+        overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
         if (!existsalready) {
             layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
         }
         map.addLayer(overlays[cmd.map.overlay]);
+        if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
+    }
+    // Add a new KML overlay layer
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kml") ) {
+        if (overlays.hasOwnProperty(cmd.map.overlay)) {
+            map.removeLayer(overlays[cmd.map.overlay]);
+            existsalready = true;
+        }
+        //var opt = {async:true};
+        overlays[cmd.map.overlay] = omnivore.kml.parse(cmd.map.kml);
+        if (!existsalready) {
+            layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+        }
+        map.addLayer(overlays[cmd.map.overlay]);
+        if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
+    }
+    // Add a new TOPOJSON overlay layer
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("topojson") ) {
+        if (overlays.hasOwnProperty(cmd.map.overlay)) {
+            map.removeLayer(overlays[cmd.map.overlay]);
+            existsalready = true;
+        }
+        overlays[cmd.map.overlay] = omnivore.topojson.parse(cmd.map.topojson);
+        if (!existsalready) {
+            layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+        }
+        map.addLayer(overlays[cmd.map.overlay]);
+        if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
+    }
+    // Add a new GPX overlay layer
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("gpx") ) {
+        if (overlays.hasOwnProperty(cmd.map.overlay)) {
+            map.removeLayer(overlays[cmd.map.overlay]);
+            existsalready = true;
+        }
+        overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx);
+        if (!existsalready) {
+            layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+        }
+        map.addLayer(overlays[cmd.map.overlay]);
+        if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
     }
     // Add a new velocity overlay layer
     if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("velocity") ) {
@@ -1205,6 +1254,7 @@ function doCommand(cmd) {
             layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
         }
         map.addLayer(overlays[cmd.map.overlay]);
+        if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); } 
     }
     // Add a new overlay layer
     if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
@@ -1238,9 +1288,13 @@ function doCommand(cmd) {
         baselayername = cmd.layer;
         basemaps[baselayername].addTo(map);
     }
-    // Add an overlay
+    // Turn on an existing overlay
-    if (cmd.layer && overlays.hasOwnProperty(cmd.layer)) {
+    if (cmd.hasOwnProperty("showlayer") && overlays.hasOwnProperty(cmd.showlayer)) {
-        map.addLayer(overlays[cmd.map.overlay]);
+        map.addLayer(overlays[cmd.showlayer]);
+    }
+    // Turn off an existing overlay
+    if (cmd.hasOwnProperty("hidelayer") && overlays.hasOwnProperty(cmd.hidelayer)) {
+        map.removeLayer(overlays[cmd.hidelayer]);
     }
     var clat = map.getCenter().lat;
     var clon = map.getCenter().lng;

worldmap/leaflet/leaflet-openweathermap.css

@@ -1,65 +0,0 @@
-.owm-icondiv {
-	width: 50px;
-	opacity: 0.7;
-	text-align: center;
-	background-color: lightgray;
-	border-radius: 10px;
-	border: 1px solid darkgray;
-}
-
-.owm-icondiv-temp {
-	color: black;
-	font-weight: bold;
-	text-shadow: 0.1em 0.1em 0.1em white;
-	xtext-shadow: white 0.1em 0.1em;
-}
-
-.owm-popup-name {
-	font-size: 2em;
-	font-weight: bold;
-}
-
-.owm-popup-name a:link, .owm-popup-name a:active, .owm-popup-name a:visited {
-	color: black;
-	text-decoration: none;
-}
-
-.owm-popup-name a:hover {
-	color: red;
-	text-decoration: none;
-}
-
-.owm-popup-description {
-	font-size: 1.5em;
-	font-weight: bold;
-}
-
-.owm-popup-main {
-}
-
-.owm-popup-main img {
-	vertical-align: middle;
-}
-
-.owm-popup-main span {
-	padding-left: 0.5em;
-}
-
-.owm-popup-temp {
-	font-weight: bold;
-	font-size: 2em;
-}
-
-.owm-popup-details {
-}
-
-.owm-popup-detail {
-}
-
-.owm-popup-timestamp {
-	color: gray;
-	padding-top: 0.5em;
-}
-
-.owm-legend-item {
-}

worldmap/worldmap.appcache

@@ -1,10 +1,9 @@
 CACHE MANIFEST
-# date: June 11th 2018 - v1.2.4
+# date: June 25th 2018 - v1.3.0
 
 CACHE:
 index.html
 favicon.ico
-owmloading.gif
 images/node-red.png
 css/map.css
 leaflet/L.Terminator.js
@@ -23,8 +22,7 @@ leaflet/fullscreen.png
 leaflet/fullscreen@2x.png
 leaflet/l.ellipse.min.js
 leaflet/leaflet-heat.js
-leaflet/leaflet-openweathermap.css
+leaflet/leaflet-omnivore.min.js
-leaflet/leaflet-openweathermap.js
 leaflet/leaflet-slider.css
 leaflet/leaflet-slider.js
 leaflet/leaflet-velocity.min.css