Skip to content

Commit 38549f2

Browse files
dceejaydceejay
committed
Lets special icon size be set by iconSize in pixels
to close #300
1 parent 72706e8 commit 38549f2

File tree

4 files changed

+49
-35
lines changed

4 files changed

+49
-35
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
### Change Log for Node-RED Worldmap
22

3+
- v5.1.0 - Let special icons be sizeable using iconSize property.
34
- v5.0.9 - Slight tidy on flags, bump turf dep.
45
- v5.0.8 - Fix flag handling for SIDC 2525D, add example.
56
- v5.0.7 - Allow Tooltip options (see new example). #PR295.

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
1313

1414
### Updates
1515

16+
- v5.1.0 - Let special icons be sizeable using iconSize property.
1617
- v5.0.9 - Slight tidy on flags, bump turf dep.
1718
- v5.0.8 - Fix flag handling for SIDC 2525D, add example.
1819
- v5.0.7 - Allow Tooltip options (see new example). #PR295.
@@ -78,6 +79,7 @@ Optional properties for **msg.payload** include
7879
- **color** : CSS color name or #rrggbb value for heading vector line or accuracy polygon.
7980
- **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name, <a href="https://github.com/Paul-Reed/weather-icons-lite" target="mapinfo">weather-lite</a> icon, :emoji name:, or https:// or inline data:image/ uri.
8081
- **iconColor** : Standard CSS colour name or #rrggbb hex value.
82+
- **iconSize** : Set the size in pixels of the "special" icons and web icons.
8183
- **SIDC** : NATO symbology code (can be used instead of icon). See below.
8284
- **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below.
8385
- **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting, minimum 20 seconds)
@@ -105,7 +107,7 @@ If you use the name without the fa- prefix (eg `male`) you will get the icon ins
105107

