Add minimap capability

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.5.0 - Add minimap capability.
  - v2.4.2 - Fix editing injected shapes.
  - v2.4.1 - Add convex-hull node for grouping objects.
  - v2.3.16 - Add heading to default addMarker, allow custom http icon size.

README.md

@@ -445,6 +445,23 @@ may let you markers be more visible. (see overlay example below).
         "opt":{ "maxZoom":19, "attribution":"© OpenStreetMap" }
     };
 
+#### To add a minimap
+
+A minimap overview can be added by sending a suitable command. The "minimap" property
+must specify the name of an existing base layer to use. The "opt" property can contain 
+valid options from the [minimap library options](https://github.com/Norkart/Leaflet-MiniMap#available-options).
+
+    msg.payload.command.map = {
+            minimap: "OSM",
+            opt: {
+    			centerFixed: [51.05, -1.35],
+    			toggleDisplay: true
+    		}
+        }
+    };
+
+Set `msg.payload.command.map.minimap = false;` to remove the minimap.
+
 #### To remove base or overlay layers
 
 To remove several layers, either base layers or overlays, you can pass an array of names as follows.

examples/Add Minimap.json

@@ -0,0 +1 @@
+[{"id":"fd654fbf.7e7db","type":"worldmap","z":"846d7832.3348c8","name":"","lat":"","lon":"","zoom":"14","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","path":"/worldmap","x":500,"y":540,"wires":[]},{"id":"3a9f5292.247a0e","type":"inject","z":"846d7832.3348c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":130,"y":540,"wires":[["e5161e3c.df6a1"]]},{"id":"e5161e3c.df6a1","type":"function","z":"846d7832.3348c8","name":"Add minimap","func":"msg.payload = {\n    command: {\n        map: {\n            minimap: \"OSM\",\n            opt: {\n    \t\t\tcenterFixed: [51.05, -1.35],\n    \t\t\ttoggleDisplay: true\n    \t\t}\n        }\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":540,"wires":[["fd654fbf.7e7db"]]},{"id":"ebe0f256.5a1b7","type":"inject","z":"846d7832.3348c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":130,"y":580,"wires":[["a7e940a5.a24b6"]]},{"id":"a7e940a5.a24b6","type":"function","z":"846d7832.3348c8","name":"Remove minimap","func":"msg.payload = {\n    command: {\n        map: {\n            minimap: false\n        }\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":330,"y":580,"wires":[["fd654fbf.7e7db"]]}]

package.json

@@ -1,12 +1,12 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.4.2",
+    "version": "2.5.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",
         "compression": "^1.7.4",
         "express": "^4.16.4",
