dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add minimap capability

Browse Source
This commit is contained in:
Dave Conway-Jones 2020-08-03 13:16:53 +01:00
parent 222d4608e6
commit d94544d998
No known key found for this signature in database
GPG Key ID: 302A6725C594817F
11 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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.

17
README.md
View File

@ -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.

1
examples/Add Minimap.json Normal file
View File

@ -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"]]}]

4
package.json
View File

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

24
worldmap.html
View File

@ -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>

2
worldmap.js
View File

@ -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;

2
worldmap/index.html
View File

@ -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>

1
worldmap/leaflet/Control.MiniMap.min.css vendored Normal file
View File

@ -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)}

1
worldmap/leaflet/Control.MiniMap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
worldmap/leaflet/images/toggle.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

13
worldmap/worldmap.js
View File

@ -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]; }