Add Awareness for sidc icons just off edge of map (#228)
* Update worldmap.js add edge sidc icons * Bump edge awareness for release
This commit is contained in:
parent
8627c03a2f
commit
7d9c9a6603
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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",
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user