node-red-contrib-web-worldmap 2.20.0 → 2.21.0

package/worldmap/worldmap.js

@@ -24,6 +24,7 @@ var showUserMenu = true;
 var showLayerMenu = true;
 var showMouseCoords = false;
 var allowFileDrop = false;
+var heat;
 var minimap;
 var sidebyside;
 var layercontrol;
@@ -112,7 +113,9 @@ var handleData = function(data) {
         if (data.hasOwnProperty("type") && data.type.indexOf("Feature") === 0) { doGeojson("geojson",data); }
         else if (data.hasOwnProperty("name")) { setMarker(data); }
         else {
-            console.log("SKIP",data);
+            if (JSON.stringify(data) !== '{}') {
+                console.log("SKIP",data);
+            }
             // if (typeof data === "string") { doDialog(data); }
             // else { console.log("SKIP",data); }
         }
@@ -410,7 +413,7 @@ setMaxAge();
 
 // move the daylight / nighttime boundary (if enabled) every minute
 function moveTerminator() { // if terminator line plotted move it every minute
-    if (layers["_daynight"].getLayers().length > 0) {
+    if (layers["_daynight"] && layers["_daynight"].getLayers().length > 0) {
         layers["_daynight"].clearLayers();
         layers["_daynight"].addLayer(L.terminator());
     }
@@ -590,7 +593,7 @@ map.on('baselayerchange', function(e) {
 });
 
 function showMapCurrentZoom() {
-    console.log("zoom:",map.getZoom(),". clusterAt:",clusterAt);
+    //console.log("zoom:",map.getZoom());
     for (var l in layers) {
         if (layers[l].hasOwnProperty("_zoom")) {
             if (map.getZoom() >= clusterAt) {
@@ -727,378 +730,453 @@ map.on('contextmenu', function(e) {
     }
 });
 
-// Add all the base layer maps
-if (navigator.onLine) {
+// Add all the base layer maps if we are online.
+var addBaseMaps = function(maplist,first) {
+    //console.log("MAPS",first,maplist)
+    if (navigator.onLine) {
+        var layerlookup = { OSMG:"OSM grey", OSMC:"OSM", OSMH:"OSM Humanitarian", EsriC:"Esri", EsriS:"Esri Satellite",
+        EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic",
+        UKOS:"UK OS OpenData", UKOS45:"UK OS 1919-1947", UKOS00:"UK OS 1900", OpTop:"Open Topo Map",
+        HB:"Hike Bike OSM", ST:"Stamen Topography", SW: "Stamen Watercolor", AN:"AutoNavi (Chinese)" }
+
+        // Use this for OSM online maps
+        var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+        var osmAttrib='Map data © OpenStreetMap contributors';
+
+        if (maplist.indexOf("OSMG")!==-1) {
+            basemaps[layerlookup["OSMG"]] = new L.TileLayer.Grayscale(osmUrl, {
+                attribution:osmAttrib,
+                maxNativeZoom:19,
+                maxZoom:20,
+                subdomains: ['a','b','c']
+            });
+        }
+        if (maplist.indexOf("OSMC")!==-1) {
+            basemaps[layerlookup["OSMC"]] = new L.TileLayer(osmUrl, {
+                attribution:osmAttrib,
+                maxNativeZoom:19,
+                maxZoom:20,
+                subdomains: ['a','b','c']
+            });
+        }
+        if (maplist.indexOf("OSMH")!==-1) {
+            basemaps[layerlookup["OSMH"]] = new L.TileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
+                attribution:"Map data © OpenStreetMap Contributors. Courtesy of Humanitarian OpenStreetMap Team",
+                maxNativeZoom:19,
+                maxZoom:20,
+                subdomains: ['a','b']
+            });
+        }
 
-    // Use this for OSM online maps
-    var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-    //var osmUrl='https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
-    var osmAttrib='Map data © OpenStreetMap contributors';
-    var osmg = new L.TileLayer.Grayscale(osmUrl, {attribution:osmAttrib, maxNativeZoom:19, maxZoom:20});
-    basemaps["OSM grey"] = osmg;
+        // Extra Leaflet map layers from https://leaflet-extras.github.io/leaflet-providers/preview/
+        if (maplist.indexOf("EsriC")!==-1) {
+            basemaps[layerlookup["EsriC"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
+                attribution:'Tiles © Esri',
+                maxNativeZoom:19,
+                maxZoom:20
+            });
+        }
 
-    var osm = new L.TileLayer(osmUrl, {attribution:osmAttrib, maxNativeZoom:19, maxZoom:20});
-    basemaps["OSM"] = osm;
+        if (maplist.indexOf("EsriS")!==-1) {
+            basemaps[layerlookup["EsriS"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+            //var Esri_WorldImagery = L.tileLayer('http://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {{
+                attribution:'Tiles © Esri',
+                maxNativeZoom:17, maxZoom:20
+            });
+        }
 
-    // Extra Leaflet map layers from https://leaflet-extras.github.io/leaflet-providers/preview/
-    var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Tiles © Esri', maxNativeZoom:19, maxZoom:20
-    });
-    basemaps["Esri"] = Esri_WorldStreetMap;
+        if (maplist.indexOf("EsriT")!==-1) {
+            basemaps[layerlookup["EsriT"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+                attribution:'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
+            });
+        }
 
-    var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-    //var Esri_WorldImagery = L.tileLayer('http://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-        attribution:'Tiles © Esri', maxNativeZoom:17, maxZoom:20
-    });
-    basemaps["Esri Satellite"] = Esri_WorldImagery;
+        if (maplist.indexOf("EsriR")!==-1) {
+            basemaps[layerlookup["EsriR"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
+                attribution:'Tiles © Esri',
+                maxNativeZoom:13
+            });
+        }
 
-    var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
-    });
-    basemaps["Esri Topography"] = Esri_WorldTopoMap;
+        if (maplist.indexOf("EsriO")!==-1) {
+            basemaps[layerlookup["EsriO"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
+                attribution:'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
+                maxNativeZoom:13
+            });
+        }
 
-    // var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
-    //     attribution: 'Tiles © Esri',
-    //     maxNativeZoom:13
-    // });
-    // basemaps["Esri Terrain"] = Esri_WorldShadedRelief;
+        if (maplist.indexOf("EsriDG")!==-1) {
+            basemaps[layerlookup["EsriDG"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
+                attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
+                maxNativeZoom:13
+            });
+        }
 
-    var Esri_OceanBasemap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
-        maxNativeZoom:13
-    });
-    basemaps["Esri Ocean"] = Esri_OceanBasemap;
+        if (maplist.indexOf("NatGeo")!==-1) {
+            basemaps[layerlookup["NatGeo"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
+                attribution: 'Tiles © Esri',
+                maxNativeZoom:12
+            });
+        }
 
