rotate http icons, and let tracks handle arrays

to close #124, to close #125

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

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** : <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 http://
+ - **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://
  - **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.

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",

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() {

worldmap/index.html

@@ -62,6 +62,7 @@
     <script src="leaflet/TileLayer.GrayscaleWMS.js"></script>
     <script src="leaflet/L.Terminator.js"></script>
     <script src="leaflet/leaflet-velocity.min.js"></script>
+    <script src="leaflet/leaflet.rotatedMarker.js"></script>
     <script src="leaflet/leaflet-side-by-side.js"></script>
     <script src="leaflet/OSMBuildings-Leaflet.js"></script>
     <script src="leaflet/leaflet-omnivore.min.js"></script>

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;
+        }
+    });
+})();

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-") {