add popup to KML points with name, description and lat, lon
This commit is contained in:
parent
1934c7ccbe
commit
3b1f5767a7
@ -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.
|
||||
|
@ -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
|
||||
|
@ -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",
|
||||
|
@ -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)) {
|
||||
|
Loading…
Reference in New Issue
Block a user