-    var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
-        maxNativeZoom:13
-    });
-    basemaps["Esri Dark Grey"] = Esri_WorldGrayCanvas;
-
-    // var OpenMapSurfer_Roads = L.tileLayer('https://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
-    //     maxZoom: 18,
-    //     attribution: 'Imagery from <a href="https://giscience.uni-hd.de/">University of Heidelberg</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    // });
-    // basemaps["Mapsurfer"] = OpenMapSurfer_Roads;
-
-    // var MapQuestOpen_OSM = L.tileLayer('https://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', {
-    //     type: 'map',
-    //     ext: 'jpg',
-    //     attribution: 'Tiles Courtesy of <a href="https://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    //     subdomains: '1234',
-    //     maxNativeZoom: 17
-    // });
-    //basemaps["MapQuest OSM"] = MapQuestOpen_OSM;
-
-    var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Tiles &copy; Esri',
-        maxNativeZoom:12
-    });
-    basemaps["Nat Geo"] = Esri_NatGeoWorldMap;
+        if (maplist.indexOf("UKOS")!==-1) {
+            basemaps[layerlookup["UKOS"]] = L.tileLayer('https://geo.nls.uk/maps/opendata/{z}/{x}/{y}.png', {
+                attribution: '<a href="https://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
+                bounds: [[49.6, -12], [61.7, 3]],
+                minZoom:1, maxNativeZoom:17, maxZoom:20,
+                subdomains: '0123'
+            });
+        }
 
