Add smallplane icon

This commit is contained in:
Dave Conway-Jones 2021-10-17 17:12:05 +01:00
parent 050441ccb1
commit 32f74a25ab
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
4 changed files with 20 additions and 7 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap ### Change Log for Node-RED Worldmap
- v2.17.2 - Add smallplane icon.
- v2.17.1 - More complete feedback on click, better popup image sizing. - v2.17.1 - More complete feedback on click, better popup image sizing.
- v2.16.3 - Ensure polygons can be deleted. - v2.16.3 - Ensure polygons can be deleted.
- v2.16.2 - better handling of unpacked gpz objects. - v2.16.2 - better handling of unpacked gpz objects.

View File

@ -11,6 +11,7 @@ map web page for plotting "things" on.
### Updates ### Updates
- v2.17.2 - Add smallplane icon.
- v2.17.1 - More complete feedback on click, better popup image sizing. - v2.17.1 - More complete feedback on click, better popup image sizing.
- v2.16.3 - Ensure polygons can be deleted. - v2.16.3 - Ensure polygons can be deleted.
- v2.16.2 - better handling of unpacked gpz objects. - v2.16.2 - better handling of unpacked gpz objects.
@ -91,18 +92,19 @@ Or you can specify an image to load as an icon by setting the icon to http(s)://
There are also several special icons... There are also several special icons...
- **plane** : a plane icon that aligns with the heading of travel. - **plane** : a jet plane icon that aligns with the heading of travel.
- **smallplane** : a light aircraft icon that aligns with the heading of travel.
- **ship** : a ship icon that aligns with the heading of travel. - **ship** : a ship icon that aligns with the heading of travel.
- **car** : a car icon that aligns with the heading of travel. - **car** : a car icon that aligns with the heading of travel.
- **bus** : a bus/coach icon that aligns with the heading of travel. - **bus** : a bus/coach icon that aligns with the heading of travel.
- **uav** : a small plane icon that aligns with the heading of travel. - **uav** : a small uav like icon that aligns with the heading of travel.
- **helicopter** : a small helicopter icon that aligns with the heading of travel. - **helicopter** : a small helicopter icon that aligns with the heading of travel.
- **arrow** : a map GPS arrow type pointer that aligns with the heading of travel. - **arrow** : a map GPS arrow type pointer that aligns with the heading of travel.
- **wind** : a wind arrow that points in the direction the wind is coming FROM. - **wind** : a wind arrow that points in the direction the wind is coming FROM.
- **satellite** : a small satellite icon. - **satellite** : a small satellite icon.
- **iss** : a slightly larger icon for the ISS. - **iss** : a slightly larger icon for the ISS.
- **locate** : a 4 corner outline to locate a point without obscuring it. - **locate** : a 4 corner outline to locate a point without obscuring it.
- **friend** : pseudo NATO style blue rectangle. - **friend** : pseudo NATO style blue rectangle. (see NATO SIDC option below)
- **hostile** : pseudo NATO style red circle. - **hostile** : pseudo NATO style red circle.
- **neutral** : pseudo NATO style green square. - **neutral** : pseudo NATO style green square.
- **unknown** : pseudo NATO style yellow square. - **unknown** : pseudo NATO style yellow square.
@ -111,7 +113,7 @@ There are also several special icons...
#### NATO Symbology #### NATO Symbology
You can use NATO symbols from <a href="https://github.com/spatialillusions/milsymbol" target="mapinfo">milsymbol.js</a>. You can use NATO symbols from <a href="https://github.com/spatialillusions/milsymbol" target="mapinfo">milsymbol.js</a>.
To do this you need to supply a `msg.payload.SIDC` instead of an icon, for example: To do this you need to supply a `msg.payload.SIDC` 2525 code instead of an icon, for example:
msg.payload = { msg.payload = {
"name": "Emergency Medical Operation", "name": "Emergency Medical Operation",

View File

@ -1,6 +1,6 @@
{ {
"name": "node-red-contrib-web-worldmap", "name": "node-red-contrib-web-worldmap",
"version": "2.17.1", "version": "2.17.2",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.", "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": { "dependencies": {
"cgi": "0.3.1", "cgi": "0.3.1",

View File

@ -1461,8 +1461,18 @@ function setMarker(data) {
html:'<img src="'+svgplane+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>' html:'<img src="'+svgplane+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>'
}); });
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag}); marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
//q = 'https://www.bing.com/images/search?q='+data.icon+'%20'+encodeURIComponent(data.name); }
//words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>'; else if (data.icon === "smallplane") {
data.iconColor = data.iconColor || "black";
icon = '<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="20" height="20">';
icon += '<path d="M15.388 4.781c.068.068.061.154-.171.656-.028.06-.18.277-.18.277s.102.113.13.14c.054.055.078.175.056.27-.068.295-.89 1.47-1.35 1.93-.285.286-.432.481-.422.56.009.068.117.356.24.64.219.5.3.599 2.762 3.339 1.95 2.169 2.546 2.87 2.582 3.028.098.439-.282.847-1.264 1.356l-.507.263-7.389-5.29-4.43 3.365.102.18c.056.099.519.676 1.029 1.283.51.607.933 1.161.94 1.232.026.284-1.111 1.177-1.282 1.006-.27-.27-1.399-1.131-1.494-1.14-.068-.007-1.04-.747-1.37-1.077-.329-.33-1.07-1.301-1.076-1.37-.01-.094-.871-1.224-1.14-1.493-.171-.171.722-1.308 1.006-1.282.07.007.625.43 1.231.94.607.51 1.185.973 1.283 1.029l.18.101 3.365-4.43-5.29-7.388.263-.507c.51-.982.918-1.362 1.357-1.264.158.035.859.632 3.028 2.581 2.74 2.462 2.838 2.544 3.339 2.762.284.124.572.232.639.24.08.01.274-.136.56-.422.46-.46 1.635-1.282 1.93-1.35.095-.022.216.003.27.057.028.028.139.129.139.129s.217-.153.277-.18c.502-.233.59-.238.657-.17z" fill="'+data.iconColor+'"/></svg>';
var svgplane = "data:image/svg+xml;base64," + btoa(icon);
myMarker = L.divIcon({
className:"planeicon",
iconAnchor: [16, 16],
html:'<img src="'+svgplane+'" style="width:32px; height:32px; -webkit-transform:rotate('+(dir - 45)+'deg); -moz-transform:rotate('+(dir - 45)+'deg);"/>'
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
} }
else if (data.icon === "bus") { else if (data.icon === "bus") {
dir = dir - 90; dir = dir - 90;