node-red-contrib-web-worldmap 2.34.0 → 2.36.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.36.0 - Add edge icons for SIDC markers just off the map.
+ - v2.35.0 - Let clickable:false work for markers as well.
  - v2.34.0 - Let icon "url" be a local fixed path (PR #223)
  - v2.33.0 - Let shapes create click event. (from PR #221)
              Fix heatmap delete point bug. Issue #222

package/README.md

@@ -11,6 +11,8 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.36.0 - Add edge icons for SIDC markers just off the map.
+- v2.35.0 - Let clickable:false work for markers as well.
 - v2.34.0 - Let icon "url" be a local fixed path (PR #223)
 - v2.33.0 - Let shapes create click event. (from PR #221)
             Fix heatmap delete point bug. Issue #222
@@ -67,6 +69,7 @@ Optional properties include
  - **weblink** : adds a link to an external page. Either set a url as a *string*, or an *object* like `{"name":"BBC News", "url":"https://news.bbc.co.uk", "target":"_new"}`, or multiple links with an *array of objects* `[{"name":"BBC News", "url":"https://news.bbc.co.uk", "target":"_new"},{"name":"node-red", "url":"https://nodered.org", "target":"_new"}]`
  - **addtoheatmap** : set to <i>false</i> to exclude point from contributing to the heatmap layer. (default true)
  - **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on the heatmap layer. (default 1.0)
+ - **clickable** : Default true. Setting to false disables showing any popup.
  - **popped** : set to true to automatically open the popup info box, set to false to close it.
  - **popup** : html to fill the popup if you don't want the automatic default of the properties list. Using this overrides photourl, videourl and weblink options.
  - **label** : displays the contents as a permanent label next to the marker, or

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.34.0",
+    "version": "2.36.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~6.5.0",

package/worldmap/worldmap.js

@@ -33,7 +33,9 @@ var drawingColour = "#910000";
 var sendDrawing;
 var colorControl;
 var sendRoute;
-var oldBounds = {ne:{lat:0,lng:0},sw:{lat:0,lng:0}};
+var oldBounds = {ne:{lat:0, lng:0}, sw:{lat:0, lng:0}};
+var edgeLayer = new L.layerGroup();
+var edgeEnabled = true;
 
 var iconSz = {
     "Team/Crew": 24,
@@ -371,6 +373,69 @@ var Lgrid = L.latlngGraticule({
     ]
 });
 
+// Add small sidc icons around edge of map for things just outside of view
+// This function based heavily on Game Aware code from Måns Beckman
+// Copyright (c) 2013 Måns Beckman, All rights reserved.
+var edgeAware = function() {
+    if (!edgeEnabled) { return; }
+	map.removeLayer(edgeLayer)
+	edgeLayer = new L.layerGroup();
+	var mapBounds = map.getBounds();
+	var mapBoundsCenter = mapBounds.getCenter();
+
+	pSW = map.options.crs.latLngToPoint(mapBounds.getSouthWest(), map.getZoom());
+	pNE = map.options.crs.latLngToPoint(mapBounds.getNorthEast(), map.getZoom());
+	pCenter = map.options.crs.latLngToPoint(mapBoundsCenter, map.getZoom());
+
+	var viewBounds = L.latLngBounds(map.options.crs.pointToLatLng(L.point(pSW.x - (pCenter.x - pSW.x ), pSW.y - (pCenter.y - pSW.y )), map.getZoom()) , map.options.crs.pointToLatLng(L.point(pNE.x + (pNE.x - pCenter.x) , pNE.y + (pNE.y - pCenter.y) ), map.getZoom()) );
+	for (var id in markers) {
+        if (allData[id].hasOwnProperty("SIDC")) {
+            markerLatLng = markers[id].getLatLng();
+            if ( viewBounds.contains(markerLatLng) && !mapBounds.contains(markerLatLng) ) {
+                var k = (markerLatLng.lat - mapBoundsCenter.lat) / (markerLatLng.lng - mapBoundsCenter.lng);
+
+                if (markerLatLng.lng > mapBoundsCenter.lng) { x = mapBounds.getEast() - mapBoundsCenter.lng; }
+                else { x = (mapBounds.getWest() - mapBoundsCenter.lng); }
+
+                if (markerLatLng.lat < mapBoundsCenter.lat) { y = mapBounds.getSouth() - mapBoundsCenter.lat; }
+                else { y = mapBounds.getNorth() - mapBoundsCenter.lat; }
+
+                var lat = (mapBoundsCenter.lat + (k * x));
+                var lng = (mapBoundsCenter.lng + (y / k));
+                var iconAnchor = {x:5, y:5}
+
+                if (lng > mapBounds.getEast()) {
+                    lng = mapBounds.getEast();
+                    iconAnchor.x = 20;
+                }
+                if (lng < mapBounds.getWest()) {
+                    lng = mapBounds.getWest();
+                    iconAnchor.x = -5;
+                };
+                if (lat < mapBounds.getSouth()) {
+                    lat = mapBounds.getSouth();
+                    iconAnchor.y = 15;
+                }
+                if (lat > mapBounds.getNorth()) {
+                    lat = mapBounds.getNorth();
+                    iconAnchor.y = -5;
+                };
+
+                var eico = new ms.Symbol(allData[id].SIDC.substr(0,5)+"-------",{size:9});
+                var myicon = L.icon({
+                    iconUrl: eico.toDataURL(),
+                    iconAnchor: new L.Point(iconAnchor.x, iconAnchor.y),
+                    className: "natoicon-s",
+                });
+
+                edgeLayer.addLayer(L.marker([lat,lng],{icon:myicon}))
+            }
+        }
+	}
+	edgeLayer.addTo(map)
+}
+// end of edge function
+
 var panit = false;
 function doPanit(v) {
     if (v !== undefined) { panit = v; }
@@ -672,6 +737,7 @@ map.on('zoomend', function() {
     var b = map.getBounds();
     oldBounds = {sw:{lat:b._southWest.lat,lng:b._southWest.lng},ne:{lat:b._northEast.lat,lng:b._northEast.lng}};
     ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng, zoom:map.getZoom() }));
+    edgeAware();
 });
 map.on('moveend', function() {
     window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
@@ -680,6 +746,7 @@ map.on('moveend', function() {
         ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng, zoom:map.getZoom() }));
         oldBounds = {sw:{lat:b._southWest.lat,lng:b._southWest.lng},ne:{lat:b._northEast.lat,lng:b._northEast.lng}};
     }
+    edgeAware();
 });
 map.on('locationfound', onLocationFound);
 map.on('locationerror', onLocationError);