-    var NLS_OS_opendata = L.tileLayer('https://geo.nls.uk/maps/opendata/{z}/{x}/{y}.png', {
-        attribution: '<a href="https://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
-        bounds: [[49.6, -12], [61.7, 3]],
-        minZoom:1, maxNativeZoom:18, maxZoom:18,
-        subdomains: '0123'
-    });
-    basemaps["UK OS Opendata"] = NLS_OS_opendata;
+        if (maplist.indexOf("OpTop")!==-1) {
+            basemaps[layerlookup["OpTop"]] = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+                subdomains: 'abc',
+                maxZoom: 19,
+                attribution: '&copy; <a href="https://www.opentopomap.org/copyright">OpenTopoMap</a> contributors'
+            });
+        }
 
-    var Open_Topo_Map = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
-        subdomains: 'abc',
-        maxZoom: 19,
-        attribution: '&copy; <a href="https://www.opentopomap.org/copyright">OpenTopoMap</a> contributors'
-    });
-    basemaps["Open Topo Map"] = Open_Topo_Map;
+        if (maplist.indexOf("HB")!==-1) {
+            basemaps[layerlookup["HB"]] = L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            });
+        }
 
-    var HikeBike_HikeBike = L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    });
-    basemaps["Hike Bike"] = HikeBike_HikeBike;
+        if (maplist.indexOf("AN")!==-1) {
+            basemaps["AutoNavi"] = L.tileLayer('https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
+                attribution: 'Tiles &copy; 高德地图',
+                maxNativeZoom:14,
+                maxZoom: 19,
+            });
+        }
 
-    var NLS_OS_1919_1947 = L.tileLayer( 'https://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg', {
-        attribution: 'Historical Maps Layer, from <a href="https://maps.nls.uk/projects/api/">NLS Maps</a>',
-        bounds: [[49.6, -12], [61.7, 3]],
-        minZoom:1, maxZoom:18,
-        subdomains: '0123'
-    });
-    basemaps["UK OS 1919-47"] = NLS_OS_1919_1947;
-
-    //var NLS_OS_1900 = L.tileLayer('https://nls-{s}.tileserver.com/NLS_API/{z}/{x}/{y}.jpg', {
-    var NLS_OS_1900 = L.tileLayer('https://nls-{s}.tileserver.com/fpsUZbzrfb5d/{z}/{x}/{y}.jpg', {
-        attribution: '<a href="https://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
-        bounds: [[49.6, -12], [61.7, 3]],
-        minZoom:1, maxNativeZoom:19, maxZoom:20,
-        subdomains: '0123'
-    });
-    basemaps["UK OS 1900"] = NLS_OS_1900;
-
-    //var CartoPos = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
-    //    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
-    //});
-    //basemaps["CartoDB Light"] = CartoPos;
-
-    // Nice terrain based maps by Stamen Design
-    var terrainUrl = "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg";
-    basemaps["Terrain"] = L.tileLayer(terrainUrl, {
-        subdomains: ['a','b','c','d'],
-        minZoom: 0,
-        maxZoom: 20,
-        type: 'jpg',
-        attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
-    });
+        if (maplist.indexOf("OS45")!==-1) {
+            basemaps[layerlookup["OS45"]] = L.tileLayer( 'https://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg', {
+                attribution: 'Historical Maps Layer, from <a href="https://maps.nls.uk/projects/api/">NLS Maps</a>',
+                bounds: [[49.6, -12], [61.7, 3]],
+                minZoom:1, maxZoom:18,
+                subdomains: '0123'
+            });
+        }
 
-    // Nice watercolour based maps by Stamen Design
-    var watercolorUrl = "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg";
-    basemaps["Watercolor"] = L.tileLayer(watercolorUrl, {
-        subdomains: ['a','b','c','d'],
-        minZoom: 0,
-        maxZoom: 20,
-        type: 'jpg',
-        attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
-    });
-}
+        if (maplist.indexOf("OS00")!==-1) {
+            //var NLS_OS_1900 = L.tileLayer('https://nls-{s}.tileserver.com/NLS_API/{z}/{x}/{y}.jpg', {
+                basemaps[layerlookup["OS00"]] = L.tileLayer('https://nls-{s}.tileserver.com/fpsUZbzrfb5d/{z}/{x}/{y}.jpg', {
+                attribution: '<a href="https://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
+                bounds: [[49.6, -12], [61.7, 3]],
+                minZoom:1, maxNativeZoom:19, maxZoom:20,
+                subdomains: '0123'
+            });
+        }
 
