node-red-contrib-web-worldmap 2.21.1 → 2.21.5

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.21.5 - Fix handling of "old" sjip nav to ship navigat
+ - v2.21.4 - Fix speed leader length. Add transparentPixels option.
+ - v2.21.3 - Add zoom to bounds action. Adjust map layers max zoom levels.
+ - v2.21.2 - Expand ship nav to ship navigation.
  - v2.21.1 - Fix ui check callback to not use .
  - v2.21.0 - Let config panel select maps to show, default map and choice of overlays.
  - v2.20.0 - Add support of .pbf map layers. Issue #123.

package/README.md

@@ -11,6 +11,10 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.21.5 - Fix handling of "old" sjip nav to ship navigation
+- v2.21.4 - Fix speed leader length. Add transparentPixels option..
+- v2.21.3 - Add zoom to bounds action. Adjust map layers max zoom levels.
+- v2.21.2 - Expand ship nav to ship navigation.
 - v2.21.1 - Fix ui check callback to not use .
 - v2.21.0 - Let config panel select maps to show, default map and choice of overlays.
 - v2.20.0 - Add support of .pbf map layers. Issue 123.
@@ -31,12 +35,6 @@ map web page for plotting "things" on.
 - v2.15.3 - Fix panit command to work, try to use alt units, popup alignments.
 - v2.15.0 - Let speed be text and specify units if required (kt,kn,knots,mph,kmh,kph) default m/s.
 - v2.14.0 - Let geojson features be clickable if added as overlay.
