From e405c73510f40c2b04f977d13ac72c1797840a35 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 8 Apr 2020 22:06:48 +0100 Subject: [PATCH] rotate http icons, and let tracks handle arrays to close #124, to close #125 --- CHANGELOG.md | 1 + README.md | 3 +- package.json | 2 +- worldmap.js | 9 +++- worldmap/index.html | 1 + worldmap/leaflet/leaflet.rotatedMarker.js | 57 +++++++++++++++++++++++ worldmap/worldmap.js | 3 +- 7 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 worldmap/leaflet/leaflet.rotatedMarker.js diff --git a/CHANGELOG.md b/CHANGELOG.md index c834e25..e971c20 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### Change Log for Node-RED Worldmap + - v2.3.5 - Let tracks node handle array of points. Let http icons be rotated to hdg or bearing. - v2.3.4 - Add bus icon - v2.3.3 - Fix satellite view max zoom - v2.3.2 - Add better geojson support - name plus geojson properties diff --git a/README.md b/README.md index a93ccd0..98402cf 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ map web page for plotting "things" on. ### Updates +- v2.3.5 - Let tracks node handle array of points. Let http icons be rotated to hdg or bearing. - v2.3.4 - Add bus icon - v2.3.3 - Fix satellite view max zoom - v2.3.2 - Add better geojson support - name plus geojson properties @@ -55,7 +56,7 @@ Optional properties include - **bearing** : when combined with speed, draws a vector. - **accuracy** : when combined with bearing, draws a polygon of possible direction. - **color** : CSS color name or #rrggbb value for bearing line or accuracy polygon - - **icon** : font awesome icon name, weather-lite icon, :emoji name:, or http:// + - **icon** : font awesome icon name, weather-lite icon, :emoji name:, or https:// - **iconColor** : Standard CSS colour name or #rrggbb hex value. - **SIDC** : NATO symbology code (can be used instead of icon). See below. - **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below. diff --git a/package.json b/package.json index ff0df01..13c3457 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "node-red-contrib-web-worldmap", - "version": "2.3.4", + "version": "2.3.5", "description": "A Node-RED node to provide a web page of a world map for plotting things on.", "dependencies": { "cgi": "0.3.1", diff --git a/worldmap.js b/worldmap.js index 3d62c4c..196dd57 100644 --- a/worldmap.js +++ b/worldmap.js @@ -260,7 +260,7 @@ module.exports = function(RED) { this.layer = n.layer || "combined"; // separate, single var node = this; - node.on("input", function(msg) { + var doTrack = function(msg) { if (msg.hasOwnProperty("payload") && msg.payload.hasOwnProperty("name")) { var newmsg = RED.util.cloneMessage(msg); if (msg.payload.deleted) { @@ -343,6 +343,13 @@ module.exports = function(RED) { } } } + } + + node.on("input", function(m) { + if (Array.isArray(m)) { + m.forEach(item => doTrack(item)); + } + else { doTrack(m); } }); node.on("close", function() { diff --git a/worldmap/index.html b/worldmap/index.html index 6e9f789..760d5b8 100644 --- a/worldmap/index.html +++ b/worldmap/index.html @@ -62,6 +62,7 @@ + diff --git a/worldmap/leaflet/leaflet.rotatedMarker.js b/worldmap/leaflet/leaflet.rotatedMarker.js new file mode 100644 index 0000000..832a30c --- /dev/null +++ b/worldmap/leaflet/leaflet.rotatedMarker.js @@ -0,0 +1,57 @@ +(function() { + // save these original methods before they are overwritten + var proto_initIcon = L.Marker.prototype._initIcon; + var proto_setPos = L.Marker.prototype._setPos; + + var oldIE = (L.DomUtil.TRANSFORM === 'msTransform'); + + L.Marker.addInitHook(function () { + var iconOptions = this.options.icon && this.options.icon.options; + var iconAnchor = iconOptions && this.options.icon.options.iconAnchor; + if (iconAnchor) { + iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px'); + } + this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ; + this.options.rotationAngle = this.options.rotationAngle || 0; + + // Ensure marker keeps rotated during dragging + this.on('drag', function(e) { e.target._applyRotation(); }); + }); + + L.Marker.include({ + _initIcon: function() { + proto_initIcon.call(this); + }, + + _setPos: function (pos) { + proto_setPos.call(this, pos); + this._applyRotation(); + }, + + _applyRotation: function () { + if(this.options.rotationAngle) { + this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin; + + if(oldIE) { + // for IE 9, use the 2D rotation + this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)'; + } else { + // for modern browsers, prefer the 3D accelerated version + this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)'; + } + } + }, + + setRotationAngle: function(angle) { + this.options.rotationAngle = angle; + this.update(); + return this; + }, + + setRotationOrigin: function(origin) { + this.options.rotationOrigin = origin; + this.update(); + return this; + } + }); +})(); \ No newline at end of file diff --git a/worldmap/worldmap.js b/worldmap/worldmap.js index 4ed8ca1..c5dabd9 100644 --- a/worldmap/worldmap.js +++ b/worldmap/worldmap.js @@ -1360,7 +1360,8 @@ function setMarker(data) { iconAnchor: [16, 16], popupAnchor: [0, -16] }); - marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag}); + var dir = parseFloat(data.hdg || data.bearing || "0"); + marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag, rotationAngle:dir, rotationOrigin:"center"}); labelOffset = [12,-4]; } else if (data.icon.substr(0,3) === "fa-") {