Add Awareness for sidc icons just off edge of map (#228)

* Update worldmap.js

add edge sidc icons

* Bump edge awareness for release

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### 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)

README.md

@@ -11,6 +11,7 @@ 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)

package.json

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

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({