+        // Nice terrain based maps by Stamen Design
+        if (maplist.indexOf("ST")!==-1) {
+            var terrainUrl = "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg";
+            basemaps[layerlookup["ST"]] = L.tileLayer(terrainUrl, {
+                subdomains: ['a','b','c','d'],
+                minZoom: 0,
+                maxZoom: 20,
+                type: 'jpg',
+                attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
+            });
+        }
 
-// Now add the overlays
+        // Nice watercolour based maps by Stamen Design
+        if (maplist.indexOf("SW")!==-1) {
+            var watercolorUrl = "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg";
+            basemaps[layerlookup["SW"]] = L.tileLayer(watercolorUrl, {
+                subdomains: ['a','b','c','d'],
+                minZoom: 0,
+                maxZoom: 20,
+                type: 'jpg',
+                attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
+            });
+        }
 
-// Add the drawing layer for fun...
-layers["_drawing"] = new L.FeatureGroup();
-overlays["drawing"] = layers["_drawing"];
-map.options.drawControlTooltips = false;
-var drawCount = 0;
-var drawControl = new L.Control.Draw({
-    draw: {
-        polyline: { shapeOptions: { clickable:true } },
-        marker: false,
-        //circle: false,
-        circle: { shapeOptions: { clickable:true } },
-        circlemarker: false,
-        rectangle: { shapeOptions: { clickable:true } },
-        polygon: { shapeOptions: { clickable:true } }
-    }
-    //edit: none
-    // {
-    //     featureGroup: layers["_drawing"],
-    //     remove: true,
-    //     edit: true
-    // }
-});
-var changeDrawColour = function(col) {
-    drawControl.setDrawingOptions({
-        polyline: { shapeOptions: { color:col } },
-        circle: { shapeOptions: { color:col } },
-        rectangle: { shapeOptions: { color:col } },
-        polygon: { shapeOptions: { color:col } }
-    });
+        if (first) {
+            if (layerlookup[first]) { basemaps[layerlookup[first]].addTo(map); }
+            else { basemaps[first].addTo(map); }
+        }
+        else {
+            basemaps[Object.keys(basemaps)[0]].addTo(map);
+        }
+        if (showLayerMenu) {
+            map.removeControl(layercontrol);
+            layercontrol = L.control.layers(basemaps, overlays).addTo(map);
+        }
+    }
 }
