diff --git a/README.md b/README.md
index 9c78655..59e9c3e 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ map web page for plotting "things" on.
![Map Image](https://dceejay.github.io/pages/images/redmap.png)
### Changes
+ - v1.0.22 - Add example how to embed into Node-RED-Dashboard template.
- v1.0.21 - If you specify range and icon then you get a marker and a range circle, if you just specify range with no icon, you just get a circle, and vice versa.
- v1.0.20 - Add buildings overlay.
- v1.0.19 - Add circle mode - specify name, lat, lon and radius.
diff --git a/examples/Map in Dashboard.json b/examples/Map in Dashboard.json
new file mode 100644
index 0000000..ae68556
--- /dev/null
+++ b/examples/Map in Dashboard.json
@@ -0,0 +1,158 @@
+[
+ {
+ "id": "104f9b89.5daf04",
+ "type": "worldmap",
+ "z": "5ab56e5e.449a5",
+ "name": "",
+ "lat": "",
+ "lon": "",
+ "zoom": "",
+ "layer": "OSM",
+ "cluster": "",
+ "maxage": "",
+ "usermenu": "hide",
+ "panit": "true",
+ "x": 490,
+ "y": 280,
+ "wires": []
+ },
+ {
+ "id": "7892d55a.40864c",
+ "type": "inject",
+ "z": "5ab56e5e.449a5",
+ "name": "",
+ "topic": "",
+ "payload": "",
+ "payloadType": "str",
+ "repeat": "",
+ "crontab": "",
+ "once": false,
+ "x": 130,
+ "y": 220,
+ "wires": [
+ [
+ "45dc04c5.811fcc"
+ ]
+ ]
+ },
+ {
+ "id": "45dc04c5.811fcc",
+ "type": "function",
+ "z": "5ab56e5e.449a5",
+ "name": "",
+ "func": "// create random position\nvar lat = 51 + Math.random() * 0.2;\nvar lon = -1.45 + Math.random() * 0.2;\nmsg.payload={lat:lat, lon:lon, name:\"Mike\", icon:\"male\", url:\"IBM link\"};\nreturn msg;",
+ "outputs": 1,
+ "noerr": 0,
+ "x": 310,
+ "y": 280,
+ "wires": [
+ [
+ "104f9b89.5daf04"
+ ]
+ ]
+ },
+ {
+ "id": "39ae2a4d.5a6f06",
+ "type": "inject",
+ "z": "5ab56e5e.449a5",
+ "name": "",
+ "topic": "",
+ "payload": "/red/worldmap",
+ "payloadType": "str",
+ "repeat": "",
+ "crontab": "",
+ "once": true,
+ "x": 140,
+ "y": 340,
+ "wires": [
+ [
+ "a8660ccf.d7166"
+ ]
+ ]
+ },
+ {
+ "id": "be72c0ae.5925b",
+ "type": "ui_template",
+ "z": "5ab56e5e.449a5",
+ "group": "c60f4e05.ebb48",
+ "name": "",
+ "order": 0,
+ "width": "6",
+ "height": "6",
+ "format": "
",
+ "storeOutMessages": true,
+ "fwdInMessages": true,
+ "x": 480,
+ "y": 340,
+ "wires": [
+ []
+ ]
+ },
+ {
+ "id": "a8660ccf.d7166",
+ "type": "template",
+ "z": "5ab56e5e.449a5",
+ "name": "",
+ "field": "payload",
+ "fieldType": "msg",
+ "format": "handlebars",
+ "syntax": "mustache",
+ "template": "",
+ "x": 310,
+ "y": 340,
+ "wires": [
+ [
+ "be72c0ae.5925b"
+ ]
+ ]
+ },
+ {
+ "id": "79411e5e.1af57",
+ "type": "ui_button",
+ "z": "5ab56e5e.449a5",
+ "name": "",
+ "group": "c60f4e05.ebb48",
+ "order": 0,
+ "width": 0,
+ "height": 0,
+ "label": "Move Mike",
+ "color": "",
+ "icon": "fa-male",
+ "payload": "",
+ "payloadType": "str",
+ "topic": "",
+ "x": 130,
+ "y": 280,
+ "wires": [
+ [
+ "45dc04c5.811fcc"
+ ]
+ ]
+ },
+ {
+ "id": "235ad210.492b0e",
+ "type": "comment",
+ "z": "5ab56e5e.449a5",
+ "name": "How to embed Map in Dashboard",
+ "info": "This example shows how to embed the Worldmap \ninto a template node within the `node-red-dashboard`\n\nThe first flow creates a dashboard button that \ngenerates a randon position, with the required \nicon, and passes that to the worldmap. The\nmap is configured to automatically pan to the\nposition of any point that arrives.\n\nThe second flow initialise the dashboard template\nwith the initial map and sets it to a more square shape\nby adjusting the height.",
+ "x": 180,
+ "y": 160,
+ "wires": []
+ },
+ {
+ "id": "c60f4e05.ebb48",
+ "type": "ui_group",
+ "z": "5ab56e5e.449a5",
+ "name": "Default",
+ "tab": "6a3aec18.0bc474",
+ "disp": true,
+ "width": "6"
+ },
+ {
+ "id": "6a3aec18.0bc474",
+ "type": "ui_tab",
+ "z": "5ab56e5e.449a5",
+ "name": "Home",
+ "icon": "dashboard"
+ }
+]
diff --git a/worldmap.html b/worldmap.html
index 8b3c6c3..2b9846c 100644
--- a/worldmap.html
+++ b/worldmap.html
@@ -43,11 +43,22 @@
- zoom levels less than
+ zoom levels less than
-
- Remove markers after seconds
+
+ Remove markers after seconds
+
+
+
+
+ Auto-pan
@@ -84,13 +95,15 @@
category: 'location',
color:"darksalmon",
defaults: {
+ name: {value:""},
lat: {value:""},
lon: {value:""},
zoom: {value:""},
layer: {value:""},
cluster: {value:""},
maxage: {value:""},
- name: {value:""}
+ usermenu: {value:"show"},
+ panit: {value:"false"}
},
inputs:1,
outputs:0,
diff --git a/worldmap.js b/worldmap.js
index f4b0377..a9dfc16 100644
--- a/worldmap.js
+++ b/worldmap.js
@@ -29,6 +29,8 @@ module.exports = function(RED) {
this.layer = n.layer || "";
this.cluster = n.cluster || "";
this.maxage = n.maxage || "";
+ this.showmenu = n.usermenu || "show";
+ this.panit = n.panit || "false";
var node = this;
//node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
RED.httpNode.use("/worldmap", express.static(__dirname + '/worldmap'));
@@ -49,6 +51,8 @@ module.exports = function(RED) {
if (node.layer && node.layer.length > 0) { c.layer = node.layer; }
if (node.cluster && node.cluster.length > 0) { c.cluster = node.cluster; }
if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
+ c.showmenu = node.showmenu;
+ c.panit = node.panit;
client.emit("worldmapdata",{command:c});
}
});
@@ -57,14 +61,11 @@ module.exports = function(RED) {
node.status({fill:"green",shape:"ring",text:"connected "+socket.engine.clientsCount});
});
node.on("close", function() {
+ node.status({});
client.disconnect(true);
});
}
-
- node.on("close", function() {
- node.status({});
- //socket.close();
- });
+ node.status({});
socket.on('connection', callback);
}
RED.nodes.registerType("worldmap",WorldMap);
diff --git a/worldmap/index.html b/worldmap/index.html
index 8ae81f0..1b4ec03 100644
--- a/worldmap/index.html
+++ b/worldmap/index.html
@@ -77,7 +77,7 @@
Help |
-
+