@@ -1871,6 +1938,7 @@ function setMarker(data) {
             className: "natoicon",
         });
         marker =  L.marker(ll, { title:data.name, icon:myicon, draggable:drag });
+        edgeAware();
     }
     else {
         myMarker = L.VectorMarkers.icon({
@@ -2024,12 +2092,11 @@ function setMarker(data) {
     if (data.fill) { delete data.fill; }
     if (data.draggable) { delete data.draggable; }
     //if (!isNaN(data.speed)) { data.speed = data.speed.toFixed(2); }
-    if (data.hasOwnProperty("clickable")) { delete data.clickable; }
     if (data.hasOwnProperty("fillColor")) { delete data.fillColor; }
     if (data.hasOwnProperty("radius")) { delete data.radius; }
     if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
     for (var i in data) {
-        if ((i != "name") && (i != "length")) {
+        if ((i != "name") && (i != "length") && (i != "clickable")) {
             if (typeof data[i] === "object") {
                 words += i +" : "+JSON.stringify(data[i])+"<br/>";
             } else {
@@ -2042,8 +2109,10 @@ function setMarker(data) {
     words = "<b>"+data.name+"</b><br/>" + words; //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
     var wopt = {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200};
     if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; }
-    marker.bindPopup(words, wopt);
-    marker._popup.dname = data.name;
+    if (!data.hasOwnProperty("clickable") && data.clickable != false) {
+        marker.bindPopup(words, wopt);
+        marker._popup.dname = data.name;
+    }
     marker.lay = lay;                       // and the layer it is on
 
     // marker.on('click', function(e) {