-- v2.13.4 - Fix list of map choices to be in sync. Fix popup auto sizing.
-- v2.13.3 - Fix unchanged layer propagation.
-- v2.13.2 - Add mayflower icon.
-- v2.13.0 - Tidy velocity layer. Feedback any url parameters.
-- v2.12.1 - Only show online layer options if we are online.
-- v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays.
 
 - see [CHANGELOG](https://github.com/dceejay/RedMap/blob/master/CHANGELOG.md) for full list of changes.
 

package/node_modules/websocket-driver/lib/websocket/driver/base.js

@@ -37,10 +37,8 @@ Base.isWebSocket = function(request) {
 
 Base.validateOptions = function(options, validKeys) {
   for (var key in options) {
-    if (options.hasOwnProperty(key)) {
     if (validKeys.indexOf(key) < 0)
       throw new Error('Unrecognized option: ' + key);
-    }
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.21.1",
+    "version": "2.21.5",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~6.5.0",

package/worldmap/css/worldmap.css

@@ -24,7 +24,7 @@ a {
 }
 
 .leaflet-interactive:hover {
-    filter: opacity(0.5);
+    filter: opacity(0.7);
 }
 
 .topbar {

package/worldmap/index.html

@@ -72,6 +72,7 @@
     <script src="leaflet/leaflet.latlng-graticule.js"></script>
     <script src="leaflet/VectorTileLayer.umd.min.js"></script>
     <script src="leaflet/Semicircle.js"></script>
+    <script src="leaflet/L.TileLayer.PixelFilter.js"></script>
     <script src="leaflet/dialog-polyfill.js"></script>
 
     <script src="images/emoji.js"></script>

package/worldmap/leaflet/L.TileLayer.PixelFilter.js

@@ -0,0 +1,152 @@
+/*
+ * L.TileLayer.PixelFilter
+ * https://github.com/greeninfo/L.TileLayer.PixelFilter
+ * http://greeninfo-network.github.io/L.TileLayer.PixelFilter/
+ */
+L.tileLayerPixelFilter = function (url, options) {
+    return new L.TileLayer.PixelFilter(url, options);
+}
+
+L.TileLayer.PixelFilter = L.TileLayer.extend({
+    // the constructor saves settings and throws a fit if settings are bad, as typical
+    // then adds the all-important 'tileload' event handler which basically "detects" an unmodified tile and performs the pxiel-swap
+    initialize: function (url, options) {
+        options = L.extend({}, L.TileLayer.prototype.options, {
+            matchRGBA: null,
+            missRGBA: null,
+            pixelCodes: [],
+            crossOrigin: 'Anonymous',  // per issue 15, this is how you do it in Leaflet 1.x
+        }, options);
+        L.TileLayer.prototype.initialize.call(this, url, options);
+        L.setOptions(this, options);
+
+        // go ahead and save our settings
+        this.setMatchRGBA(this.options.matchRGBA);
+        this.setMissRGBA(this.options.missRGBA);
+        this.setPixelCodes(this.options.pixelCodes);
+
+        // and add our tile-load event hook which triggers us to do the pixel-swap
+        this.on('tileload', function (event) {
+            this.applyFiltersToTile(event.tile);
+        });
+    },
+
+    // settings setters
+    setMatchRGBA: function (rgba) {
+        // save the setting
+        if (rgba !== null && (typeof rgba !== 'object' || typeof rgba.length !== 'number' || rgba.length !== 4) ) throw "L.TileLayer.PixelSwap expected matchRGBA to be RGBA [r,g,b,a] array or else null";
+        this.options.matchRGBA = rgba;
+
+        // force a redraw, which means new tiles, which mean new tileload events; the circle of life
+        this.redraw(true);
+    },
+    setMissRGBA: function (rgba) {
+        // save the setting
+        if (rgba !== null && (typeof rgba !== 'object' || typeof rgba.length !== 'number' || rgba.length !== 4) ) throw "L.TileLayer.PixelSwap expected missRGBA to be RGBA [r,g,b,a] array or else null";
+        this.options.missRGBA = rgba;
+
+        // force a redraw, which means new tiles, which mean new tileload events; the circle of life
+        this.redraw(true);
+    },
+    setPixelCodes: function (pixelcodes) {
+        // save the setting
+        if (typeof pixelcodes !== 'object' || typeof pixelcodes.length !== 'number') throw "L.TileLayer.PixelSwap expected pixelCodes to be a list of triplets: [ [r,g,b], [r,g,b], ... ]";
+        this.options.pixelCodes = pixelcodes;
+
+        // force a redraw, which means new tiles, which mean new tileload events; the circle of life
+        this.redraw(true);
+    },
+
+    // extend the _createTile function to add the .crossOrigin attribute, since loading tiles from a separate service is a pretty common need
+    // and the Canvas is paranoid about cross-domain image data. see issue #5
+    // this is really only for Leaflet 0.7; as of 1.0 L.TileLayer has a crossOrigin setting which we define as a layer option
+    _createTile: function () {
+        var tile = L.TileLayer.prototype._createTile.call(this);
+        tile.crossOrigin = "Anonymous";
+        return tile;
+    },
+
+    // the heavy lifting to do the pixel-swapping
+    // called upon 'tileload' and passed the IMG element
+    // tip: when the tile is saved back to the IMG element that counts as a tileload event too! thus an infinite loop, as wel as comparing the pixelCodes against already-replaced pixels!
+    //      so, we tag the already-swapped tiles so we know when to quit
+    // if the layer is redrawn, it's a new IMG element and that means it would not yet be tagged
+    applyFiltersToTile: function (imgelement) {
+        // already processed, see note above
+        if (imgelement.getAttribute('data-PixelFilterDone')) return;
+
+        // copy the image data onto a canvas for manipulation
+        var width  = imgelement.width;
+        var height = imgelement.height;
+        var canvas    = document.createElement("canvas");
+        canvas.width  = width;
+        canvas.height = height;
+        var context = canvas.getContext("2d");
+        context.drawImage(imgelement, 0, 0);
+
+        // create our target imagedata
+        var output = context.createImageData(width, height);
+
+        // extract out our RGBA trios into separate numbers, so we don't have to use rgba[i] a zillion times
+        var matchRGBA = this.options.matchRGBA, missRGBA = this.options.missRGBA;
+        if (matchRGBA !== null) {
+            var match_r = matchRGBA[0], match_g = matchRGBA[1], match_b = matchRGBA[2], match_a = matchRGBA[3];
+        }
+        if (missRGBA !== null) {
+            var miss_r = missRGBA[0], miss_g = missRGBA[1], miss_b = missRGBA[2], miss_a = missRGBA[3];
+        }
+
+        // go over our pixel-code list and generate the list of integers that we'll use for RGB matching
+        // 1000000*R + 1000*G + B = 123123123 which is an integer, and finding an integer inside an array is a lot faster than finding an array inside an array
+        var pixelcodes = [];
+        for (var i=0, l=this.options.pixelCodes.length; i<l; i++) {
+            var value = 1000000 * this.options.pixelCodes[i][0] + 1000 * this.options.pixelCodes[i][1] + this.options.pixelCodes[i][2];
+            pixelcodes.push(value);
+        }
+
+        // iterate over the pixels (each one is 4 bytes, RGBA)
+        // and see if they are on our list (recall the "addition" thing so we're comparing integers in an array for performance)
+        // per issue #5 catch a failure here, which is likely a cross-domain problem
+        try {
+            var pixels = context.getImageData(0, 0, width, height).data;
+        } catch(e) {
+            throw "L.TileLayer.PixelFilter getImageData() failed. Likely a cross-domain issue?";
+        }
+        for(var i = 0, n = pixels.length; i < n; i += 4) {
+            var r = pixels[i  ];
+            var g = pixels[i+1];
+            var b = pixels[i+2];
+            var a = pixels[i+3];
+
+            // bail condition: if the alpha is 0 then it's already transparent, likely nodata, and we should skip it
+            if (a == 0) {
+                output.data[i  ] = 255;
+                output.data[i+1] = 255;
+                output.data[i+2] = 255;
+                output.data[i+3] = 0;
+                continue;
+            }
+
+            // default to matching, so that if we are not in fact filtering by code it's an automatic hit
+            // number matching trick: 1000000*R + 1000*G + 1*B = 123,123,123 a simple number that either is or isn't on the list
+            var match = true;
+            if (pixelcodes.length) {
+                var sum = 1000000 * r + 1000 * g + b;
+                if (-1 === pixelcodes.indexOf(sum)) match = false;
+            }
+
+            // did it match? either way we push a R, a G, and a B onto the image blob
+            // if the target RGBA is a null, then we push exactly the same RGBA as we found in the source pixel
+            output.data[i  ] = match ? (matchRGBA===null ? r : match_r) : (missRGBA===null ? r : miss_r);
+            output.data[i+1] = match ? (matchRGBA===null ? g : match_g) : (missRGBA===null ? g : miss_g);
+            output.data[i+2] = match ? (matchRGBA===null ? b : match_b) : (missRGBA===null ? b : miss_b);
+            output.data[i+3] = match ? (matchRGBA===null ? a : match_a) : (missRGBA===null ? a : miss_a);
+        }
+
+        // write the image back to the canvas, and assign its base64 back into the on-screen tile to visualize the change
+        // tag the tile as having already been updated, so we don't process a 'load' event again and re-process a tile that surely won't match any target RGB codes, in an infinite loop!
+        context.putImageData(output, 0, 0);
+        imgelement.setAttribute('data-PixelFilterDone', true);
+        imgelement.src = canvas.toDataURL();
+    }
+});

package/worldmap/leaflet/leaflet-velocity.min.js

@@ -1 +1 @@
-"use strict";L.DomUtil.setTransform||(L.DomUtil.setTransform=function(t,n,e){var i=n||new L.Point(0,0);t.style[L.DomUtil.TRANSFORM]=(L.Browser.ie3d?"translate("+i.x+"px,"+i.y+"px)":"translate3d("+i.x+"px,"+i.y+"px,0)")+(e?" scale("+e+")":"")}),L.CanvasLayer=(L.Layer?L.Layer:L.Class).extend({initialize:function(t){this._map=null,this._canvas=null,this._frame=null,this._delegate=null,L.setOptions(this,t)},delegate:function(t){return this._delegate=t,this},needRedraw:function(){return this._frame||(this._frame=L.Util.requestAnimFrame(this.drawLayer,this)),this},_onLayerDidResize:function(t){this._canvas.width=t.newSize.x,this._canvas.height=t.newSize.y},_onLayerDidMove:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t),this.drawLayer()},getEvents:function(){var t={resize:this._onLayerDidResize,moveend:this._onLayerDidMove};return this._map.options.zoomAnimation&&L.Browser.any3d&&(t.zoomanim=this._animateZoom),t},onAdd:function(t){this._map=t,this._canvas=L.DomUtil.create("canvas","leaflet-layer"),this.tiles={};var n=this._map.getSize();this._canvas.width=n.x,this._canvas.height=n.y;var e=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(this._canvas,"leaflet-zoom-"+(e?"animated":"hide")),this.options.pane.appendChild(this._canvas),t.on(this.getEvents(),this);var i=this._delegate||this;i.onLayerDidMount&&i.onLayerDidMount(),this.needRedraw();var o=this;setTimeout(function(){o._onLayerDidMove()},0)},onRemove:function(t){var n=this._delegate||this;n.onLayerWillUnmount&&n.onLayerWillUnmount(),this.options.pane.removeChild(this._canvas),t.off(this.getEvents(),this),this._canvas=null},addTo:function(t){return t.addLayer(this),this},drawLayer:function(){var t=this._map.getSize(),n=this._map.getBounds(),e=this._map.getZoom(),i=this._map.options.crs.project(this._map.getCenter()),o=this._map.options.crs.project(this._map.containerPointToLatLng(this._map.getSize())),a=this._delegate||this;a.onDrawLayer&&a.onDrawLayer({layer:this,canvas:this._canvas,bounds:n,size:t,zoom:e,center:i,corner:o}),this._frame=null},_setTransform:function(t,n,e){var i=n||new L.Point(0,0);t.style[L.DomUtil.TRANSFORM]=(L.Browser.ie3d?"translate("+i.x+"px,"+i.y+"px)":"translate3d("+i.x+"px,"+i.y+"px,0)")+(e?" scale("+e+")":"")},_animateZoom:function(t){var n=this._map.getZoomScale(t.zoom),e=L.Layer?this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(),t.zoom,t.center):this._map._getCenterOffset(t.center)._multiplyBy(-n).subtract(this._map._getMapPanePos());L.DomUtil.setTransform(this._canvas,e,n)}}),L.canvasLayer=function(t){return new L.CanvasLayer(t)},L.Control.Velocity=L.Control.extend({options:{position:"bottomleft",emptyString:"Unavailable",angleConvention:"bearingCCW",showCardinal:!1,speedUnit:"m/s",directionString:"Direction",speedString:"Speed",onAdd:null,onRemove:null},onAdd:function(t){return this._container=L.DomUtil.create("div","leaflet-control-velocity"),L.DomEvent.disableClickPropagation(this._container),t.on("mousemove",this._onMouseMove,this),this._container.innerHTML=this.options.emptyString,this.options.leafletVelocity.options.onAdd&&this.options.leafletVelocity.options.onAdd(),this._container},onRemove:function(t){t.off("mousemove",this._onMouseMove,this),this.options.leafletVelocity.options.onRemove&&this.options.leafletVelocity.options.onRemove()},vectorToSpeed:function(t,n,e){var i=Math.sqrt(Math.pow(t,2)+Math.pow(n,2));return"k/h"===e?this.meterSec2kilometerHour(i):"kt"===e?this.meterSec2Knots(i):i},vectorToDegrees:function(t,n,e){e.endsWith("CCW")&&(n=0<n?n=-n:Math.abs(n));var i=Math.sqrt(Math.pow(t,2)+Math.pow(n,2)),o=180*Math.atan2(t/i,n/i)/Math.PI+180;return"bearingCW"!==e&&"meteoCCW"!==e||360<=(o+=180)&&(o-=360),o},degreesToCardinalDirection:function(t){var n="";return 0<=t&&t<11.25||348.75<=t?n="N":11.25<=t&&t<33.75?n="NNW":33.75<=t&&t<56.25?n="NW":56.25<=t&&t<78.75?n="WNW":78.25<=t&&t<101.25?n="W":101.25<=t&&t<123.75?n="WSW":123.75<=t&&t<146.25?n="SW":146.25<=t&&t<168.75?n="SSW":168.75<=t&&t<191.25?n="S":191.25<=t&&t<213.75?n="SSE":213.75<=t&&t<236.25?n="SE":236.25<=t&&t<258.75?n="ESE":258.75<=t&&t<281.25?n="E":281.25<=t&&t<303.75?n="ENE":303.75<=t&&t<326.25?n="NE":326.25<=t&&t<348.75&&(n="NNE"),n},meterSec2Knots:function(t){return t/.514},meterSec2kilometerHour:function(t){return 3.6*t},_onMouseMove:function(t){var n=this.options.leafletVelocity._map.containerPointToLatLng(L.point(t.containerPoint.x,t.containerPoint.y)),e=this.options.leafletVelocity._windy.interpolatePoint(n.lng,n.lat),i="";if(e&&!isNaN(e[0])&&!isNaN(e[1])&&e[2]){var o=this.vectorToDegrees(e[0],e[1],this.options.angleConvention),a=this.options.showCardinal?" (".concat(this.degreesToCardinalDirection(o),")"):"";i="<strong> ".concat(this.options.velocityType," ").concat(this.options.directionString,": </strong> ").concat(o.toFixed(2),"°").concat(a,", <strong> ").concat(this.options.speedString,": </strong> ").concat(this.vectorToSpeed(e[0],e[1],this.options.speedUnit).toFixed(2)," ").concat(this.options.speedUnit)}else i=this.options.emptyString;this._container.innerHTML=i}}),L.Map.mergeOptions({positionControl:!1}),L.Map.addInitHook(function(){this.options.positionControl&&(this.positionControl=new L.Control.MousePosition,this.addControl(this.positionControl))}),L.control.velocity=function(t){return new L.Control.Velocity(t)},L.VelocityLayer=(L.Layer?L.Layer:L.Class).extend({options:{displayValues:!0,displayOptions:{velocityType:"Velocity",position:"bottomleft",emptyString:"No velocity data"},maxVelocity:10,colorScale:null,data:null},_map:null,_canvasLayer:null,_windy:null,_context:null,_timer:0,_mouseControl:null,initialize:function(t){L.setOptions(this,t)},onAdd:function(t){this._paneName=this.options.paneName||"overlayPane";var n=t._panes.overlayPane;t.getPane&&(n=(n=t.getPane(this._paneName))||t.createPane(this._paneName)),this._canvasLayer=L.canvasLayer({pane:n}).delegate(this),this._canvasLayer.addTo(t),this._map=t},onRemove:function(t){this._destroyWind()},setData:function(t){this.options.data=t,this._windy&&(this._windy.setData(t),this._clearAndRestart()),this.fire("load")},setOpacity:function(t){console.log("this._canvasLayer",this._canvasLayer),this._canvasLayer.setOpacity(t)},setOptions:function(t){this.options=Object.assign(this.options,t),t.hasOwnProperty("displayOptions")&&(this.options.displayOptions=Object.assign(this.options.displayOptions,t.displayOptions),this._initMouseHandler(!0)),t.hasOwnProperty("data")&&(this.options.data=t.data),this._windy&&(this._windy.setOptions(t),t.hasOwnProperty("data")&&this._windy.setData(t.data),this._clearAndRestart()),this.fire("load")},onDrawLayer:function(t,n){var e=this;this._windy?this.options.data&&(this._timer&&clearTimeout(e._timer),this._timer=setTimeout(function(){e._startWindy()},750)):this._initWindy(this)},_startWindy:function(){var t=this._map.getBounds(),n=this._map.getSize();this._windy.start([[0,0],[n.x,n.y]],n.x,n.y,[[t._southWest.lng,t._southWest.lat],[t._northEast.lng,t._northEast.lat]])},_initWindy:function(t){var n=Object.assign({canvas:t._canvasLayer._canvas,map:this._map},t.options);this._windy=new Windy(n),this._context=this._canvasLayer._canvas.getContext("2d"),this._canvasLayer._canvas.classList.add("velocity-overlay"),this.onDrawLayer(),this._map.on("dragstart",t._windy.stop),this._map.on("dragend",t._clearAndRestart),this._map.on("zoomstart",t._windy.stop),this._map.on("zoomend",t._clearAndRestart),this._map.on("resize",t._clearWind),this._initMouseHandler(!1)},_initMouseHandler:function(t){if(t&&(this._map.removeControl(this._mouseControl),this._mouseControl=!1),!this._mouseControl&&this.options.displayValues){var n=this.options.displayOptions||{};(n.leafletVelocity=this)._mouseControl=L.control.velocity(n).addTo(this._map)}},_clearAndRestart:function(){this._context&&this._context.clearRect(0,0,3e3,3e3),this._windy&&this._startWindy()},_clearWind:function(){this._windy&&this._windy.stop(),this._context&&this._context.clearRect(0,0,3e3,3e3)},_destroyWind:function(){this._timer&&clearTimeout(this._timer),this._windy&&this._windy.stop(),this._context&&this._context.clearRect(0,0,3e3,3e3),this._mouseControl&&this._map.removeControl(this._mouseControl),this._mouseControl=null,this._windy=null,this._map.removeLayer(this._canvasLayer)}}),L.velocityLayer=function(t){return new L.VelocityLayer(t)};var Windy=function(b){function o(t,n,e,i,o,a){var r=1-t,s=1-n,l=r*s,h=t*s,c=r*n,d=t*n,p=e[0]*l+i[0]*h+o[0]*c+a[0]*d,u=e[1]*l+i[1]*h+o[1]*c+a[1]*d;return[p,u,Math.sqrt(p*p+u*u)]}function d(t){var n=null,e=null;return t.forEach(function(t){switch(t.header.parameterCategory+","+t.header.parameterNumber){case"1,2":case"2,2":n=t;break;case"1,3":case"2,3":e=t;break;default:t}}),function(t,n){var e=t.data,i=n.data;return{header:t.header,data:function(t){return[e[t],i[t]]},interpolate:o}}(n,e)}function a(i,o,t){function a(t,n){var e=i[Math.round(t)];return e&&e[Math.round(n)]||h}a.release=function(){i=[]},a.randomize=function(t){for(var n,e,i=0;null===a(n=Math.round(Math.floor(Math.random()*o.width)+o.x),e=Math.round(Math.floor(Math.random()*o.height)+o.y))[2]&&i++<30;);return t.x=n,t.y=e,t},t(o,a)}function r(t){return t/180*Math.PI}function s(i,s){var n,e,l=(n=x,e=C,R.indexFor=function(t){return Math.max(0,Math.min(R.length-1,Math.round((t-n)/(e-n)*(R.length-1))))},R),h=l.map(function(){return[]}),t=Math.round(i.width*i.height*D);/android|blackberry|iemobile|ipad|iphone|ipod|opera mini|webos/i.test(navigator.userAgent)&&(t*=T);for(var o="rgba(0, 0, 0, ".concat(O,")"),a=[],r=0;r<t;r++)a.push(s.randomize({age:Math.floor(Math.random()*P)+0}));var c=b.canvas.getContext("2d");c.lineWidth=S,c.fillStyle=o,c.globalAlpha=.6;var d=Date.now();!function t(){M=requestAnimationFrame(t);var n=Date.now(),e=n-d;W<e&&(d=n-e%W,h.forEach(function(t){t.length=0}),a.forEach(function(t){t.age>P&&(s.randomize(t).age=0);var n=t.x,e=t.y,i=s(n,e),o=i[2];if(null===o)t.age=P;else{var a=n+i[0],r=e+i[1];null!==s(a,r)[2]?(t.xt=a,t.yt=r,h[l.indexFor(o)].push(t)):(t.x=a,t.y=r)}t.age+=1}),c.globalCompositeOperation="destination-in",c.fillRect(i.x,i.y,i.width,i.height),c.globalCompositeOperation="lighter",c.globalAlpha=0===O?0:.9*O,h.forEach(function(t,n){0<t.length&&(c.beginPath(),c.strokeStyle=l[n],t.forEach(function(t){c.moveTo(t.x,t.y),c.lineTo(t.xt,t.yt),t.x=t.xt,t.y=t.yt}),c.stroke())}))}()}var u,m,p,y,_,f,v,g,w,M,x=b.minVelocity||0,C=b.maxVelocity||10,l=(b.velocityScale||.005)*(Math.pow(window.devicePixelRatio,1/3)||1),P=b.particleAge||90,S=b.lineWidth||1,D=b.particleMultiplier||1/300,T=Math.pow(window.devicePixelRatio,1/3)||1.6,n=b.frameRate||15,W=1e3/n,O=.97,R=b.colorScale||["rgb(36,104, 180)","rgb(60,157, 194)","rgb(128,205,193 )","rgb(151,218,168 )","rgb(198,231,181)","rgb(238,247,217)","rgb(255,238,159)","rgb(252,217,125)","rgb(255,182,100)","rgb(252,150,75)","rgb(250,112,52)","rgb(245,64,32)","rgb(237,45,28)","rgb(220,24,32)","rgb(180,0,35)"],h=[NaN,NaN,null],c=b.data,N=function(t,n){if(!m)return null;var e,i=z(t-y,360)/f,o=(_-n)/v,a=Math.floor(i),r=a+1,s=Math.floor(o),l=s+1;if(e=m[s]){var h=e[a],c=e[r];if(A(h)&&A(c)&&(e=m[l])){var d=e[a],p=e[r];if(A(d)&&A(p))return u.interpolate(i-a,o-s,h,c,d,p)}}return null},A=function(t){return null!=t},z=function(t,n){return t-n*Math.floor(t/n)},E=function(t,n,e,i,o){var a=2*Math.PI,r=n<0?5:-5,s=e<0?5:-5,l=V(e,n+r),h=V(e+s,n),c=Math.cos(e/360*a);return[(l[0]-i)/r/c,(l[1]-o)/r/c,(h[0]-i)/s,(h[1]-o)/s]},V=function(t,n,e){var i=b.map.latLngToContainerPoint(L.latLng(t,n));return[i.x,i.y]},U=function(){F.field&&F.field.release(),M&&cancelAnimationFrame(M)},F={params:b,start:function(n,e,i,t){var o={south:r(t[0][1]),north:r(t[1][1]),east:r(t[1][0]),west:r(t[0][0]),width:e,height:i};U(),function(t,n){var e=!0;t.length<2&&(e=!1),e||console.log("Windy Error: data must have at least two components (u,v)");var i=(u=d(t)).header;if(i.hasOwnProperty("gridDefinitionTemplate")&&0!=i.gridDefinitionTemplate&&(e=!1),e||console.log("Windy Error: Only data with Latitude_Longitude coordinates is supported"),e=!0,y=i.lo1,_=i.la1,f=i.dx,v=i.dy,g=i.nx,w=i.ny,i.hasOwnProperty("scanMode")){var o=i.scanMode.toString(2),a=(o=("0"+o).slice(-8)).split("").map(Number).map(Boolean);a[0]&&(f=-f),a[1]&&(v=-v),a[2]&&(e=!1),a[3]&&(e=!1),a[4]&&(e=!1),a[5]&&(e=!1),a[6]&&(e=!1),a[7]&&(e=!1),e||console.log("Windy Error: Data with scanMode: "+i.scanMode+" is not supported.")}(p=new Date(i.refTime)).setHours(p.getHours()+i.forecastTime),m=[];for(var r=0,s=360<=Math.floor(g*f),l=0;l<w;l++){for(var h=[],c=0;c<g;c++,r++)h[c]=u.data(r);s&&h.push(h[0]),m[l]=h}n({date:p,interpolate:N})}(c,function(t){!function(w,M,t,e){var x={},n=(t.south-t.north)*(t.west-t.east),C=l*Math.pow(n,.4),P=[],i=M.x;function o(t){for(var n,e,i,o,a,r,s,l,h,c,d,p,u,m=[],y=M.y;y<=M.yMax;y+=2){var _=(d=t,p=y,void 0,[(u=b.map.containerPointToLatLng(L.point(d,p))).lng,u.lat]),f=_[0],v=_[1];if(isFinite(f)){var g=w.interpolate(f,v);g&&(n=x,e=f,i=v,o=t,a=y,r=C,void 0,l=(s=g)[0]*r,h=s[1]*r,c=E(n,e,i,o,a),s[0]=c[0]*l+c[2]*h,s[1]=c[1]*l+c[3]*h,g=s,m[y+1]=m[y]=g)}}P[t+1]=P[t]=m}!function t(){for(var n=Date.now();i<M.width;)if(o(i),i+=2,1e3<Date.now()-n)return void setTimeout(t,25);a(P,M,e)}()}(t,function(t,n,e){var i=t[0],o=t[1],a=Math.round(i[0]),r=Math.max(Math.floor(i[1],0),0);Math.min(Math.ceil(o[0],n),n-1);return{x:a,y:r,xMax:n,yMax:Math.min(Math.ceil(o[1],e),e-1),width:n,height:e}}(n,e,i),o,function(t,n){F.field=n,s(t,n)})})},stop:U,createField:a,interpolatePoint:N,setData:function(t){c=t},setOptions:function(t){t.hasOwnProperty("minVelocity")&&(x=t.minVelocity),t.hasOwnProperty("maxVelocity")&&(C=t.maxVelocity),t.hasOwnProperty("velocityScale")&&(l=(t.velocityScale||.005)*(Math.pow(window.devicePixelRatio,1/3)||1)),t.hasOwnProperty("particleAge")&&(P=t.particleAge),t.hasOwnProperty("lineWidth")&&(S=t.lineWidth),t.hasOwnProperty("particleMultiplier")&&(D=t.particleMultiplier),t.hasOwnProperty("opacity")&&(O=+t.opacity),t.hasOwnProperty("frameRate")&&(n=t.frameRate),W=1e3/n}};return F};window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)});
+"use strict";L.DomUtil.setTransform||(L.DomUtil.setTransform=function(t,e,n){var i=e||new L.Point(0,0);t.style[L.DomUtil.TRANSFORM]=(L.Browser.ie3d?"translate("+i.x+"px,"+i.y+"px)":"translate3d("+i.x+"px,"+i.y+"px,0)")+(n?" scale("+n+")":"")}),L.CanvasLayer=(L.Layer?L.Layer:L.Class).extend({initialize:function(t){this._map=null,this._canvas=null,this._frame=null,this._delegate=null,L.setOptions(this,t)},delegate:function(t){return this._delegate=t,this},needRedraw:function(){return this._frame||(this._frame=L.Util.requestAnimFrame(this.drawLayer,this)),this},_onLayerDidResize:function(t){this._canvas.width=t.newSize.x,this._canvas.height=t.newSize.y},_onLayerDidMove:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t),this.drawLayer()},getEvents:function(){var t={resize:this._onLayerDidResize,moveend:this._onLayerDidMove};return this._map.options.zoomAnimation&&L.Browser.any3d&&(t.zoomanim=this._animateZoom),t},onAdd:function(t){console.log("canvas onAdd",this),this._map=t,this._canvas=L.DomUtil.create("canvas","leaflet-layer"),this.tiles={};var e=this._map.getSize();this._canvas.width=e.x,this._canvas.height=e.y;var n=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(this._canvas,"leaflet-zoom-"+(n?"animated":"hide")),this.options.pane.appendChild(this._canvas),t.on(this.getEvents(),this);var i=this._delegate||this;i.onLayerDidMount&&i.onLayerDidMount(),this.needRedraw();var o=this;setTimeout(function(){o._onLayerDidMove()},0)},onRemove:function(t){var e=this._delegate||this;e.onLayerWillUnmount&&e.onLayerWillUnmount(),this.options.pane.removeChild(this._canvas),t.off(this.getEvents(),this),this._canvas=null},addTo:function(t){return t.addLayer(this),this},drawLayer:function(){var t=this._map.getSize(),e=this._map.getBounds(),n=this._map.getZoom(),i=this._map.options.crs.project(this._map.getCenter()),o=this._map.options.crs.project(this._map.containerPointToLatLng(this._map.getSize())),a=this._delegate||this;a.onDrawLayer&&a.onDrawLayer({layer:this,canvas:this._canvas,bounds:e,size:t,zoom:n,center:i,corner:o}),this._frame=null},_setTransform:function(t,e,n){var i=e||new L.Point(0,0);t.style[L.DomUtil.TRANSFORM]=(L.Browser.ie3d?"translate("+i.x+"px,"+i.y+"px)":"translate3d("+i.x+"px,"+i.y+"px,0)")+(n?" scale("+n+")":"")},_animateZoom:function(t){var e=this._map.getZoomScale(t.zoom),n=L.Layer?this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(),t.zoom,t.center):this._map._getCenterOffset(t.center)._multiplyBy(-e).subtract(this._map._getMapPanePos());L.DomUtil.setTransform(this._canvas,n,e)}}),L.canvasLayer=function(t){return new L.CanvasLayer(t)},L.Control.Velocity=L.Control.extend({options:{position:"bottomleft",emptyString:"Unavailable",angleConvention:"bearingCCW",showCardinal:!1,speedUnit:"m/s",directionString:"Direction",speedString:"Speed",onAdd:null,onRemove:null},onAdd:function(t){return this._container=L.DomUtil.create("div","leaflet-control-velocity"),L.DomEvent.disableClickPropagation(this._container),t.on("mousemove",this._onMouseMove,this),this._container.innerHTML=this.options.emptyString,this.options.leafletVelocity.options.onAdd&&this.options.leafletVelocity.options.onAdd(),this._container},onRemove:function(t){t.off("mousemove",this._onMouseMove,this),this.options.leafletVelocity.options.onRemove&&this.options.leafletVelocity.options.onRemove()},vectorToSpeed:function(t,e,n){var i=Math.sqrt(Math.pow(t,2)+Math.pow(e,2));return"k/h"===n?this.meterSec2kilometerHour(i):"kt"===n?this.meterSec2Knots(i):"mph"===n?this.meterSec2milesHour(i):i},vectorToDegrees:function(t,e,n){n.endsWith("CCW")&&(e=0<e?e=-e:Math.abs(e));var i=Math.sqrt(Math.pow(t,2)+Math.pow(e,2)),o=180*Math.atan2(t/i,e/i)/Math.PI+180;return"bearingCW"!==n&&"meteoCCW"!==n||360<=(o+=180)&&(o-=360),o},degreesToCardinalDirection:function(t){var e="";return 0<=t&&t<11.25||348.75<=t?e="N":11.25<=t&&t<33.75?e="NNW":33.75<=t&&t<56.25?e="NW":56.25<=t&&t<78.75?e="WNW":78.25<=t&&t<101.25?e="W":101.25<=t&&t<123.75?e="WSW":123.75<=t&&t<146.25?e="SW":146.25<=t&&t<168.75?e="SSW":168.75<=t&&t<191.25?e="S":191.25<=t&&t<213.75?e="SSE":213.75<=t&&t<236.25?e="SE":236.25<=t&&t<258.75?e="ESE":258.75<=t&&t<281.25?e="E":281.25<=t&&t<303.75?e="ENE":303.75<=t&&t<326.25?e="NE":326.25<=t&&t<348.75&&(e="NNE"),e},meterSec2Knots:function(t){return t/.514},meterSec2kilometerHour:function(t){return 3.6*t},meterSec2milesHour:function(t){return 2.23694*t},_onMouseMove:function(t){var e=this.options.leafletVelocity._map.containerPointToLatLng(L.point(t.containerPoint.x,t.containerPoint.y)),n=this.options.leafletVelocity._windy.interpolatePoint(e.lng,e.lat),i="";if(n&&!isNaN(n[0])&&!isNaN(n[1])&&n[2]){var o=this.vectorToDegrees(n[0],n[1],this.options.angleConvention),a=this.options.showCardinal?" (".concat(this.degreesToCardinalDirection(o),") "):"";i="<strong> ".concat(this.options.velocityType," ").concat(this.options.directionString,": </strong> ").concat(o.toFixed(2),"°").concat(a,", <strong> ").concat(this.options.velocityType," ").concat(this.options.speedString,": </strong> ").concat(this.vectorToSpeed(n[0],n[1],this.options.speedUnit).toFixed(2)," ").concat(this.options.speedUnit)}else i=this.options.emptyString;this._container.innerHTML=i}}),L.Map.mergeOptions({positionControl:!1}),L.Map.addInitHook(function(){this.options.positionControl&&(this.positionControl=new L.Control.MousePosition,this.addControl(this.positionControl))}),L.control.velocity=function(t){return new L.Control.Velocity(t)},L.VelocityLayer=(L.Layer?L.Layer:L.Class).extend({options:{displayValues:!0,displayOptions:{velocityType:"Velocity",position:"bottomleft",emptyString:"No velocity data"},maxVelocity:10,colorScale:null,data:null},_map:null,_canvasLayer:null,_windy:null,_context:null,_timer:0,_mouseControl:null,initialize:function(t){L.setOptions(this,t)},onAdd:function(t){this._paneName=this.options.paneName||"overlayPane";var e=t._panes.overlayPane;t.getPane&&(e=(e=t.getPane(this._paneName))||t.createPane(this._paneName)),this._canvasLayer=L.canvasLayer({pane:e}).delegate(this),this._canvasLayer.addTo(t),this._map=t},onRemove:function(t){this._destroyWind()},setData:function(t){this.options.data=t,this._windy&&(this._windy.setData(t),this._clearAndRestart()),this.fire("load")},setOpacity:function(t){console.log("this._canvasLayer",this._canvasLayer),this._canvasLayer.setOpacity(t)},setOptions:function(t){this.options=Object.assign(this.options,t),t.hasOwnProperty("displayOptions")&&(this.options.displayOptions=Object.assign(this.options.displayOptions,t.displayOptions),this._initMouseHandler(!0)),t.hasOwnProperty("data")&&(this.options.data=t.data),this._windy&&(this._windy.setOptions(t),t.hasOwnProperty("data")&&this._windy.setData(t.data),this._clearAndRestart()),this.fire("load")},onDrawLayer:function(t,e){var n=this;this._windy?this.options.data&&(this._timer&&clearTimeout(n._timer),this._timer=setTimeout(function(){n._startWindy()},750)):this._initWindy(this)},_startWindy:function(){var t=this._map.getBounds(),e=this._map.getSize();this._windy.start([[0,0],[e.x,e.y]],e.x,e.y,[[t._southWest.lng,t._southWest.lat],[t._northEast.lng,t._northEast.lat]])},_initWindy:function(t){var e=Object.assign({canvas:t._canvasLayer._canvas,map:this._map},t.options);this._windy=new Windy(e),this._context=this._canvasLayer._canvas.getContext("2d"),this._canvasLayer._canvas.classList.add("velocity-overlay"),this.onDrawLayer(),this._map.on("dragstart",t._windy.stop),this._map.on("dragend",t._clearAndRestart),this._map.on("zoomstart",t._windy.stop),this._map.on("zoomend",t._clearAndRestart),this._map.on("resize",t._clearWind),this._initMouseHandler(!1)},_initMouseHandler:function(t){if(t&&(this._map.removeControl(this._mouseControl),this._mouseControl=!1),!this._mouseControl&&this.options.displayValues){var e=this.options.displayOptions||{};(e.leafletVelocity=this)._mouseControl=L.control.velocity(e).addTo(this._map)}},_clearAndRestart:function(){this._context&&this._context.clearRect(0,0,3e3,3e3),this._windy&&this._startWindy()},_clearWind:function(){this._windy&&this._windy.stop(),this._context&&this._context.clearRect(0,0,3e3,3e3)},_destroyWind:function(){this._timer&&clearTimeout(this._timer),this._windy&&this._windy.stop(),this._context&&this._context.clearRect(0,0,3e3,3e3),this._mouseControl&&this._map.removeControl(this._mouseControl),this._mouseControl=null,this._windy=null,this._map.removeLayer(this._canvasLayer)}}),L.velocityLayer=function(t){return new L.VelocityLayer(t)};var Windy=function(S){function o(t,e,n,i,o,a){var r=1-t,s=1-e,l=r*s,h=t*s,c=r*e,d=t*e,p=n[0]*l+i[0]*h+o[0]*c+a[0]*d,u=n[1]*l+i[1]*h+o[1]*c+a[1]*d;return[p,u,Math.sqrt(p*p+u*u)]}function d(t){var e=null,n=null;return t.forEach(function(t){switch(t.header.parameterCategory+","+t.header.parameterNumber){case"1,2":case"2,2":e=t;break;case"1,3":case"2,3":n=t;break;default:t}}),function(t,e){var n=t.data,i=e.data;return{header:t.header,data:function(t){return[n[t],i[t]]},interpolate:o}}(e,n)}function a(i,o,t){function a(t,e){var n=i[Math.round(t)];return n&&n[Math.round(e)]||h}a.release=function(){i=[]},a.randomize=function(t){for(var e,n,i=0;null===a(e=Math.round(Math.floor(Math.random()*o.width)+o.x),n=Math.round(Math.floor(Math.random()*o.height)+o.y))[2]&&i++<30;);return t.x=e,t.y=n,t},t(o,a)}function r(t){return t/180*Math.PI}function s(i,s){var e,n,l=(e=x,n=C,R.indexFor=function(t){return Math.max(0,Math.min(R.length-1,Math.round((t-e)/(n-e)*(R.length-1))))},R),h=l.map(function(){return[]}),t=Math.round(i.width*i.height*D);/android|blackberry|iemobile|ipad|iphone|ipod|opera mini|webos/i.test(navigator.userAgent)&&(t*=T);for(var o="rgba(0, 0, 0, ".concat(O,")"),a=[],r=0;r<t;r++)a.push(s.randomize({age:Math.floor(Math.random()*P)+0}));var c=S.canvas.getContext("2d");c.lineWidth=b,c.fillStyle=o,c.globalAlpha=.6;var d=Date.now();!function t(){M=requestAnimationFrame(t);var e=Date.now(),n=e-d;W<n&&(d=e-n%W,h.forEach(function(t){t.length=0}),a.forEach(function(t){t.age>P&&(s.randomize(t).age=0);var e=t.x,n=t.y,i=s(e,n),o=i[2];if(null===o)t.age=P;else{var a=e+i[0],r=n+i[1];null!==s(a,r)[2]?(t.xt=a,t.yt=r,h[l.indexFor(o)].push(t)):(t.x=a,t.y=r)}t.age+=1}),c.globalCompositeOperation="destination-in",c.fillRect(i.x,i.y,i.width,i.height),c.globalCompositeOperation="lighter",c.globalAlpha=0===O?0:.9*O,h.forEach(function(t,e){0<t.length&&(c.beginPath(),c.strokeStyle=l[e],t.forEach(function(t){c.moveTo(t.x,t.y),c.lineTo(t.xt,t.yt),t.x=t.xt,t.y=t.yt}),c.stroke())}))}()}var u,m,p,y,_,f,v,g,w,M,x=S.minVelocity||0,C=S.maxVelocity||10,l=(S.velocityScale||.005)*(Math.pow(window.devicePixelRatio,1/3)||1),P=S.particleAge||90,b=S.lineWidth||1,D=S.particleMultiplier||1/300,T=Math.pow(window.devicePixelRatio,1/3)||1.6,e=S.frameRate||15,W=1e3/e,O=.97,R=S.colorScale||["rgb(36,104, 180)","rgb(60,157, 194)","rgb(128,205,193 )","rgb(151,218,168 )","rgb(198,231,181)","rgb(238,247,217)","rgb(255,238,159)","rgb(252,217,125)","rgb(255,182,100)","rgb(252,150,75)","rgb(250,112,52)","rgb(245,64,32)","rgb(237,45,28)","rgb(220,24,32)","rgb(180,0,35)"],h=[NaN,NaN,null],c=S.data,N=function(t,e){if(!m)return null;var n,i=z(t-y,360)/f,o=(_-e)/v,a=Math.floor(i),r=a+1,s=Math.floor(o),l=s+1;if(n=m[s]){var h=n[a],c=n[r];if(A(h)&&A(c)&&(n=m[l])){var d=n[a],p=n[r];if(A(d)&&A(p))return u.interpolate(i-a,o-s,h,c,d,p)}}return null},A=function(t){return null!=t},z=function(t,e){return t-e*Math.floor(t/e)},E=function(t,e,n,i,o){var a=2*Math.PI,r=e<0?5:-5,s=n<0?5:-5,l=V(n,e+r),h=V(n+s,e),c=Math.cos(n/360*a);return[(l[0]-i)/r/c,(l[1]-o)/r/c,(h[0]-i)/s,(h[1]-o)/s]},V=function(t,e,n){var i=S.map.latLngToContainerPoint(L.latLng(t,e));return[i.x,i.y]},U=function(){F.field&&F.field.release(),M&&cancelAnimationFrame(M)},F={params:S,start:function(e,n,i,t){var o={south:r(t[0][1]),north:r(t[1][1]),east:r(t[1][0]),west:r(t[0][0]),width:n,height:i};U(),function(t,e){var n=!0;t.length<2&&(n=!1),n||console.log("Windy Error: data must have at least two components (u,v)");var i=(u=d(t)).header;if(i.hasOwnProperty("gridDefinitionTemplate")&&0!=i.gridDefinitionTemplate&&(n=!1),n||console.log("Windy Error: Only data with Latitude_Longitude coordinates is supported"),n=!0,y=i.lo1,_=i.la1,f=i.dx,v=i.dy,g=i.nx,w=i.ny,i.hasOwnProperty("scanMode")){var o=i.scanMode.toString(2),a=(o=("0"+o).slice(-8)).split("").map(Number).map(Boolean);a[0]&&(f=-f),a[1]&&(v=-v),a[2]&&(n=!1),a[3]&&(n=!1),a[4]&&(n=!1),a[5]&&(n=!1),a[6]&&(n=!1),a[7]&&(n=!1),n||console.log("Windy Error: Data with scanMode: "+i.scanMode+" is not supported.")}(p=new Date(i.refTime)).setHours(p.getHours()+i.forecastTime),m=[];for(var r=0,s=360<=Math.floor(g*f),l=0;l<w;l++){for(var h=[],c=0;c<g;c++,r++)h[c]=u.data(r);s&&h.push(h[0]),m[l]=h}e({date:p,interpolate:N})}(c,function(t){!function(w,M,t,n){var x={},e=(t.south-t.north)*(t.west-t.east),C=l*Math.pow(e,.4),P=[],i=M.x;function o(t){for(var e,n,i,o,a,r,s,l,h,c,d,p,u,m=[],y=M.y;y<=M.yMax;y+=2){var _=(d=t,p=y,void 0,[(u=S.map.containerPointToLatLng(L.point(d,p))).lng,u.lat]),f=_[0],v=_[1];if(isFinite(f)){var g=w.interpolate(f,v);g&&(e=x,n=f,i=v,o=t,a=y,r=C,void 0,l=(s=g)[0]*r,h=s[1]*r,c=E(e,n,i,o,a),s[0]=c[0]*l+c[2]*h,s[1]=c[1]*l+c[3]*h,g=s,m[y+1]=m[y]=g)}}P[t+1]=P[t]=m}!function t(){for(var e=Date.now();i<M.width;)if(o(i),i+=2,1e3<Date.now()-e)return void setTimeout(t,25);a(P,M,n)}()}(t,function(t,e,n){var i=t[0],o=t[1],a=Math.round(i[0]),r=Math.max(Math.floor(i[1],0),0);Math.min(Math.ceil(o[0],e),e-1);return{x:a,y:r,xMax:e,yMax:Math.min(Math.ceil(o[1],n),n-1),width:e,height:n}}(e,n,i),o,function(t,e){F.field=e,s(t,e)})})},stop:U,createField:a,interpolatePoint:N,setData:function(t){c=t},setOptions:function(t){t.hasOwnProperty("minVelocity")&&(x=t.minVelocity),t.hasOwnProperty("maxVelocity")&&(C=t.maxVelocity),t.hasOwnProperty("velocityScale")&&(l=(t.velocityScale||.005)*(Math.pow(window.devicePixelRatio,1/3)||1)),t.hasOwnProperty("particleAge")&&(P=t.particleAge),t.hasOwnProperty("lineWidth")&&(b=t.lineWidth),t.hasOwnProperty("particleMultiplier")&&(D=t.particleMultiplier),t.hasOwnProperty("opacity")&&(O=+t.opacity),t.hasOwnProperty("frameRate")&&(e=t.frameRate),W=1e3/e}};return F};window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)});

