add quad(copter) drone icon

bump to 4.4.0
This commit is contained in:
Dave Conway-Jones 2023-11-27 17:26:37 +00:00
parent d45e4035a9
commit eb012fee7a
No known key found for this signature in database
GPG Key ID: 1DDB0E91A28C2643
4 changed files with 26 additions and 2 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap ### Change Log for Node-RED Worldmap
- v4.4.0 - Add quad(copter) drone icon.
- v4.3.3 - Fix for objects changing layers. - v4.3.3 - Fix for objects changing layers.
- v4.3.2 - Fix geojson popup missing label name. - v4.3.2 - Fix geojson popup missing label name.
- v4.3.1 - Small fix to icon transparency, and routing detail. - v4.3.1 - Small fix to icon transparency, and routing detail.

View File

@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
### Updates ### Updates
- v4.4.0 - Add quad(copter) drone icon.
- v4.3.3 - Fix for objects changing layers. - v4.3.3 - Fix for objects changing layers.
- v4.3.2 - Fix geojson popup missing label name. - v4.3.2 - Fix geojson popup missing label name.
- v4.3.1 - Small fix to icon transparency, and routing detail. - v4.3.1 - Small fix to icon transparency, and routing detail.
@ -106,7 +107,8 @@ There are also several special icons...
- **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 uav like icon that aligns with the heading of travel. - **uav** : a small drone uav like icon that aligns with the heading of travel.
- **quad** : a small quadcopter 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.
- **sensor** : a camera icon that points to the heading angle. - **sensor** : a camera icon that points to the heading angle.
- **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.

View File

@ -1,6 +1,6 @@
{ {
"name": "node-red-contrib-web-worldmap", "name": "node-red-contrib-web-worldmap",
"version": "4.3.3", "version": "4.4.0",
"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": {
"@turf/bezier-spline": "~6.5.0", "@turf/bezier-spline": "~6.5.0",

View File

@ -1845,6 +1845,18 @@ function setMarker(data) {
}); });
marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag}); marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
} }
else if (data.icon === "quad") {
data.iconColor = data.iconColor || "black";
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22">';
icon+= '<path d="m6 3a3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 1.0859375-.2070312c.5392711.8209481.9140625 1.6424172.9140625 2.2070312 0 .563623-.3724493 1.384498-.9101562 2.205078a3 3 0 0 0 -1.0898438-.205078 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 -.2050781-1.080078c.8233483-.542436 1.6446221-.919922 2.2050781-.919922.55949 0 1.37815.375313 2.201172.916016a3 3 0 0 0 -.201172 1.083984 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 -3-3 3 3 0 0 0 -1.085938.207031c-.539273-.820943-.914062-1.642417-.914062-2.207031 0-.563623.372445-1.3844956.910156-2.2050781a3 3 0 0 0 .002.00195 3 3 0 0 0 1.087844.2031281 3 3 0 0 0 3-3 3 3 0 0 0 -3-3 3 3 0 0 0 -3 3 3 3 0 0 0 .205078 1.0800781c-.823351.5424443-1.644622.9199219-2.205078.9199219-.55949 0-1.3781473-.3753084-2.2011719-.9160156a3 3 0 0 0 .2011719-1.0839844 3 3 0 0 0 -3-3zm0 1a2 2 0 0 1 2 2 2 2 0 0 1 -.0527344.453125c-.4577913-.368834-.8926099-.7589139-1.2402344-1.1601562a1 1 0 0 0 -.6933593-.2929688 1 1 0 0 0 -.7207031.2929688 1 1 0 0 0 0 1.4140624 1 1 0 0 0 .058594.054688c.3824613.333788.7551689.7476371 1.1074216 1.1835933a2 2 0 0 1 -.4589844.0546875 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -.457031-.054687c.37051-.4592027.761959-.8951713 1.164062-1.2382813a1 1 0 0 0 0-1.4140624 1 1 0 0 0 -1.414062 0 1 1 0 0 0 -.05274.054687c-.337606.3818392-.750702.7543351-1.185541 1.1054687a2 2 0 0 1 -.054688-.453125 2 2 0 0 1 2-2zm-10 10a2 2 0 0 1 .4570312.05469c-.3705108.459203-.7619484.895165-1.1640624 1.238281a1 1 0 0 0 0 1.414062 1 1 0 0 0 1.4140624 0 1 1 0 0 0 .052734-.05469c.3376223-.381857.7507063-.754333 1.1855473-1.105468a2 2 0 0 1 .0546875.453125 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 .05273-.453125c.457792.368835.892604.758903 1.240235 1.160156a1 1 0 0 0 1.414062 0 1 1 0 0 0 0-1.414062c-.01717-.01465-.0336-.03387-.05078-.04883a1 1 0 0 0 -.0078-.0059c-.382475-.333732-.755177-.747602-1.107431-1.183551a2 2 0 0 1 .458984-.054688z" fill="'+data.iconColor+'"/></svg>';
var svgquad = "data:image/svg+xml;base64," + btoa(icon);
myMarker = L.divIcon({
className:"quadicon",
iconAnchor: [16, 16],
html:'<img src="'+svgquad+'" 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});
}
else if (data.icon === "car") { else if (data.icon === "car") {
data.iconColor = data.iconColor || "black"; data.iconColor = data.iconColor || "black";
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47 47">'; icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47 47">';
@ -2262,6 +2274,15 @@ function setMarker(data) {
marker.bindPopup(words, wopt); marker.bindPopup(words, wopt);
marker._popup.dname = data["name"]; marker._popup.dname = data["name"];
} }
if (data.hasOwnProperty("clickURL")) {
marker.on('click', function () {
console.log("Click URL - ",data.clickURL)
window.open(data.clickURL.replace('@',''), 'newwindow', 'width=640, height=480');
return false;
});
}
marker.lay = lay; // and the layer it is on marker.lay = lay; // and the layer it is on
// marker.on('click', function(e) { // marker.on('click', function(e) {