diff --git a/CHANGELOG.md b/CHANGELOG.md index de8e9fa..0b04b15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### Change Log for Node-RED Worldmap + - v2.3.11 - Better editing of drawing layer, add OpenTopoMap, and better Esri satellite - v2.3.10 - improve geojson layer and name handling. - v2.3.8 - fix fa-marker offset to improve accuracy. - v2.3.7 - show icon within circle if icon present. Issue #128 diff --git a/README.md b/README.md index 89b026b..456d110 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ map web page for plotting "things" on. ### Updates +- v2.3.11 - Better editing of drawing layer, add OpenTopoMap, and better Esri satellite - v2.3.10 - improve geojson layer and name handling. - v2.3.8 - fix fa-marker offset to improve accuracy. - v2.3.7 - show icon within circle if icon present. Issue #128 diff --git a/package.json b/package.json index ebbdfba..2eba272 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "node-red-contrib-web-worldmap", - "version": "2.3.10", + "version": "2.3.11", "description": "A Node-RED node to provide a web page of a world map for plotting things on.", "dependencies": { "cgi": "0.3.1", diff --git a/worldmap.html b/worldmap.html index 0c71983..16f7ef3 100644 --- a/worldmap.html +++ b/worldmap.html @@ -185,6 +185,7 @@ then by default ⌘⇧m - ctrl-shift-m will load the m + diff --git a/worldmap/worldmap.js b/worldmap/worldmap.js index 8bce1b5..54368d2 100644 --- a/worldmap/worldmap.js +++ b/worldmap/worldmap.js @@ -623,7 +623,8 @@ var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/re }); basemaps["Esri"] = Esri_WorldStreetMap; -var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { +//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; @@ -680,6 +681,13 @@ var NLS_OS_opendata = L.tileLayer('https://geo.nls.uk/maps/opendata/{z}/{x}/{y}. }); basemaps["UK OS Opendata"] = NLS_OS_opendata; +var Open_Topo_Map = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { + subdomains: 'abc', + maxZoom: 19, + attribution: '© OpenTopoMap contributors' +}); +basemaps["Open Topo Map"] = Open_Topo_Map; + var HikeBike_HikeBike = L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' @@ -754,8 +762,8 @@ var drawControl = new L.Control.Draw({ circlemarker: false, rectangle: { shapeOptions: { clickable:true } }, polygon: { shapeOptions: { clickable:true } } - }, - edit: false + } + //edit: none // { // featureGroup: layers["_drawing"], // remove: true, @@ -770,33 +778,57 @@ var changeDrawColour = function(col) { polygon: { shapeOptions: { color:col } } }); } +var shape; map.on('draw:created', function (e) { var name = e.layerType + drawCount; drawCount = drawCount + 1; - var rightmenuMarker = L.popup({offset:[0,-12]}).setContent(""+name+"
"); e.layer.on('contextmenu', function(e) { L.DomEvent.stopPropagation(e); - rightmenuMarker.setLatLng(e.latlng); - map.openPopup(rightmenuMarker); + var rmen = L.popup({offset:[0,-12]}).setLatLng(e.latlng); + rmen.setContent("
"); + map.openPopup(rmen); }); - var la, lo; + 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]; } } - ws.send(JSON.stringify(m)); - polygons[name] = e.layer; + + shape = {m:m, layer:e.layer}; + polygons[name] = shape.layer; polygons[name].lay = "_drawing"; - layers["_drawing"].addLayer(e.layer); + polygons[name].name = name; + layers["_drawing"].addLayer(shape.layer); + + var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("
"); + rightmenuMarker.setLatLng(cent); + setTimeout(function() {map.openPopup(rightmenuMarker)},25); }); +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 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); @@ -1656,7 +1688,7 @@ function doCommand(cmd) { if (changed) { showGrid = !showGrid; if (showGrid) { Lgrid.addTo(map); rulerButton.addTo(map); } - else { Lgrid.removeFrom(map); rulerButton.removeFrom(map); } + else { Lgrid.removeFrom(map); rulerButton.remove(); } } } if (cmd.grid.hasOwnProperty("opt")) {