package/worldmap/worldmap.js

@@ -110,7 +110,12 @@ var handleData = function(data) {
             }
         }
         if (data.command) { doCommand(data.command); delete data.command; }
-        if (data.hasOwnProperty("type") && data.type.indexOf("Feature") === 0) { doGeojson("geojson",data); }
+        if (data.hasOwnProperty("type") && data.type.indexOf("Feature") === 0) {
+            if (data.hasOwnProperty('properties') && data.properties.hasOwnProperty('title')) {
+                doGeojson(data.properties.title,data)
+            }
+            else { doGeojson("geojson",data); }
+        }
         else if (data.hasOwnProperty("name")) { setMarker(data); }
         else {
             if (JSON.stringify(data) !== '{}') {
@@ -593,7 +598,7 @@ map.on('baselayerchange', function(e) {
 });
 
 function showMapCurrentZoom() {
-    //console.log("zoom:",map.getZoom());
+    //console.log("ZOOM:",map.getZoom());
     for (var l in layers) {
         if (layers[l].hasOwnProperty("_zoom")) {
             if (map.getZoom() >= clusterAt) {
@@ -635,12 +640,12 @@ map.on('zoomend', function() {
     showMapCurrentZoom();
     window.localStorage.setItem("lastzoom", map.getZoom());
     var b = map.getBounds();
-    ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng }));
+    ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng, zoom:map.getZoom() }));
 });
 map.on('moveend', function() {
     window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
     var b = map.getBounds();
-    ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng }));
+    ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng, zoom:map.getZoom() }));
 });
 
 //map.on('contextmenu', function(e) {
