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

CHANGELOG.md

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

README.md

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

package.json

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

worldmap/worldmap.js

@@ -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";
+            myMarker = L.divIcon({
-            var 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)) {