better editing of shapes, better esri sat and topo layers

This commit is contained in:
Dave Conway-Jones 2020-05-15 15:07:06 +01:00
parent 8ec7a623c9
commit a6f0d95c51
No known key found for this signature in database
GPG Key ID: 302A6725C594817F
5 changed files with 47 additions and 12 deletions

View File

@ -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

View File

@ -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

View File

@ -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",

View File

@ -185,6 +185,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
<option value="Esri Ocean">ESRI Ocean</option>
<option value="Nat Geo">National Geographic</option>
<option value="UK OS Opendata">UK OS Opendata</option>
<option value="Open Topo Map">Open Topo Map</option>
<option value="Hike Bike">Hike Bike OSM</option>
<option value="Terrain">Terrain</option>
<option value="Watercolor">Stamen Watercolor</option>

View File

@ -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 &copy; 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: '&copy; <a href="https://www.opentopomap.org/copyright">OpenTopoMap</a> 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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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("<b>"+name+"</b><br/><button onclick='editPoly(\""+name+"\",true);'>Edit</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button>");
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("<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;
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("<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>");
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")) {