@@ -735,7 +740,7 @@ var addBaseMaps = function(maplist,first) {
     //console.log("MAPS",first,maplist)
     if (navigator.onLine) {
         var layerlookup = { OSMG:"OSM grey", OSMC:"OSM", OSMH:"OSM Humanitarian", EsriC:"Esri", EsriS:"Esri Satellite",
-        EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic",
+        EsriR:"Esri Relief", EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic",
         UKOS:"UK OS OpenData", UKOS45:"UK OS 1919-1947", UKOS00:"UK OS 1900", OpTop:"Open Topo Map",
         HB:"Hike Bike OSM", ST:"Stamen Topography", SW: "Stamen Watercolor", AN:"AutoNavi (Chinese)" }
 
@@ -794,21 +799,24 @@ var addBaseMaps = function(maplist,first) {
         if (maplist.indexOf("EsriR")!==-1) {
             basemaps[layerlookup["EsriR"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
                 attribution:'Tiles © Esri',
-                maxNativeZoom:13
+                maxNativeZoom:13,
+                maxZoom:16
             });
         }
 
         if (maplist.indexOf("EsriO")!==-1) {
             basemaps[layerlookup["EsriO"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
                 attribution:'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
-                maxNativeZoom:13
+                maxNativeZoom:10,
+                maxZoom:13
             });
         }
 
         if (maplist.indexOf("EsriDG")!==-1) {
             basemaps[layerlookup["EsriDG"]] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
                 attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
-                maxNativeZoom:13
+                maxNativeZoom:16,
+                maxZoom:18
             });
         }
 
@@ -1144,7 +1152,7 @@ var addOverlays = function(overlist) {
 
     // Add the OpenSea markers layer
     if (overlist.indexOf("SN")!==-1) {
-        overlays["ship nav"] = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+        overlays["ship navigation"] = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: 'Map data: &copy; <a href="https://www.openseamap.org">OpenSeaMap</a> contributors'
         });
@@ -1980,7 +1988,7 @@ function setMarker(data) {
     else if (data.heading !== undefined) { track = data.heading; }
     else if (data.bearing !== undefined) { track = data.bearing; }
     if (track != undefined) {  // if there is a heading
-        if (data.speed != null && !data.length) {  // and a speed - lets convert to a leader length
+        if (data.speed != null && data.length === undefined) {  // and a speed - lets convert to a leader length
             data.length = parseFloat(data.speed || "0") * 60;
             var re1 = new RegExp('kn|knot|kt','i');
             var re2 = new RegExp('kph|kmh','i');
@@ -1989,7 +1997,7 @@ function setMarker(data) {
             else if ( re2.test(""+data.speed) ) { data.length = data.length * 0.44704; }
             else if ( re3.test(""+data.speed) ) { data.length = data.length * 0.277778; }
         }
-        if (data.length != null) {
+        if (data.length !== undefined) {
             if (polygons[data.name] != null && !polygons[data.name].hasOwnProperty("_layers")) {
                 map.removeLayer(polygons[data.name]);
             }
@@ -2449,6 +2457,11 @@ function doCommand(cmd) {
         else if (cmd.map.url.slice(-4).toLowerCase() === ".pbf") {
             overlays[cmd.map.overlay] = VectorTileLayer(cmd.map.url, cmd.map.opt);
         }
+        else if (cmd.map.hasOwnProperty("transparentPixels")) {
+            cmd.map.opt.pixelCodes =  cmd.map.transparentPixels;
+            cmd.map.opt.matchRGBA = [ 0,0,0,0 ];
+            overlays[cmd.map.overlay] = L.tileLayerPixelFilter(cmd.map.url, cmd.map.opt);
+        }
         else {
             overlays[cmd.map.overlay] = L.tileLayer(cmd.map.url, cmd.map.opt);
         }
@@ -2500,6 +2513,8 @@ function doCommand(cmd) {
     // Turn on an existing overlay(s)
     if (cmd.hasOwnProperty("showlayer")) {
         if (typeof cmd.showlayer === "string") { cmd.showlayer = [ cmd.showlayer ]; }
+        var sn = cmd.showlayer.indexOf("ship nav");
+        if (sn !== -1) { cmd.showlayer[sn] = "ship navigation"; }
         for (var i=0; i < cmd.showlayer.length; i++) {
             if (overlays.hasOwnProperty(cmd.showlayer[i])) {
                 map.addLayer(overlays[cmd.showlayer[i]]);
@@ -2509,6 +2524,8 @@ function doCommand(cmd) {
     // Turn off an existing overlay(s)
     if (cmd.hasOwnProperty("hidelayer")) {
         if (typeof cmd.hidelayer === "string") { cmd.hidelayer = [ cmd.hidelayer ]; }
+        var sn = cmd.hidelayer.indexOf("ship nav");
+        if (sn !== -1) { cmd.hidelayer[sn] = "ship navigation"; }
         for (var i=0; i < cmd.hidelayer.length; i++) {
             if (overlays.hasOwnProperty(cmd.hidelayer[i])) {
                 map.removeLayer(overlays[cmd.hidelayer[i]]);
@@ -2563,6 +2580,7 @@ function doCommand(cmd) {
 
 // handle any incoming GEOJSON directly - may style badly
 function doGeojson(n,g,l,o) {
+    //console.log("GEOJSON",n,g,l,o)
     var lay = l || g.name || "unknown";
     // if (!basemaps[lay]) {
     var opt = { style: function(feature) {
@@ -2594,12 +2612,29 @@ function doGeojson(n,g,l,o) {
         return st;
     }}
     opt.pointToLayer = function (feature, latlng) {
-        var myMarker = L.VectorMarkers.icon({
-            icon: feature.properties["marker-symbol"] || "circle",
-            markerColor: (feature.properties["marker-color"] || "#910000"),
-            prefix: 'fa',
-            iconColor: 'white'
-        });
+        var myMarker;
+        if (feature.properties.hasOwnProperty("SIDC")) {
+            myMarker = new ms.Symbol( feature.properties.SIDC.toUpperCase(), {
+                uniqueDesignation:unescape(encodeURIComponent(feature.properties.title)) ,
+                country:feature.properties.country,
+                direction:feature.properties.bearing,
+                additionalInformation:feature.properties.modifier,
+                size:24
+            });
+            myMarker = L.icon({
+                iconUrl: myMarker.toDataURL(),
+                iconAnchor: [myMarker.getAnchor().x, myMarker.getAnchor().y],
+                className: "natoicon",
+            });
+        }
+        else {
+            myMarker = L.VectorMarkers.icon({
+                icon: feature.properties["marker-symbol"] || "circle",
+                markerColor: (feature.properties["marker-color"] || "#910000"),
+                prefix: 'fa',
+                iconColor: 'white'
+            });
+        }
         if (!feature.properties.hasOwnProperty("title")) {
             feature.properties.title = feature.properties["marker-symbol"];
         }

package/worldmap/worldmaphead.html

@@ -42,6 +42,7 @@
 <script src="leaflet/Leaflet.Coordinates.js"></script>
 <script src="leaflet/leaflet.latlng-graticule.js"></script>
 <script src="leaflet/Semicircle.js"></script>
+<script src="leaflet/L.TileLayer.PixelFilter.js"></script>
 <script src="leaflet/dialog-polyfill.js"></script>
 
 <script src="images/emoji.js"></script>

package/worldmap.html

@@ -293,7 +293,7 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
     <p>Icons of type <i>plane</i>, <i>ship</i>, <i>car</i>, <i>uav</i> or <i>arrow</i> will use built in SVG icons that align to the
     <code>bearing</code> value.</p>
     <p>Font Awesome (<a href="https://fontawesome.com/v4.7.0/icons/" target="_new">fa-icons 4.7</a>) can also be used, as can
-    NATO symbology codes (SIDC), or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>,
+    NATO symbology codes (<a href="https://spatialillusions.com/unitgenerator/">SIDC</a>), or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>,
     or the url of a small icon image (32x32)</p>
     <p>See the <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">README</a> for further
     details and examples of icons and commands for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and