Better doc for events, and allow add overlay map.

fix fullscreen bug (spelling)

README.md

@@ -72,12 +72,11 @@ If you select the **drawing** layer you can also add polylines, polygons and rec
 
 All these events generate messages that can be received by using a **worldmap in** node. For example:
 
-    add:point,50.98523,-1.40625,joe,spot,test
-    del:joe
-    add:rectangle,LatLng(50.92944,-1.4502),
-        LatLng(50.99172,-1.4502),
-        LatLng(50.99172,-1.32729),
-        LatLng(50.92944, -1.32729)
+    { "action": "connected" }
+    { "action": "point", "lat": "50.60634", "lon": "-1.66580", "point": "joe,male,mylayer" }
+    { "action": "delete", "name": "joe" }
+    { "action": "layer", "name": "Esri Satellite" }
+    { "action": "draw", "type": "rectangle", "points": [ { "lat": 50.61243889044519, "lng": -1.5913009643554688 }, { "lat": 50.66665471366635, "lng": -1.5913009643554688 }, { "lat": 50.66665471366635, "lng": -1.4742279052734375 }, { "lat": 50.61243889044519, "lng": -1.4742279052734375 } ] }
 
 ### Control
 
@@ -90,7 +89,7 @@ Optional properties include
  - **zoom** - move map to specified zoom level (1 - world, 13 to 20 max zoom depending on map).
  - **layer** - set map to specified layer name.
  - **map** - Object containing details of a new map layer:
-   - **name** - name of the map layer
+   - **name** - name of the map base layer OR **overlay** - name of overlay layer
    - **url** - url of the map layer
    - **opt** - options object for the new layer
 
@@ -100,7 +99,7 @@ To switch layer, move map and zoom
 
         msg.payload.command =  {layer:"Esri Relief", lat:51, lon:3, zoom:10 };
 
-To add a new layer
+To add a new base layer
 
         msg.payload.command.map = {
             name:"OSMhot",

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.0.5",
+    "version"       : "1.0.7",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "4.*",

worldmap/index.html

@@ -43,7 +43,7 @@
     <script type="text/javascript" src="leaflet/leaflet.draw.js"></script>
     <script type="text/javascript" src="leaflet/leaflet.measurecontrol.js"></script>
     <script type="text/javascript" src="leaflet/easy-button.js"></script>
-    <script type="text/javascript" src="leaflet/leaflet.fullscreen.min.js"></script>
+    <script type="text/javascript" src="leaflet/Leaflet.fullscreen.min.js"></script>
     <script type="text/javascript" src="leaflet/l.ellipse.min.js"></script>
     <script type="text/javascript" src="leaflet/leaflet-heat.js"></script>
     <script type="text/javascript" src="leaflet/TileLayer.Grayscale.js"></script>
@@ -392,7 +392,7 @@ map.on('overlayremove', function(e) {
 map.on('baselayerchange', function(e) {
     //console.log("base layer now :",e.name);
     baselayername = e.name;
-    ws.emit("worldmap",{action:"modify", name:e.name});
+    ws.emit("worldmap",{action:"layer", name:e.name});
 });
 
 map.on('zoomend', function() {
@@ -486,7 +486,7 @@ basemaps["Esri"] = Esri_WorldStreetMap;
 var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
     attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
 });
-basemaps["Esri Satelite"] = Esri_WorldImagery;
+basemaps["Esri Satellite"] = Esri_WorldImagery;
 
 var Esri_WorldShadedRelief = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
     attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
@@ -844,12 +844,35 @@ function setMarker(data) {
 }
 
 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("New map:",cmd.map.name);
+        if (basemaps.hasOwnProperty(cmd.map.name)) { existsalready = true; }
         basemaps[cmd.map.name] = L.tileLayer(cmd.map.url, cmd.map.opt);
+        if (!existsalready) {
             layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
         }
+    }
+    // Add a new overlay layer
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
+        console.log("New overlay:",cmd.map.overlay);
+        if (overlays.hasOwnProperty(cmd.map.overlay)) { existsalready = true; }
+        overlays[cmd.map.overlay] = L.tileLayer(cmd.map.url, cmd.map.opt);
+        if (!existsalready) {
+            layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+        }
+        overlays[cmd.map.overlay].addTo(map);
+    }
+    // Swap a base layer
     if (cmd.layer && basemaps.hasOwnProperty(cmd.layer)) {
-        basemaps[cmd.layer].addTo(map);
+        map.removeLayer(basemaps[baselayername]);
+        baselayername = cmd.layer;
+        basemaps[baselayername].addTo(map);
+    }
+    // Add an overlay
+    if (cmd.layer && overlays.hasOwnProperty(cmd.layer)) {
+        overlays[cmd.layer].addTo(map);
     }
     var clat = map.getCenter().lat;
     var clon = map.getCenter().lng;