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")) {