From 0e6c2505b2e7be51eca4affe3f8e0b0a2c8410a3 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Fri, 8 Apr 2022 11:53:10 +0100 Subject: [PATCH] Fix layer command for non core base layers to Close #195 --- CHANGELOG.md | 1 + README.md | 1 + package.json | 2 +- worldmap/worldmap.js | 51 +++++++++++++++++++++++--------------------- 4 files changed, 30 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c0a5ca..441769a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### Change Log for Node-RED Worldmap + - v2.28.1 - Fix layer command bug for non-core layers. Issue #195 - v2.28.0 - Better Handling of sidc icons in geojson - v2.27.3 - Try to handle greatcircles crossing antimeridian - v2.27.1 - Reload existing markers for late joiners diff --git a/README.md b/README.md index aa2bc63..bf51b56 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ map web page for plotting "things" on. ### Updates +- v2.28.1 - Fix layer command bug for non-core layers. Issue #195 - v2.28.0 - Better Handling of sidc icons in geojson - v2.27.3 - Try to handle greatcircles crossing antimeridian - v2.27.1 - Reload existing markers for late joiners diff --git a/package.json b/package.json index 39fc0e8..949b8b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "node-red-contrib-web-worldmap", - "version": "2.28.0", + "version": "2.28.1", "description": "A Node-RED node to provide a web page of a world map for plotting things on.", "dependencies": { "@turf/bezier-spline": "~6.5.0", diff --git a/worldmap/worldmap.js b/worldmap/worldmap.js index 9282de3..ef5e480 100644 --- a/worldmap/worldmap.js +++ b/worldmap/worldmap.js @@ -733,16 +733,21 @@ map.on('contextmenu', function(e) { } }); + +// 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); + // 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", - EsriR:"Esri Relief", EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic", - UKOS:"UK OS OpenData", OS45:"UK OS 1919-1947", OS00:"UK OS 1900", OpTop:"Open Topo Map", - HB:"Hike Bike OSM", ST:"Stamen Topography", SW:"Stamen Watercolor", AN:"AutoNavi (Chinese)" - } + var layerlookup = { OSMG:"OSM grey", OSMC:"OSM", OSMH:"OSM Humanitarian", EsriC:"Esri", EsriS:"Esri Satellite", + EsriR:"Esri Relief", EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic", + UKOS:"UK OS OpenData", OS45:"UK OS 1919-1947", OS00:"UK OS 1900", OpTop:"Open Topo Map", + HB:"Hike Bike OSM", ST:"Stamen Topography", SW:"Stamen Watercolor", AN:"AutoNavi (Chinese)" + } + if (navigator.onLine) { // Use this for OSM online maps var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib='Map data © OpenStreetMap contributors'; @@ -903,18 +908,19 @@ var addBaseMaps = function(maplist,first) { attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA' }); } + } - 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); - } + if (first) { + if (layerlookup[first]) { baselayername = layerlookup[first]; } + else { basenayername = first; } + } + else { + basenayername = Object.keys(basemaps)[0]; + } + basemaps[baselayername].addTo(map); + if (showLayerMenu) { + map.removeControl(layercontrol); + layercontrol = L.control.layers(basemaps, overlays).addTo(map); } } @@ -960,7 +966,7 @@ var addOverlays = function(overlist) { }); var changeDrawColour = function(col) { drawingColour = col; - console.log("COLOR",col) + // console.log("COLOR",col) drawControl.setDrawingOptions({ polyline: { shapeOptions: { color:drawingColour } }, circle: { shapeOptions: { color:drawingColour } }, @@ -1111,7 +1117,7 @@ var addOverlays = function(overlist) { } // Add the countries (world-110m) for offline use - if (overlist.indexOf("CO")!==-1 || (!navigator.onLine)) { + 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"]; @@ -1196,10 +1202,6 @@ var addOverlays = function(overlist) { } } -// 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); - // Add the layers control widget if (!inIframe) { layercontrol.addTo(map); } else { showLayerMenu = false;} @@ -2224,7 +2226,7 @@ function doCommand(cmd) { var existsalready = false; // Add a new base map layer 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); + // 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); @@ -2523,6 +2525,7 @@ function doCommand(cmd) { baselayername = cmd.layer; basemaps[baselayername].addTo(map); } + // If set to none then remove the baselayer... if (cmd.layer && (cmd.layer === "none")) { map.removeLayer(basemaps[baselayername]); baselayername = cmd.layer;