-        "sockjs": "~0.3.20"
+        "sockjs": "~0.3.21"
     },
     "repository": {
         "type": "git",

worldmap.html

@@ -54,36 +54,36 @@
 </div>
 <div class="form-row">
     <label for="node-input-usermenu"><i class="fa fa-user"></i> User menu</label>
-    <select id="node-input-usermenu" style="width:64px;">
+    <select id="node-input-usermenu" style="width:70px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
     <i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
-    <select id="node-input-layers" style="width:64px;">
+    <select id="node-input-layers" style="width:70px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
 </div>
 <div class="form-row">
     <label for="node-input-panlock"><i class="fa fa-lock"></i> Lock map</label>
-    <select id="node-input-panlock" style="width:64px;">
+    <select id="node-input-panlock" style="width:70px;">
         <option value="false">False</option>
         <option value="true">True</option>
     </select>
     <i class="fa fa-lock" style="margin-left:30px;"></i> Lock zoom
-    <select id="node-input-zoomlock" style="width:64px;">
+    <select id="node-input-zoomlock" style="width:70px;">
         <option value="false">False</option>
         <option value="true">True</option>
     </select>
 </div>
 <div class="form-row">
     <label for="node-input-panit"><i class="fa fa-arrows-alt"></i> Auto-pan</label>
-    <select id="node-input-panit" style="width:72px;">
+    <select id="node-input-panit" style="width:80px;">
         <option value="true">Enable</option>
         <option value="false">Disable</option>
     </select>
     <i class="fa fa-hand-o-right" style="margin-left:22px;"></i> Right click
-    <select id="node-input-hiderightclick" style="width:72px;">
+    <select id="node-input-hiderightclick" style="width:80px;">
         <option value="false">Enable</option>
         <option value="true">Disable</option>
     </select>
@@ -201,36 +201,36 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
 </div>
 <div class="form-row">
     <label for="node-input-usermenu"><i class="fa fa-user"></i> User menu</label>
-    <select id="node-input-usermenu" style="width:64px;">
+    <select id="node-input-usermenu" style="width:70px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
     <i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
-    <select id="node-input-layers" style="width:64px;">
+    <select id="node-input-layers" style="width:70px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
 </div>
 <div class="form-row">
     <label for="node-input-panlock"><i class="fa fa-lock"></i> Lock map</label>
-    <select id="node-input-panlock" style="width:64px;">
+    <select id="node-input-panlock" style="width:70px;">
         <option value="false">False</option>
         <option value="true">True</option>
     </select>
     <i class="fa fa-lock" style="margin-left:30px;"></i> Lock zoom
-    <select id="node-input-zoomlock" style="width:64px;">
+    <select id="node-input-zoomlock" style="width:70px;">
         <option value="false">False</option>
         <option value="true">True</option>
     </select>
 </div>
 <div class="form-row">
     <label for="node-input-panit"><i class="fa fa-arrows-alt"></i> Auto-pan</label>
-    <select id="node-input-panit" style="width:72px;">
+    <select id="node-input-panit" style="width:80px;">
         <option value="true">Enable</option>
         <option value="false">Disable</option>
     </select>
     <i class="fa fa-hand-o-right" style="margin-left:22px;"></i> Right click
-    <select id="node-input-hiderightclick" style="width:72px;">
+    <select id="node-input-hiderightclick" style="width:80px;">
         <option value="false">Enable</option>
         <option value="true">Disable</option>
     </select>

worldmap.js

@@ -426,7 +426,7 @@ module.exports = function(RED) {
                 if (leafletHull.length > 1) {
                     // if (leafletHull.length === 2) { newmsg.payload.line = leafletHull; }
                     // else { 
-                        newmsg.payload.area = leafletHull; 
+                    newmsg.payload.area = leafletHull; 
                     // }
                     newmsg.payload.name = newmsg.payload[node.prop];
                     newmsg.payload.clickable = true;

worldmap/index.html

@@ -36,6 +36,7 @@
     <link rel="stylesheet" type="text/css" href="leaflet/easy-button.css">
     <link rel="stylesheet" type="text/css" href="leaflet/leaflet.fullscreen.css">
     <link rel="stylesheet" type="text/css" href="leaflet/Leaflet.Dialog.css">
+    <link rel="stylesheet" type="text/css" href="leaflet/Control.MiniMap.min.css">
     <link rel="stylesheet" type="text/css" href="leaflet/leaflet-velocity.min.css">
     <link rel="stylesheet" type="text/css" href="leaflet/Leaflet.Coordinates.css">
     <link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
@@ -60,6 +61,7 @@
     <script src="leaflet/leaflet-heat.js"></script>
     <script src="leaflet/TileLayer.Grayscale.js"></script>
     <script src="leaflet/TileLayer.GrayscaleWMS.js"></script>
+    <script src="leaflet/Control.MiniMap.min.js"></script>
     <script src="leaflet/L.Terminator.js"></script>
     <script src="leaflet/leaflet-velocity.min.js"></script>
     <script src="leaflet/leaflet.rotatedMarker.js"></script>

worldmap/leaflet/Control.MiniMap.min.css

@@ -0,0 +1 @@
+.leaflet-control-minimap{border:rgba(255,255,255,1) solid;box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:3px;background:#f8f8f9;transition:all .6s}.leaflet-control-minimap a{background-color:rgba(255,255,255,1);background-repeat:no-repeat;z-index:99999;transition:all .6s}.leaflet-control-minimap a.minimized-bottomright{-webkit-transform:rotate(180deg);transform:rotate(180deg);border-radius:0}.leaflet-control-minimap a.minimized-topleft{-webkit-transform:rotate(0deg);transform:rotate(0deg);border-radius:0}.leaflet-control-minimap a.minimized-bottomleft{-webkit-transform:rotate(270deg);transform:rotate(270deg);border-radius:0}.leaflet-control-minimap a.minimized-topright{-webkit-transform:rotate(90deg);transform:rotate(90deg);border-radius:0}.leaflet-control-minimap-toggle-display{background-image:url(images/toggle.svg);background-size:cover;position:absolute;border-radius:3px 0 0}.leaflet-oldie .leaflet-control-minimap-toggle-display{background-image:url(images/toggle.png)}.leaflet-control-minimap-toggle-display-bottomright{bottom:0;right:0}.leaflet-control-minimap-toggle-display-topleft{top:0;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.leaflet-control-minimap-toggle-display-bottomleft{bottom:0;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.leaflet-control-minimap-toggle-display-topright{top:0;right:0;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.leaflet-oldie .leaflet-control-minimap{border:1px solid #999}.leaflet-oldie .leaflet-control-minimap a{background-color:#fff}.leaflet-oldie .leaflet-control-minimap a.minimized{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)}

worldmap/leaflet/images/toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18"><defs><marker orient="auto" overflow="visible"><path d="M-2.6-2.828L-5.428 0-2.6 2.828.228 0-2.6-2.828z" fill-rule="evenodd" stroke="#000" stroke-width=".4pt"/></marker><marker orient="auto" overflow="visible"><g fill="none" stroke="#000" stroke-width=".8" stroke-linecap="round"><path d="M4.566 4.75L-.652 0"/><path d="M1.544 4.75L-3.674 0"/><path d="M-1.566 4.75L-6.784 0"/><path d="M4.566-5.013L-.652-.263"/><path d="M1.544-5.013l-5.218 4.75"/><path d="M-1.566-5.013l-5.218 4.75"/></g></marker><marker orient="auto" overflow="visible"><path d="M-5.6-5.657L-11.257 0-5.6 5.657.057 0-5.6-5.657z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M4.616 0l-6.92 4v-8l6.92 4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M-10.69-4.437L1.328-.017l-12.018 4.42c1.92-2.61 1.91-6.18 0-8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker><marker orient="auto" overflow="visible"><path d="M-4.616 0l6.92-4v8l-6.92-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10 0l4-4L0 0l14 4-4-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10.69 4.437L-1.328.017l12.018-4.42c-1.92 2.61-1.91 6.18 0 8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker></defs><path d="M13.18 13.146v-5.81l-5.81 5.81h5.81z" stroke="#000" stroke-width="1.643"/><path d="M12.762 12.727l-6.51-6.51" fill="none" stroke="#000" stroke-width="2.482" stroke-linecap="round"/></svg>

worldmap/worldmap.js

@@ -23,6 +23,7 @@ var inIframe = false;
 var showUserMenu = true;
 var showLayerMenu = true;
 var showMouseCoords = false;
+var minimap;
 var sidebyside;
 var layercontrol;
 var drawingColour = "#910000";
@@ -1787,6 +1788,18 @@ function doCommand(cmd) {
             layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
         }
     }
+    // Add or swap new minimap layer
+    if (cmd.map && cmd.map.hasOwnProperty("minimap")) {
+        if (minimap) { map.removeControl(minimap); }
+        if (cmd.map.minimap == false) { return; }
+        if (basemaps[cmd.map.minimap]) {
+            minimap = new L.Control.MiniMap(basemaps[cmd.map.minimap], cmd.map.opt).addTo(map);
+        }
+        else {
+            console.log("Invalid base layer for minimap:",cmd.map.minimap);
+        }
+        
+    }
     // Remove one or more map layers (base or overlay)
     if (cmd.map && cmd.map.hasOwnProperty("delete")) {
         if (!Array.isArray(cmd.map.delete)) { cmd.map.delete = [cmd.map.delete]; }