-var shape;
-map.on('draw:created', function (e) {
-    var name = e.layerType + drawCount;
-    drawCount = drawCount + 1;
 
-    e.layer.on('contextmenu', function(e) {
-        L.DomEvent.stopPropagation(e);
-        var rmen = L.popup({offset:[0,-12]}).setLatLng(e.latlng);
-        rmen.setContent("<input type='text' autofocus value='"+e.target.name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+e.target.name+"\",true);'>Edit points</button><button onclick='delMarker(\""+e.target.name+"\",true);'>Delete</button><button onclick='sendDrawing();'>OK</button>");
-        map.openPopup(rmen);
-    });
 
-    var la, lo, cent;
-    if (e.layer.hasOwnProperty("_latlng")) {
-        la = e.layer._latlng.lat;
-        lo = e.layer._latlng.lng;
-        cent = e.layer._latlng;
-    }
-    else {
-        cent = e.layer.getBounds().getCenter();
-    }
-    var m = {action:"draw", name:name, layer:"_drawing", options:e.layer.options, radius:e.layer._mRadius, lat:la, lon:lo};
-    if (e.layer.hasOwnProperty("_latlngs")) {
-        if (e.layer.options.fill === false) { m.line = e.layer._latlngs; }
-        else { m.area = e.layer._latlngs[0]; }
-    }
+// Now add the overlays
+var addOverlays = function(overlist) {
+    //console.log("OVERLAYS",overlist)
+    // var overlookup = { DR:"Drawing", CO:"Countries", DN:"Day/Night", BU:"Buildings", SN:"Ship Navigaion", HM:"Heatmap", AC:"Air corridors", TL:"Place labels" };
+    // "DR,CO,DN,BU,SN,HM"
+
+    // Add the drawing layer...
+    if (overlist.indexOf("DR")!==-1) {
+        layers["_drawing"] = new L.FeatureGroup();
+        overlays["drawing"] = layers["_drawing"];
+        map.options.drawControlTooltips = false;
+        var drawCount = 0;
+        var drawControl = new L.Control.Draw({
+            draw: {
+                polyline: { shapeOptions: { clickable:true } },
+                marker: false,
+                //circle: false,
+                circle: { shapeOptions: { clickable:true } },
+                circlemarker: false,
+                rectangle: { shapeOptions: { clickable:true } },
+                polygon: { shapeOptions: { clickable:true } }
+            }
+            //edit: none
+            // {
+            //     featureGroup: layers["_drawing"],
+            //     remove: true,
+            //     edit: true
+            // }
+        });
+        var changeDrawColour = function(col) {
+            drawControl.setDrawingOptions({
+                polyline: { shapeOptions: { color:col } },
+                circle: { shapeOptions: { color:col } },
+                rectangle: { shapeOptions: { color:col } },
+                polygon: { shapeOptions: { color:col } }
+            });
+        }
+        var shape;
+        map.on('draw:created', function (e) {
+            var name = e.layerType + drawCount;
+            drawCount = drawCount + 1;
 
-    shape = {m:m, layer:e.layer};
-    polygons[name] = shape.layer;
-    polygons[name].lay = "_drawing";
-    polygons[name].name = name;
-    layers["_drawing"].addLayer(shape.layer);
+            e.layer.on('contextmenu', function(e) {
+                L.DomEvent.stopPropagation(e);
+                var rmen = L.popup({offset:[0,-12]}).setLatLng(e.latlng);
+                rmen.setContent("<input type='text' autofocus value='"+e.target.name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+e.target.name+"\",true);'>Edit points</button><button onclick='delMarker(\""+e.target.name+"\",true);'>Delete</button><button onclick='sendDrawing();'>OK</button>");
+                map.openPopup(rmen);
+            });
 
-    var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\",true);'>Edit points</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
-    if (e.layer.options.fill === false && navigator.onLine) {
-        rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\",true);'>Edit points</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendRoute(\""+name+"\");'>Route</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
-    }
-    rightmenuMarker.setLatLng(cent);
-    setTimeout(function() {map.openPopup(rightmenuMarker)},25);
-});
+            var la, lo, cent;
+            if (e.layer.hasOwnProperty("_latlng")) {
+                la = e.layer._latlng.lat;
+                lo = e.layer._latlng.lng;
+                cent = e.layer._latlng;
+            }
+            else {
+                cent = e.layer.getBounds().getCenter();
+            }
+            var m = {action:"draw", name:name, layer:"_drawing", options:e.layer.options, radius:e.layer._mRadius, lat:la, lon:lo};
+            if (e.layer.hasOwnProperty("_latlngs")) {
+                if (e.layer.options.fill === false) { m.line = e.layer._latlngs; }
+                else { m.area = e.layer._latlngs[0]; }
+            }
 
+            shape = {m:m, layer:e.layer};
+            polygons[name] = shape.layer;
+            polygons[name].lay = "_drawing";
+            polygons[name].name = name;
+            layers["_drawing"].addLayer(shape.layer);
 
-var defaultOptions = function () {
-    var options = {};
-    options.precision =  5;
-    options.factor = Math.pow(10, options.precision);
-    options.dimension = 2;
-    return options;
-};
+            var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\",true);'>Edit points</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
+            if (e.layer.options.fill === false && navigator.onLine) {
+                rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\",true);'>Edit points</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendRoute(\""+name+"\");'>Route</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
+            }
+            rightmenuMarker.setLatLng(cent);
+            setTimeout(function() {map.openPopup(rightmenuMarker)},25);
+        });
 
-var decode = function (encoded, options) {
-    options = defaultOptions(options);
-    var flatPoints = decodeDeltas(encoded);
-    var points = [];
-    for (var i = 0, len = flatPoints.length; i + (options.dimension - 1) < len;) {
-        var point = [];
-        for (var dim = 0; dim < options.dimension; ++dim) {
-            point.push(flatPoints[i++]);
+        var sendDrawing = function(n) {
+            var thing = document.getElementById('dinput').value;
+            map.closePopup();
+            shape.m.name = thing;
+            delMarker(n,true);
+
+            polygons[thing] = shape.layer;
+            polygons[thing].lay = "_drawing";
+            polygons[thing].name = thing;
+            layers["_drawing"].addLayer(shape.layer);
+            ws.send(JSON.stringify(shape.m));
+        }
+
+        var defaultOptions = function () {
+            var options = {};
+            options.precision =  5;
+            options.factor = Math.pow(10, options.precision);
+            options.dimension = 2;
+            return options;
+        };
+
+        var decode = function (encoded, options) {
+            options = defaultOptions(options);
+            var flatPoints = decodeDeltas(encoded);
+            var points = [];
+            for (var i = 0, len = flatPoints.length; i + (options.dimension - 1) < len;) {
+                var point = [];
+                for (var dim = 0; dim < options.dimension; ++dim) {
+                    point.push(flatPoints[i++]);
+                }
+                points.push(point);
+            }
+            return points;
+        }
+
+        var decodeDeltas = function (encoded, options) {
+            options = defaultOptions(options);
+            var lastNumbers = [];
+            var numbers = decodeFloats(encoded, options);
+            for (var i = 0, len = numbers.length; i < len;) {
+                for (var d = 0; d < options.dimension; ++d, ++i) {
+                    numbers[i] = Math.round((lastNumbers[d] = numbers[i] + (lastNumbers[d] || 0)) * options.factor) / options.factor;
+                }
+            }
+            return numbers;
         }
-        points.push(point);
-    }
-    return points;
-}
 
-var decodeDeltas = function (encoded, options) {
-    options = defaultOptions(options);
-    var lastNumbers = [];
-    var numbers = decodeFloats(encoded, options);
-    for (var i = 0, len = numbers.length; i < len;) {
-        for (var d = 0; d < options.dimension; ++d, ++i) {
-            numbers[i] = Math.round((lastNumbers[d] = numbers[i] + (lastNumbers[d] || 0)) * options.factor) / options.factor;
+        var decodeFloats = function (encoded, options) {
+            options = defaultOptions(options);
+            var numbers = decodeSignedIntegers(encoded);
+            for (var i = 0, len = numbers.length; i < len; ++i) {
+                numbers[i] /= options.factor;
+            }
+            return numbers;
         }
+
+        var decodeSignedIntegers = function (encoded) {
+            var numbers = decodeUnsignedIntegers(encoded);
+            for (var i = 0, len = numbers.length; i < len; ++i) {
+                var num = numbers[i];
+                numbers[i] = (num & 1) ? ~(num >> 1) : (num >> 1);
+            }
+            return numbers;
+        }
+
+        var decodeUnsignedIntegers = function (encoded) {
+            var numbers = [];
+            var current = 0;
+            var shift = 0;
+            for (var i = 0, len = encoded.length; i < len; ++i) {
+                var b = encoded.charCodeAt(i) - 63;
+                current |= (b & 0x1f) << shift;
+                if (b < 0x20) {
+                    numbers.push(current);
+                    current = 0;
+                    shift = 0;
+                } else {
+                    shift += 5;
+                }
+            }
+            return numbers;
+        }
+
+        var sendRoute = function(n) {
+            var p = (polygons[n]._latlngs.map(function(x) {
+                return x.lng+","+x.lat;
+            })).join(';');
+
+            fetch('https://router.project-osrm.org/route/v1/driving/'+p)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.code !== "Ok") { sendDrawing(n); }
+                    var r = decode(data.routes[0].geometry).map( x => L.latLng(x[0],x[1]) );
+                    polygons[n]._latlngs = r;
+                    shape.m.line = r;
+                    sendDrawing(n);
+                });
+        }
+
     }
-    return numbers;
-}
 
-var decodeFloats = function (encoded, options) {
-    options = defaultOptions(options);
-    var numbers = decodeSignedIntegers(encoded);
-    for (var i = 0, len = numbers.length; i < len; ++i) {
-        numbers[i] /= options.factor;
+    // Add the countries (world-110m) for offline use
+    if (overlist.indexOf("CO")!==-1 || (!navigator.onLine)) {
+        var customTopoLayer = L.geoJson(null, {clickable:false, style: {color:"blue", weight:2, fillColor:"#cf6", fillOpacity:0.04}});
+        layers["_countries"] = omnivore.topojson('images/world-50m-flat.json',null,customTopoLayer);
+        overlays["countries"] = layers["_countries"];
     }
-    return numbers;
-}
 
-var decodeSignedIntegers = function (encoded) {
-    var numbers = decodeUnsignedIntegers(encoded);
-    for (var i = 0, len = numbers.length; i < len; ++i) {
-        var num = numbers[i];
-        numbers[i] = (num & 1) ? ~(num >> 1) : (num >> 1);
+    // Add the day/night overlay
+    if (overlist.indexOf("DN")!==-1) {
+        layers["_daynight"] = new L.LayerGroup();
+        overlays["day/night"] = layers["_daynight"];
     }
-    return numbers;
-}
 
-var decodeUnsignedIntegers = function (encoded) {
-    var numbers = [];
-    var current = 0;
-    var shift = 0;
-    for (var i = 0, len = encoded.length; i < len; ++i) {
-        var b = encoded.charCodeAt(i) - 63;
-        current |= (b & 0x1f) << shift;
-        if (b < 0x20) {
-            numbers.push(current);
-            current = 0;
-            shift = 0;
-        } else {
-            shift += 5;
+    // Add live rain data
+    if (overlist.indexOf("RA")!==-1) {
+        if (navigator.onLine) {
+            overlays["rainfall"] = new L.TileLayer('https://tilecache.rainviewer.com/v2/radar/' + parseInt(Date.now()/600000)*600 + '/256/{z}/{x}/{y}/2/1_1.png', {
+                tileSize: 256,
+                opacity: 0.4,
+                transparent: true,
+                attribution: '<a href="https://rainviewer.com" target="_blank">rainviewer.com</a>'
+            });
         }
     }
-    return numbers;
-}
 
-var sendRoute = function(n) {
-    var p = (polygons[n]._latlngs.map(function(x) {
-        return x.lng+","+x.lat;
-    })).join(';');
-
-    fetch('https://router.project-osrm.org/route/v1/driving/'+p)
-        .then(response => response.json())
-        .then(data => {
-            if (data.code !== "Ok") { sendDrawing(n); }
-            var r = decode(data.routes[0].geometry).map( x => L.latLng(x[0],x[1]) );
-            polygons[n]._latlngs = r;
-            shape.m.line = r;
-            sendDrawing(n);
-        });
-}
-
-var sendDrawing = function(n) {
-    var thing = document.getElementById('dinput').value;
-    map.closePopup();
-    shape.m.name = thing;
-    delMarker(n,true);
-
-    polygons[thing] = shape.layer;
-    polygons[thing].lay = "_drawing";
-    polygons[thing].name = thing;
-    layers["_drawing"].addLayer(shape.layer);
-    ws.send(JSON.stringify(shape.m));
-}
+    // Add the buildings layer
+    if (overlist.indexOf("BU")!==-1) {
+        overlays["buildings"] = new OSMBuildings(map).load();
+        // map.removeLayer(overlays["buildings"]);     // Hide it at start
+    }
 
-// Add the countries (world-110m) for offline use
-var customTopoLayer = L.geoJson(null, {clickable:false, style: {color:"blue", weight:2, fillColor:"#cf6", fillOpacity:0.04}});
-layers["_countries"] = omnivore.topojson('images/world-50m-flat.json',null,customTopoLayer);
-overlays["countries"] = layers["_countries"];
-
-// Add the day/night overlay
-layers["_daynight"] = new L.LayerGroup();
-overlays["day/night"] = layers["_daynight"];
-
-// Add live rain data
-if (navigator.onLine) {
-    overlays["rainfall"] = new L.TileLayer('https://tilecache.rainviewer.com/v2/radar/' + parseInt(Date.now()/600000)*600 + '/256/{z}/{x}/{y}/2/1_1.png', {
-        tileSize: 256,
-        opacity: 0.4,
-        transparent: true,
-        attribution: '<a href="https://rainviewer.com" target="_blank">rainviewer.com</a>'
-    });
+    // Add Railways
+    if (overlist.indexOf("RW")!==-1) {
+        // eg https://a.tiles.openrailwaymap.org/standard/11/1015/686.png
+        overlays["railways"] = L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+        });
+    }
 
-    // Add the buildings layer
-    // overlays["buildings"] = new OSMBuildings(map).load();
-    // map.removeLayer(overlays["buildings"]);     // Hide it at start
-
-    // Add Roads
-    // overlays["roads"] = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png', {
-    //     maxZoom: 18,
-    //     attribution: 'Tiles courtesy of <a href="https://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    //     opacity: 0.8
-    // });
-
-    // // Add Railways
-    // overlays["railways"] = L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
-    //     maxZoom: 19,
-    //     attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
-    // });
-
-    // // Add Public Transport (Buses)
-    // overlays["public transport"] = L.tileLayer('https://openptmap.org/tiles/{z}/{x}/{y}.png', {
-    //     maxZoom: 17,
-    //     attribution: 'Map data: &copy; <a href="https://www.openptmap.org">OpenPtMap</a> contributors'
-    // });
+    // Add Air Corridors
+    if (overlist.indexOf("AC")!==-1) {
+        overlays["air corridors"] = L.tileLayer('https://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.{ext}', {
+            attribution: '<a href="https://www.openaip.net/">openAIP Data</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-NC-SA</a>)',
+            ext: 'png',
+            minZoom: 4,
+            maxZoom: 15,
+            maxNativeZoom: 14,
+            tms: true,
+            detectRetina: true,
+            subdomains: '12'
+        });
+    }
 
     // Add the OpenSea markers layer
-    overlays["ship nav"] = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: 'Map data: &copy; <a href="https://www.openseamap.org">OpenSeaMap</a> contributors'
-    });
-}
+    if (overlist.indexOf("SN")!==-1) {
+        overlays["ship nav"] = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: 'Map data: &copy; <a href="https://www.openseamap.org">OpenSeaMap</a> contributors'
+        });
+    }
 