106108
You can also specify an emoji as the icon by using the :emoji name: syntax - for example `:smile:`. Here is a **[list of emojis](https://github.com/dceejay/RedMap/blob/master/emojilist.md)**.
107109

108-
Or you can specify an image to load as an icon by setting the icon to `http(s)://...` By default it will be scaled to 32x32 pixels. You can change the size by setting **iconSize** to a number - eg 64. Example icon - `"https://img.icons8.com/windows/32/000000/bird.png"` or you can use an inline image of the form `data:image/...` which uses a base64 encoded image.
110+
Or you can specify an image to load as an icon by setting the icon to `http(s)://...` By default it will be scaled to 32x32 pixels. You can change the size by setting **iconSize** to a number of pixels - eg 64. Example icon - `"https://img.icons8.com/windows/32/000000/bird.png"` or you can use an inline image of the form `data:image/...` which uses a base64 encoded image.
109111

110112
There are also several special icons...
111113

@@ -129,6 +131,9 @@ There are also several special icons...
129131
- **unknown** : pseudo NATO style yellow square.
130132
- **earthquake** : black circle - diameter proportional to `msg.mag`.
131133

134+
The size of these can also be set in pixels using the **iconSize** property, e.g. `iconSize:96`.
135+
The default size is 32 pixels.
136+
132137
#### NATO Symbology
133138

134139
You can use NATO symbols from <a href="https://github.com/spatialillusions/milsymbol" target="mapinfo">milsymbol.js</a>.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "node-red-contrib-web-worldmap",
3-
"version": "5.0.9",
3+
"version": "5.1.0",
44
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
55
"dependencies": {
66
"@turf/bezier-spline": "~7.2.0",

‎worldmap/worldmap.js‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1824,6 +1824,14 @@ function setMarker(data) {
18241824

18251825
if (data.hasOwnProperty("icon")) {
18261826
var dir = parseFloat(data.track ?? data.hdg ?? data.heading ?? data.bearing ?? "0") + map.getBearing();
1827+
var siz = 32;
1828+
var sizc = 16;
1829+
if (data?.iconSize && !isNaN(data.iconSize)) {
1830+
if (data.iconSize >= 8 && data.iconSize <= 256) {
1831+
siz = data.iconSize;
1832+
sizc = Math.round(siz/2);
1833+
}
1834+
}
18271835
if (data.icon === "ship") {
18281836
marker = L.boatMarker(ll, {
18291837
title: data["name"],
@@ -1845,20 +1853,20 @@ function setMarker(data) {
18451853
var svgplane = "data:image/svg+xml;base64," + btoa(icon);
18461854
myMarker = L.divIcon({
18471855
className:"planeicon",
1848-
iconAnchor: [16, 16],
1849-
html:'<img src="'+svgplane+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>'
1856+
iconAnchor: [sizc, sizc],
1857+
html:'<img src="'+svgplane+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>'
18501858
});
18511859
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
18521860
}
18531861
else if (data.icon === "smallplane") {
18541862
data.iconColor = data.iconColor ?? "black";
1855-
icon = '<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="20" height="20">';
1863+
icon = '<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 20 20">';
18561864
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>';
18571865
var svgsplane = "data:image/svg+xml;base64," + btoa(icon);
18581866
myMarker = L.divIcon({
18591867
className:"planeicon",
1860-
iconAnchor: [16, 16],
1861-
html:'<img src="'+svgsplane+'" style="width:32px; height:32px; -webkit-transform:rotate('+(dir - 45)+'deg); -moz-transform:rotate('+(dir - 45)+'deg);"/>'
1868+
iconAnchor: [sizc, sizc],
1869+
html:'<img src="'+svgsplane+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+(dir - 45)+'deg); -moz-transform:rotate('+(dir - 45)+'deg);"/>'
18621870
});
18631871
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
18641872
}
@@ -1873,8 +1881,8 @@ function setMarker(data) {
18731881
var svgbus = "data:image/svg+xml;base64," + btoa(icon);
18741882
myMarker = L.divIcon({
18751883
className:"busicon",
1876-
iconAnchor: [16, 16],
1877-
html:'<img src="'+svgbus+'" style="width:32px; height:32px; -webkit-transform:scaleY('+sc+') rotate('+dir*sc+'deg); -moz-transform:scaleY('+sc+') rotate('+dir*sc+'deg);"/>'
1884+
iconAnchor: [sizc, sizc],
1885+
html:'<img src="'+svgbus+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:scaleY('+sc+') rotate('+dir*sc+'deg); -moz-transform:scaleY('+sc+') rotate('+dir*sc+'deg);"/>'
18781886
});
18791887
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
18801888
}
@@ -1890,8 +1898,8 @@ function setMarker(data) {
18901898
var svgheli = "data:image/svg+xml;base64," + btoa(icon);
18911899
myMarker = L.divIcon({
18921900
className:"heliicon",
1893-
iconAnchor: [16, 16],
1894-
html:'<img src="'+svgheli+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>'
1901+
iconAnchor: [sizc, sizc],
1902+
html:'<img src="'+svgheli+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>'
18951903
});
18961904
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
18971905
}
@@ -1907,8 +1915,8 @@ function setMarker(data) {
19071915
var svguav = "data:image/svg+xml;base64," + btoa(icon);
19081916
myMarker = L.divIcon({
19091917
className:"uavicon",
1910-
iconAnchor: [16, 16],
1911-
html:'<img src="'+svguav+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
1918+
iconAnchor: [sizc, sizc],
1919+
html:'<img src="'+svguav+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
19121920
});
19131921
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19141922
}
@@ -1919,8 +1927,8 @@ function setMarker(data) {
19191927
var svgquad = "data:image/svg+xml;base64," + btoa(icon);
19201928
myMarker = L.divIcon({
19211929
className:"quadicon",
1922-
iconAnchor: [16, 16],
1923-
html:'<img src="'+svgquad+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
1930+
iconAnchor: [sizc, sizc],
1931+
html:'<img src="'+svgquad+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
19241932
});
19251933
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19261934
}
@@ -1931,8 +1939,8 @@ function setMarker(data) {
19311939
var svgcar = "data:image/svg+xml;base64," + btoa(icon);
19321940
myMarker = L.divIcon({
19331941
className:"caricon",
1934-
iconAnchor: [16, 16],
1935-
html:'<img src="'+svgcar+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
1942+
iconAnchor: [sizc, sizc],
1943+
html:'<img src="'+svgcar+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
19361944
});
19371945
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19381946
}
@@ -1942,21 +1950,22 @@ function setMarker(data) {
19421950
var svgcam = "data:image/svg+xml;base64," + btoa(icon);
19431951
myMarker = L.divIcon({
19441952
className:"camicon",
1945-
iconAnchor: [12, 12],
1946-
html:'<img src="'+svgcam+'" style="width:24px; height:24px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
1953+
iconAnchor: [sizc, sizc],
1954+
html:'<img src="'+svgcam+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
19471955
});
19481956
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19491957
}
19501958
else if (data.icon === "arrow") {
19511959
data.iconColor = data.iconColor || "black";
1952-
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32">';
1953-
icon += '<path d="m16.2 0.6l-10.9 31 10.7-11.1 10.5 11.1 -10.3-31z" fill="'+data.iconColor+'"/></svg>';
1960+
icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">';
1961+
icon += '<path d="m16.2.6-10.9 31L16 20.5l10.5 11.1z" fill="'+data.iconColor+'"/></svg>';
19541962
var svgarrow = "data:image/svg+xml;base64," + btoa(icon);
19551963
myMarker = L.divIcon({
19561964
className:"arrowicon",
1957-
iconAnchor: [16, 16],
1958-
html:"'<img src='"+svgarrow+"' style='width:32px; height:32px; -webkit-transform:translate(0px,-16px) rotate("+dir+"deg); -moz-transform:translate(0px,-16px) rotate("+dir+"deg);'/>",
1965+
iconAnchor: [sizc, sizc],
1966+
html:'<img src="'+svgarrow+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
19591967
});
1968+
console.log("MM",myMarker)
19601969
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19611970
}
19621971
else if (data.icon === "wind") {
@@ -1966,8 +1975,8 @@ function setMarker(data) {
19661975
var svgwind = "data:image/svg+xml;base64," + btoa(icon);
19671976
myMarker = L.divIcon({
19681977
className:"windicon",
1969-
iconAnchor: [16, 16],
1970-
html:'<img src="'+svgwind+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
1978+
iconAnchor: [sizc, sizc],
1979+
html:'<img src="'+svgwind+'" style="width:'+siz+'px; height:'+siz+'px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
19711980
});
19721981
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19731982
}
@@ -1983,8 +1992,8 @@ function setMarker(data) {
19831992
var svgsat = "data:image/svg+xml;base64," + btoa(icon);
19841993
myMarker = L.divIcon({
19851994
className:"satelliteicon",
1986-
iconAnchor: [16, 16],
1987-
html:'<img src="'+svgsat+'" style="width:32px; height:32px;"/>',
1995+
iconAnchor: [sizc, sizc],
1996+
html:'<img src="'+svgsat+'" style="width:'+siz+'px; height:'+siz+'px;"/>',
19881997
});
19891998
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
19901999
}
@@ -2028,8 +2037,8 @@ function setMarker(data) {
20282037
var svglocate = "data:image/svg+xml;base64," + btoa(icon);
20292038
myMarker = L.divIcon({
20302039
className:"locateicon",
2031-
iconAnchor: [16, 16],
2032-
html:'<img src="'+svglocate+'" style="width:32px; height:32px;"/>',
2040+
iconAnchor: [sizc, sizc],
2041+
html:'<img src="'+svglocate+'" style="width:'+siz+'px; height:'+siz+'px;"/>',
20332042
});
20342043
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
20352044
labelOffset = [12,-4];
@@ -2064,16 +2073,14 @@ function setMarker(data) {
20642073
labelOffset = [12,-4];
20652074
}
20662075
else if (data.icon.match(/^https?:.*$|^\/|^data:image\//)) { // web url icon https://...
2067-
let sz = data.iconSize ?? 32;
20682076
myMarker = L.icon({
20692077
iconUrl: data.icon,
2070-
iconSize: [sz, sz],
2071-
iconAnchor: [sz/2, sz/2],
2072-
popupAnchor: [0, -sz/2]
2078+
iconSize: [siz, siz],
2079+
iconAnchor: [sizc, sizc],
2080+
popupAnchor: [0, -siz/2]
20732081
});
20742082
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag, rotationAngle:dir, rotationOrigin:"center"});
2075-
labelOffset = [sz/2-4,-4];
2076-
delete data.iconSize;
2083+
labelOffset = [sizc-4,-4];
20772084
}
20782085
else if (data.icon.substr(0,3) === "fa-") { // fa icon
20792086
let col = data.iconColor ?? "#910000";
@@ -2113,6 +2120,7 @@ function setMarker(data) {
21132120
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
21142121
labelOffset = [6,-6];
21152122
}
2123+
delete data.iconSize;
21162124
}
21172125
else if (data.hasOwnProperty("SIDC")) { // NATO mil2525 icons
21182126
// "SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS"

0 commit comments

Comments
 (0)