node-red-web-worldmap-indoor
Advanced tools
Customized version of node-red-contrib-web-worldmap.
A Node-RED node to provide world map web page for plotting "things" on.
.weblink property to allow links out to other information.worldmap in
node to handle events coming from the map interaction.Run the following command in your Node-RED user directory - typically ~/.node-red
npm i --save node-red-contrib-web-worldmap
### Usage
Plots "things" on a map. The map will be served from {httpRoot}/worldmap
The minimum msg.payload must contain name, lat and lon properties, e.g.
{name:"Joe", lat:51, lon:-1.05}
name must be a unique identifier across the whole map. Repeated location updates to the same name move the point.
Optional properties include
{name:"BBC News", url:"news.bbc.co.uk"}Any other msg.payload properties will be added to the icon popup text box.
You may select any of the Font Awesome set of icons. However there are several specials...
If the payload contains an area property - that is an array of co-ordinates, e.g.
[ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ]
then rather than draw a point and icon it draws the polygon. Likewise if it contains a line property it will draw the polyline.
If the payload contains a radius property, as well as name, lat and lon, then rather than draw a point it will draw a circle. The radius property is specified in meters.
As per Areas and Lines you may also specify iconColor, and layer.
If the payload contains a sdlat and sdlon property instead of radius an ellipse will be drawn. The sdlat and sdlon propertys specify the semi-axes of the ellipse. These are specified in the Latitude/Longitude format.
Areas, Lines and Circles can also specify more optional properties:
A single right click will allow you to add a point to the map - you must specify the name and optionally the icon and layer.
Right-clicking on an icon will allow you to delete it.
If you select the drawing layer you can also add polylines, polygons and rectangles.
All these events generate messages that can be received by using a worldmap in node. For example:
{ "action": "connected" }
{ "action": "point", "lat": "50.60634", "lon": "-1.66580", "point": "joe,male,mylayer" }
{ "action": "delete", "name": "joe" }
{ "action": "layer", "name": "Esri Satellite" }
{ "action": "draw", "type": "rectangle", "points": [ { "lat": 50.61243889044519, "lng": -1.5913009643554688 }, { "lat": 50.66665471366635, "lng": -1.5913009643554688 }, { "lat": 50.66665471366635, "lng": -1.4742279052734375 }, { "lat": 50.61243889044519, "lng": -1.4742279052734375 } ] }
You can also control the map via the node, by sending in a msg.payload containing a command object.
Optional properties include
To switch layer, move map and zoom
msg.payload.command = {layer:"Esri Relief", lat:51, lon:3, zoom:10 };
To draw a heavily customized Circle on a layer
msg.payload.command = {
name:"circle",
lat:51.515,
lon:-0.1235,
radius:10,
layer:"drawing",
iconColor:'#464646',
stroke:false,
fillOpacity:0.8,
clickable:true
};
To add a new base layer
msg.payload.command.map = {
name:"OSMhot",
url:'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
opt:{ maxZoom:19, attribution:"© OpenStreetMap" }
};
To add an Image Overlay var imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; msg.payload.command.map = { overlay:"New York Historical", url:'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', bounds: imageBounds, opt:{ opacity:1.0, attribution:"© University of Texas" } };
IMHO the easiest map server to make work is the mapserver package in Ubuntu / Debian. Usually you will start with
sudo apt-get install mapserver-bin cgi-mapserver gdal-bin
Configuring that, setting up your tiles, and creating a .map file is way beyond the scope of this README so I will leave that as an exercise for the reader. Once set up you should have a cgi process you can run called mapserv, and a .map file that describes the layers available from the server.
Create and edit these into a file called mapserv, located in this node's directory, typically
~/.node-red/node_modules/node-red-contrib-web-worldmap/mapserv, for example:
#! /bin/sh
# set this to the path of your WMS map file (which in turn points to your tiles)
MS_MAPFILE=~/Data/maps/uk.map
export MS_MAPFILE
# and set this to the path of your cgi-mapserv executable
/usr/bin/mapserv
You can then add a new WMS Base layer by injecting a message like
msg.payload.command.map = {
name: "Local WMS",
url: 'http://localhost:1880/cgi-bin/mapserv', // we will serve the tiles from this node locally.
opt: {
layers: 'gb', // specifies a layer in your map file
format: 'image/png',
transparent: true,
attribution: "© Ordnance Survey, UK"
},
wms: true // set to true for WMS type mapserver
}
The following example gets recent earthquakes from USGS, parses the result, formats up the msg as per above and sends to the node to plot on the map. It also shows how to zoom and move the map or add a new layer.
[{"id":"f7950c21.019f5","type":"worldmap","z":"896b28a8.437658","name":"","x":670,"y":680,"wires":[]},{"id":"bb057b8a.4fe2c8","type":"inject","z":"896b28a8.437658","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":110,"y":640,"wires":[["b8545e85.5ba4c"]]},{"id":"b8545e85.5ba4c","type":"function","z":"896b28a8.437658","name":"add new layer","func":"msg.payload = {};\nmsg.payload.command = {};\n\nvar u = 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';\nvar o = JSON.stringify({ maxZoom: 19, attribution: '© OpenStreetMap'});\n\nmsg.payload.command.map = {name:\"OSMhot\", url:u, opt:o};\nmsg.payload.command.layer = \"OSMhot\";\n\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":640,"wires":[["f7950c21.019f5"]]},{"id":"e6cc0a05.14edd8","type":"function","z":"896b28a8.437658","name":"USGS Quake monitor csv re-parse","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = \"earthquake\";\nmsg.payload.name = msg.payload.id;\nmsg.payload.icon = \"globe\";\nmsg.payload.iconColor = \"orange\";\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\t\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":780,"wires":[["f7950c21.019f5"]]},{"id":"84b8388.5e943c8","type":"function","z":"896b28a8.437658","name":"move and zoom","func":"msg.payload = { command:{layer:\"Esri Terrain\",lat:0,lon:0,zoom:3} };\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":680,"wires":[["f7950c21.019f5"]]},{"id":"5c317188.d2f31","type":"csv","z":"896b28a8.437658","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":310,"y":720,"wires":[["e6cc0a05.14edd8"]]},{"id":"cfafad11.2f299","type":"inject","z":"896b28a8.437658","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":110,"y":680,"wires":[["84b8388.5e943c8"]]},{"id":"f0d75b03.39d618","type":"http request","z":"896b28a8.437658","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":190,"y":780,"wires":[["5c317188.d2f31"]]},{"id":"87da03a.eb8a3","type":"inject","z":"896b28a8.437658","name":"Quakes","topic":"","payload":"","payloadType":"none","repeat":"900","crontab":"","once":false,"x":120,"y":720,"wires":[["f0d75b03.39d618"]]}]
Car icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.
FAQs
Customized version of node-red-contrib-web-worldmap.
We found that node-red-web-worldmap-indoor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.