-// Add the heatmap layer
-var heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
-layers["_heat"] = new L.LayerGroup().addLayer(heat);
-overlays["heatmap"] = layers["_heat"];
+    // Add the Stamen Toner Labels layer
+    if (overlist.indexOf("TL")!==-1) {
+        overlays["place labels"] = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}{r}.{ext}', {
+            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            subdomains: 'abcd',
+            minZoom: 0,
+            maxZoom: 20,
+            ext: 'png'
+        });
+    }
 
-if (showUserMenu) {
-    if ( window.localStorage.hasOwnProperty("lastlayer") ) {
-        if ( basemaps[window.localStorage.getItem("lastlayer")] ) {
-            baselayername = window.localStorage.getItem("lastlayer");
-        }
+    // Add the heatmap layer
+    if (overlist.indexOf("HM")!==-1) {
+        heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
+        layers["_heat"] = new L.LayerGroup().addLayer(heat);
+        overlays["heatmap"] = layers["_heat"];
+    }
+
+    if (showLayerMenu) {
+        map.removeControl(layercontrol);
+        layercontrol = L.control.layers(basemaps, overlays).addTo(map);
     }
 }
-if (navigator.onLine) { basemaps[baselayername].addTo(map); }
 
 // Layer control based on select box rather than radio buttons.
 //var layercontrol = L.control.selectLayers(basemaps, overlays).addTo(map);
-layercontrol = L.control.layers(basemaps, overlays);
+var layercontrol = L.control.layers(basemaps, overlays);
 
 // Add the layers control widget
 if (!inIframe) { layercontrol.addTo(map); }
@@ -1891,7 +1969,7 @@ function setMarker(data) {
         fb.action = "click";
         ws.send(JSON.stringify(fb));
     });
-    if ((data.addtoheatmap !== "false") || (!data.hasOwnProperty("addtoheatmap"))) { // Added to give ability to control if points from active layer contribute to heatmap
+    if (heat && ((data.addtoheatmap !== "false") || (!data.hasOwnProperty("addtoheatmap")))) { // Added to give ability to control if points from active layer contribute to heatmap
         if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(lli); }
     }
     markers[data.name] = marker;
@@ -1962,7 +2040,13 @@ function setMarker(data) {
 
 // handle any incoming COMMANDS to control the map remotely
 function doCommand(cmd) {
-    //console.log("COMMAND",cmd);
+    // console.log("COMMAND",cmd);
+    if (cmd.init && cmd.hasOwnProperty("maplist")) {
+        addBaseMaps(cmd.maplist,cmd.layer);
+    }
+    if (cmd.init && cmd.hasOwnProperty("overlist")) {
+        addOverlays(cmd.overlist);
+    }
     if (cmd.hasOwnProperty("toptitle")) {
         if (!inIframe ) {
             document.title = cmd.toptitle;
@@ -2089,7 +2173,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")) {
+    if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.name.length>0 && 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