node-red-contrib-web-worldmap 5.0.9 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/README.md +6 -1
  3. package/package.json +1 -1
  4. package/worldmap/worldmap.js +41 -33
package/CHANGELOG.md CHANGED
@@ -1,5 +1,6 @@
1
1
  ### Change Log for Node-RED Worldmap
2
2
 
3
+ - v5.1.0 - Let special icons be sizeable using iconSize property.
3
4
  - v5.0.9 - Slight tidy on flags, bump turf dep.
4
5
  - v5.0.8 - Fix flag handling for SIDC 2525D, add example.
5
6
  - v5.0.7 - Allow Tooltip options (see new example). #PR295.
package/README.md CHANGED
@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
13
13
 
14
14
  ### Updates
15
15
 
16
+ - v5.1.0 - Let special icons be sizeable using iconSize property.
16
17
  - v5.0.9 - Slight tidy on flags, bump turf dep.
17
18
  - v5.0.8 - Fix flag handling for SIDC 2525D, add example.
18
19
  - v5.0.7 - Allow Tooltip options (see new example). #PR295.
@@ -78,6 +79,7 @@ Optional properties for **msg.payload** include
78
79
  - **color** : CSS color name or #rrggbb value for heading vector line or accuracy polygon.
79
80
  - **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.
80
81
  - **iconColor** : Standard CSS colour name or #rrggbb hex value.
82
+ - **iconSize** : Set the size in pixels of the "special" icons and web icons.
81
83
  - **SIDC** : NATO symbology code (can be used instead of icon). See below.
82
84
  - **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below.
83
85
  - **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
105
107
 
106
108
  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)**.
107
109
 
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.
109
111
 
110
112
  There are also several special icons...
111
113
 
@@ -129,6 +131,9 @@ There are also several special icons...
129
131
  - **unknown** : pseudo NATO style yellow square.
130
132
  - **earthquake** : black circle - diameter proportional to `msg.mag`.
131
133
 
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
+
132
137
  #### NATO Symbology
133
138
 
134
139
  You can use NATO symbols from <a href="https://github.com/spatialillusions/milsymbol" target="mapinfo">milsymbol.js</a>.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "node-red-contrib-web-worldmap",
3
- "version": "5.0.9",
3
+ "version": "5.1.0",
4
4
  "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
5
5
  "dependencies": {
6
6
  "@turf/bezier-spline": "~7.2.0",
package/worldmap/worldmap.js CHANGED
@@ -1824,6 +1824,14 @@ function setMarker(data) {
1824
1824
 
1825
1825
  if (data.hasOwnProperty("icon")) {
1826
1826
  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
+ }
1827
1835
  if (data.icon === "ship") {
1828
1836
  marker = L.boatMarker(ll, {
1829
1837
  title: data["name"],
@@ -1845,20 +1853,20 @@ function setMarker(data) {
1845
1853
  var svgplane = "data:image/svg+xml;base64," + btoa(icon);
1846
1854
  myMarker = L.divIcon({
1847
1855
  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);"/>'
1850
1858
  });
1851
1859
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1852
1860
  }
1853
1861
  else if (data.icon === "smallplane") {
1854
1862
  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">';
1856
1864
  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>';
1857
1865
  var svgsplane = "data:image/svg+xml;base64," + btoa(icon);
1858
1866
  myMarker = L.divIcon({
1859
1867
  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);"/>'
1862
1870
  });
1863
1871
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1864
1872
  }
@@ -1873,8 +1881,8 @@ function setMarker(data) {
1873
1881
  var svgbus = "data:image/svg+xml;base64," + btoa(icon);
1874
1882
  myMarker = L.divIcon({
1875
1883
  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);"/>'
1878
1886
  });
1879
1887
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1880
1888
  }
@@ -1890,8 +1898,8 @@ function setMarker(data) {
1890
1898
  var svgheli = "data:image/svg+xml;base64," + btoa(icon);
1891
1899
  myMarker = L.divIcon({
1892
1900
  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);"/>'
1895
1903
  });
1896
1904
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1897
1905
  }
@@ -1907,8 +1915,8 @@ function setMarker(data) {
1907
1915
  var svguav = "data:image/svg+xml;base64," + btoa(icon);
1908
1916
  myMarker = L.divIcon({
1909
1917
  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);"/>',
1912
1920
  });
1913
1921
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1914
1922
  }
@@ -1919,8 +1927,8 @@ function setMarker(data) {
1919
1927
  var svgquad = "data:image/svg+xml;base64," + btoa(icon);
1920
1928
  myMarker = L.divIcon({
1921
1929
  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);"/>',
1924
1932
  });
1925
1933
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1926
1934
  }
@@ -1931,8 +1939,8 @@ function setMarker(data) {
1931
1939
  var svgcar = "data:image/svg+xml;base64," + btoa(icon);
1932
1940
  myMarker = L.divIcon({
1933
1941
  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);"/>',
1936
1944
  });
1937
1945
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1938
1946
  }
@@ -1942,21 +1950,22 @@ function setMarker(data) {
1942
1950
  var svgcam = "data:image/svg+xml;base64," + btoa(icon);
1943
1951
  myMarker = L.divIcon({
1944
1952
  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);"/>',
1947
1955
  });
1948
1956
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1949
1957
  }
1950
1958
  else if (data.icon === "arrow") {
1951
1959
  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>';
1954
1962
  var svgarrow = "data:image/svg+xml;base64," + btoa(icon);
1955
1963
  myMarker = L.divIcon({
1956
1964
  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);"/>',
1959
1967
  });
1968
+ console.log("MM",myMarker)
1960
1969
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1961
1970
  }
1962
1971
  else if (data.icon === "wind") {
@@ -1966,8 +1975,8 @@ function setMarker(data) {
1966
1975
  var svgwind = "data:image/svg+xml;base64," + btoa(icon);
1967
1976
  myMarker = L.divIcon({
1968
1977
  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);"/>',
1971
1980
  });
1972
1981
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1973
1982
  }
@@ -1983,8 +1992,8 @@ function setMarker(data) {
1983
1992
  var svgsat = "data:image/svg+xml;base64," + btoa(icon);
1984
1993
  myMarker = L.divIcon({
1985
1994
  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;"/>',
1988
1997
  });
1989
1998
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
1990
1999
  }
@@ -2028,8 +2037,8 @@ function setMarker(data) {
2028
2037
  var svglocate = "data:image/svg+xml;base64," + btoa(icon);
2029
2038
  myMarker = L.divIcon({
2030
2039
  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;"/>',
2033
2042
  });
2034
2043
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
2035
2044
  labelOffset = [12,-4];
@@ -2064,16 +2073,14 @@ function setMarker(data) {
2064
2073
  labelOffset = [12,-4];
2065
2074
  }
2066
2075
  else if (data.icon.match(/^https?:.*$|^\/|^data:image\//)) { // web url icon https://...
2067
- let sz = data.iconSize ?? 32;
2068
2076
  myMarker = L.icon({
2069
2077
  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]
2073
2081
  });
2074
2082
  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];
2077
2084
  }
2078
2085
  else if (data.icon.substr(0,3) === "fa-") { // fa icon
2079
2086
  let col = data.iconColor ?? "#910000";
@@ -2113,6 +2120,7 @@ function setMarker(data) {
2113
2120
  marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
2114
2121
  labelOffset = [6,-6];
2115
2122
  }
2123
+ delete data.iconSize;
2116
2124
  }
2117
2125
  else if (data.hasOwnProperty("SIDC")) { // NATO mil2525 icons
2118
2126
  // "SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS"