node-red-contrib-web-worldmap 2.24.1 → 2.26.0

package/worldmap/worldmap.js

@@ -565,8 +565,8 @@ map.on('overlayadd', function(e) {
     }
     if (e.name == "drawing") {
         overlays["drawing"].bringToFront();
-        map.addControl(drawControl);
         map.addControl(colorControl);
+        map.addControl(drawControl);
     }
     ws.send(JSON.stringify({action:"addlayer", name:e.name}));
 });
@@ -579,8 +579,8 @@ map.on('overlayremove', function(e) {
         layers["_daynight"].clearLayers();
     }
     if (e.name == "drawing") {
-        map.removeControl(colorControl);
         map.removeControl(drawControl);
+        map.removeControl(colorControl);
     }
     ws.send(JSON.stringify({action:"dellayer", name:e.name}));
 });
@@ -922,13 +922,15 @@ var addOverlays = function(overlist) {
     // Add the drawing layer...
     if (overlist.indexOf("DR")!==-1) {
         //var colorPickButton = L.easyButton({states:[{icon:'fa-tint fa-lg', onClick:function() { console.log("PICK"); }, title:'Pick Colour'}]});
-        var redButton = L.easyButton('fa-square wm-red', function(btn) { changeDrawColour("#E7827F"); })
-        var blueButton = L.easyButton('fa-square wm-blue', function(btn) { changeDrawColour("#94CCE2"); })
-        var greenButton = L.easyButton('fa-square wm-green', function(btn) { changeDrawColour("#ACD6A4"); })
-        var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { changeDrawColour("#F5F08B"); })
-        var blackButton = L.easyButton('fa-square wm-black', function(btn) { changeDrawColour("#444444"); })
+        var redButton = L.easyButton('fa-square wm-red', function(btn) { changeDrawColour("#FF4040"); })
+        var blueButton = L.easyButton('fa-square wm-blue', function(btn) { changeDrawColour("#4040F0"); })
+        var greenButton = L.easyButton('fa-square wm-green', function(btn) { changeDrawColour("#40D040"); })
+        var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { changeDrawColour("#FFFF40"); })
+        var cyanButton = L.easyButton('fa-square wm-cyan', function(btn) { changeDrawColour("#40F0F0"); })
+        var magentaButton = L.easyButton('fa-square wm-magenta', function(btn) { changeDrawColour("#F040F0"); })
+        var blackButton = L.easyButton('fa-square wm-black', function(btn) { changeDrawColour("#000000"); })
         var whiteButton = L.easyButton('fa-square wm-white', function(btn) { changeDrawColour("#EEEEEE"); })
-        colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,blackButton,whiteButton]);
+        colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,cyanButton,magentaButton,blackButton,whiteButton]);
 
         layers["_drawing"] = new L.FeatureGroup();
         overlays["drawing"] = layers["_drawing"];
@@ -953,7 +955,7 @@ var addOverlays = function(overlist) {
         });
         var changeDrawColour = function(col) {
             drawingColour = col;
-            console.log("COL",col)
+            console.log("COLOR",col)
             drawControl.setDrawingOptions({
                 polyline: { shapeOptions: { color:drawingColour } },
                 circle: { shapeOptions: { color:drawingColour } },
@@ -1197,16 +1199,7 @@ layercontrol = L.control.layers(basemaps, overlays);
 if (!inIframe) { layercontrol.addTo(map); }
 else { showLayerMenu = false;}
 
-var coords = L.control.coordinates({
-    position:"bottomleft", //optional default "bottomright"
-    decimals:4, //optional default 4
-    decimalSeperator:".", //optional default "."
-    labelTemplateLat:" Lat: {y}", //optional default "Lat: {y}"
-    labelTemplateLng:" Lon: {x}", //optional default "Lng: {x}"
-    enableUserInput:false, //optional default true
-    useDMS:true, //optional default false
-    useLatLngOrder: true, //ordering of labels, default false-> lng-lat
-});
+var coords = L.control.mouseCoordinate({position:"bottomleft"});
 
 // Add an optional legend
 var legend = L.control({ position: "bottomleft" });
@@ -2085,7 +2078,7 @@ function setMarker(data) {
 function doCommand(cmd) {
     // console.log("COMMAND",cmd);
     if (cmd.init && cmd.hasOwnProperty("maplist")) {
-        basemaps = [];
+        //basemaps = {};
         addBaseMaps(cmd.maplist,cmd.layer);
     }
     if (cmd.init && cmd.hasOwnProperty("overlist")) {
@@ -2191,16 +2184,13 @@ function doCommand(cmd) {
     if (cmd.hasOwnProperty("coords")) {
         try { coords.removeFrom(map); }
         catch(e) {}
-        if (cmd.coords == "dms") {
-            coords.options.useDMS = true;
-            showMouseCoords = "dms";
-            coords.addTo(map);
-        }
-        if (cmd.coords == "deg") {
-            coords.options.useDMS = false;
-            showMouseCoords = "deg";
-            coords.addTo(map);
-        }
+        var opts = {gps:false, gpsLong:false, utm:false, utmref:false, position:"bottomleft"}
+        if (cmd.coords == "deg") { opts.gps = true; }
+        if (cmd.coords == "dms") { opts.gpsLong = true; }
+        if (cmd.coords == "utm") { opts.utm = true; }
+        if (cmd.coords == "mgrs") { opts.utmref = true; }
+        coords.options = opts;
+        coords.addTo(map);
     }
     if (cmd.hasOwnProperty("legend")) {
         if (typeof cmd.legend === "string" && cmd.legend.length > 0) {
@@ -2211,7 +2201,7 @@ function doCommand(cmd) {
                     return div;
                 };
                 legend.addTo(map);
-            };
+            }
             legend.getContainer().style.visibility = 'visible'; // if already exist use visibility to show/hide
             legend.getContainer().innerHTML = cmd.legend;       //  set content of legend
         }
@@ -2620,6 +2610,11 @@ function doCommand(cmd) {
             map.touchZoom.enable();
         }
     }
+    if (cmd.hasOwnProperty("bounds")) {            // Move/Zoom map to new bounds
+        if (cmd.bounds.length === 2 && cmd.bounds[0].length === 2 && cmd.bounds[1].length === 2) {
+            map.fitBounds(cmd.bounds);
+        }
+    }
 }
 
 // handle any incoming GEOJSON directly - may style badly
@@ -2650,7 +2645,7 @@ function doGeojson(n,g,l,o) {
             st.fillColor = feature.style["fill-color"] || feature.style["fill"] || st.fillColor;
             st.fillOpacity = feature.style["fill-opacity"] || st.fillOpacity;
         }
-        if (feature.hasOwnProperty("geometry") && feature.geometry.hasOwnProperty("type") && feature.geometry.type === "LineString") {
+        if (feature.hasOwnProperty("geometry") && feature.geometry.hasOwnProperty("type") && (feature.geometry.type === "LineString" || feature.geometry.type === "MultiLineString")  ) {
             st.fill = false;
         }
         return st;

package/worldmap.html

@@ -83,6 +83,8 @@
         <option value="none">Not shown</option>
         <option value="deg">Degrees</option>
         <option value="dms">D.M.S</option>
+        <option value="utm">UTM</option>
+        <option value="mgrs">MGRS</option>
     </select>
     <i class="fa fa-th" style="margin-left:22px;"></i> Graticule
     <select id="node-input-showgrid" style="width:101px;">
@@ -239,6 +241,8 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
         <option value="none">Not shown</option>
         <option value="deg">Degrees</option>
         <option value="dms">D.M.S</option>
+        <option value="utm">UTM</option>
+        <option value="mgrs">MGRS</option>
     </select>
     <i class="fa fa-th" style="margin-left:22px;"></i> Graticule
     <select id="node-input-showgrid" style="width:101px;">

package/worldmap.js

@@ -54,6 +54,9 @@ module.exports = function(RED) {
         //node.log("Serving "+__dirname+" as "+node.path);
         node.log("started at "+node.path);
         var clients = {};
+        RED.httpNode.get("/-worldmap3d-key",  RED.auth.needsPermission('worldmap3d.read'), function(req, res) {
+            res.send({key:process.env.MAPBOXGL_TOKEN||""});
+        });
         RED.httpNode.use(compression());
         RED.httpNode.use(node.path, express.static(__dirname + '/worldmap'));
         // RED.httpNode.use(node.path, express.static(__dirname + '/worldmap', {maxage:3600000}));