add popup to KML points with name, description and lat, lon

This commit is contained in:
Dave Conway-Jones 2021-03-21 17:07:06 +00:00
parent 1934c7ccbe
commit 3b1f5767a7
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
4 changed files with 29 additions and 9 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap
- v2.11.1 - Better handle KML point info - add popup.
- v2.11.0 - Add option to smooth tracks using bezier curves.
- v2.10.0 - Save latest position to browser for refresh if in iframe/dashboard. Allow fractional Zoom levels.
- v2.9.0 - Let weblinks be an array of links. Add more info to readme about Mapservers.

View File

@ -11,6 +11,7 @@ map web page for plotting "things" on.
### Updates
- v2.11.1 - Better handle KML point info - add popup.
- v2.11.0 - Add option to smooth tracks using bezier curves.
- v2.10.0 - Save latest position to browser for refresh if in iframe/dashboard. Allow fractional Zoom levels.
- v2.9.0 - Let weblinks be an array of links. Add more info to readme about Mapservers.
@ -656,6 +657,11 @@ docker run --name maptiler -d -v $(pwd):/data -p 1884:8080 maptiler/tileserver-g
```
and use a url like `"url": "http://localhost:1884/styles/basic-preview/{z}/{x}/{y}.png"`
Other useful map servers include Geoserver, a somewhat larger image but fully featured.
```
docker run --name geoserver -d -v ${PWD}:/var/local/geoserver -p 1885:8080 oscarfonts/geoserver
```
---
## Examples and Demo Flow

View File

@ -1,6 +1,6 @@
{
"name": "node-red-contrib-web-worldmap",
"version": "2.11.0",
"version": "2.11.1",
"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

@ -2176,23 +2176,36 @@ function doCommand(cmd) {
}
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
var custIco = function() {
var customLayer = L.geoJson();
var col = cmd.map.iconColor || "#910000";
var myMarker = L.VectorMarkers.icon({
icon: "circle",
markerColor: col,
prefix: 'fa',
iconColor: 'white'
});
if (cmd.map.hasOwnProperty("icon")) {
var col = cmd.map.iconColor || "#910000";
var myMarker = L.divIcon({
myMarker = L.divIcon({
className:"faicon",
html: '<center><i class="fa fa-fw '+cmd.map.icon+'" style="color:'+col+'"></i></center>',
iconSize: [16, 16],
});
customLayer = L.geoJson(null, {
pointToLayer: function(geoJsonPoint, latlng) {
return L.marker(latlng, {icon: myMarker, title: geoJsonPoint.properties.name});
}
});
}
var customLayer = L.geoJson(null, {
pointToLayer: function(geoJsonPoint, latlng) {
//console.log("KML/GPX point",geoJsonPoint)
var d = (geoJsonPoint.properties.description || "").trim();
var mypop = '<b>'+geoJsonPoint.properties.name + '</b><br>'+d+'<br>lat,lon : ' + geoJsonPoint.geometry.coordinates[1] + ', ' + geoJsonPoint.geometry.coordinates[0];
if (geoJsonPoint.geometry.coordinates[2]) {
mypop = '<b>'+geoJsonPoint.properties.name + '</b><br>'+d+'<br>lat,lon.alt : ' + geoJsonPoint.geometry.coordinates[1] + ', ' + geoJsonPoint.geometry.coordinates[0] + ', ' + geoJsonPoint.geometry.coordinates[2];
}
return L.marker(latlng, {icon:myMarker, title:geoJsonPoint.properties.name}).bindPopup(mypop);
}
});
return customLayer;
}
// Add a new KML overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kml") ) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {