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

Add more side bar info

Browse Source
This commit is contained in:
Dave Conway-Jones 2019-02-16 17:40:28 +00:00
parent 3dee4cbbc6
commit 3fa4992113
No known key found for this signature in database
GPG Key ID: 9E7F9C73F5168CD4
3 changed files with 86 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
README.md
View File

@ -42,13 +42,14 @@ Either use the Manage Palette option in the Node-RED Editor menu, or run the fol
## Usage ## Usage
Plots "things" on a map. By default the map will be served from `{httpRoot}/worldmap` Plots "things" on a map. By default the map will be served from `{httpRoot}/worldmap`, but this
can be configured in the configuration panel.
Use keyboard shortcut `⌘⇧m`, `ctrl-shift-m` to jump to the map. Use keyboard shortcut `⌘⇧m`, `ctrl-shift-m` to jump to the map.
The minimum **msg.payload** must contain `name`, `lat` and `lon` properties, e.g. The minimum **msg.payload** must contain `name`, `lat` and `lon` properties, e.g.
msg.payload = { name:"Jason", lat:51.05, lon:-1.35 } msg.payload = { "name":"Jason", "lat":51.05, "lon":-1.35 }
`name` must be a unique identifier across the whole map. Repeated location updates to the same `name` move the marker. `name` must be a unique identifier across the whole map. Repeated location updates to the same `name` move the marker.
@ -57,25 +58,26 @@ Optional properties include
- **deleted** : set to <i>true</i> to remove the named marker. (default <i>false</i>) - **deleted** : set to <i>true</i> to remove the named marker. (default <i>false</i>)
- **draggable** : set to <i>true</i> to allow marker to be moved. (default <i>false</i>) - **draggable** : set to <i>true</i> to allow marker to be moved. (default <i>false</i>)
- **layer** : specify a layer on the map to add marker to. (default <i>unknown</i>) - **layer** : specify a layer on the map to add marker to. (default <i>unknown</i>)
- **speed** : combined with bearing, draws a vector. - **speed** : when combined with bearing, draws a vector.
- **bearing** : combined with speed, draws a vector. - **bearing** : when combined with speed, draws a vector.
- **accuracy** : combined with bearing, draws a polygon of possible direction. - **accuracy** : when combined with bearing, draws a polygon of possible direction.
- **lineColor** : CSS color name or #rrggbb value for bearing line or accuracy polygon - **lineColor** : CSS color name or #rrggbb value for bearing line or accuracy polygon
- **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name, or :emoji name: - **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name, or :emoji name:
- **iconColor** : Standard CSS colour name or #rrggbb hex value. - **iconColor** : Standard CSS colour name or #rrggbb hex value.
- **SIDC** : NATO symbology code (instead of icon). See below. - **SIDC** : NATO symbology code (can be used instead of icon). See below.
- **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below. - **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below.
- **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting, minimum 20 seconds) - **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting, minimum 20 seconds)
- **photoUrl** : adds an image pointed at by the url to the popup box. - **photoUrl** : adds an image pointed at by the url to the popup box.
- **videoUrl** : adds an mp4 video pointed at by the url to the popup box. Ideally 320x240 in size. - **videoUrl** : adds an mp4 video pointed at by the url to the popup box. Ideally 320x240 in size.
- **weblink** : adds a link to an external page for more information. Either set a url as a *string*, or an *object* like `{name:"BBC News", url:"http://news.bbc.co.uk", target:"_new"}` - **weblink** : adds a link to an external page for more information. Either set a url as a *string*, or an *object* like `{"name":"BBC News", "url":"http://news.bbc.co.uk", "target":"_new"}`
- **addtoheatmap** : set to <i>false</i> to exclude point from contributing to heatmap layer. (default true) - **addtoheatmap** : set to <i>false</i> to exclude point from contributing to the heatmap layer. (default true)
- **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on heatmap layer. (default 1.0) - **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on the heatmap layer. (default 1.0)
- **popped** : set to true to automatically open the popup info box, set to false to close it. - **popped** : set to true to automatically open the popup info box, set to false to close it.
- **popup** : html to fill the popup if you don't want the automatic default of the properties list. - **popup** : html to fill the popup if you don't want the automatic default of the properties list.
- **label** : displays the contents of label next to the icon. - **label** : displays the contents of label next to the icon.
Any other `msg.payload` properties will be added to the icon popup text box. Any other `msg.payload` properties will be added to the icon popup text box. This can be overridden
by using the **popup** property to supply your own html content.
### Icons ### Icons
@ -119,9 +121,10 @@ There are lots of extra options you can specify as `msg.options` - see the <a hr
### Buildings ### Buildings
The OSM Buildings layer is available in the layers menu. You can replace this with a building of your own by The OSM Buildings layer is available in the layers menu. You can replace this with a
sending a `msg.payload.command.map` containing an `overlay` and a `geojson` property. The geojson property building of your own by sending a `msg.payload.command.map` containing an `overlay`
should be a GeoJSON Feature Collection as per the OSMBuildings spec. and a `geojson` property. The geojson property should be a GeoJSON Feature Collection
as per the OSMBuildings spec.
var geo = { "type": "FeatureCollection", var geo = { "type": "FeatureCollection",
"features": [ "features": [
@ -159,9 +162,9 @@ should be a GeoJSON Feature Collection as per the OSMBuildings spec.
A 3D map view has now been added as **worldmap/index3d.html** using the mapbox api - the msg can support `msg.command.pitch` and `msg.command.bearing` to angle the view, for example: A 3D map view has now been added as **worldmap/index3d.html** using the mapbox api - the msg can support `msg.command.pitch` and `msg.command.bearing` to angle the view, for example:
msg.payload = { command: { msg.payload = { command: {
zoom:18, zoom: 18,
pitch:60, pitch: 60,
bearing:80 bearing: 80
} } } }
The `icon` can be specified as a person, block, bar, or "anything else" - they will render slightly differently - all units are approximate. They will be positioned at the `lat`, `lon` as normal but also at the `msg.payload.height` - where height is in meters above the surface of the map (which may or may not relate to altitude...) The `icon` can be specified as a person, block, bar, or "anything else" - they will render slightly differently - all units are approximate. They will be positioned at the `lat`, `lon` as normal but also at the `msg.payload.height` - where height is in meters above the surface of the map (which may or may not relate to altitude...)
@ -182,13 +185,13 @@ in addition existing male, female, fa-male and fa-female icons are all represent
- There is currently no way to add labels, popups, or make the icons clickable. - There is currently no way to add labels, popups, or make the icons clickable.
- The 3D only really works at zoomed in scales 16+ due to the small size of the icons. They are not scale independent like icons on the normal map. - The 3D only really works at zoomed in scales 16+ due to the small size of the icons. They are not scale independent like icons on the normal map.
- As this uses the mapbox api you may wish to edit the index3d.html code to include your api key to remove any usage restrictions. - As this uses the mapbox api you may wish to edit the index3d.html code to include your api key to remove any usage restrictions.
- This view is a side project to the Node-RED worldmap side project so happy to take PRs but it probably won't be actively developed. - This view is a side project to the Node-RED Worldmap project so I'm happy to take PRs but it probably won't be actively developed.
### Areas and Lines ### Areas and Lines
If the payload contains an **area** property - that is an array of co-ordinates, e.g. If the msg.payload contains an **area** property - that is an array of co-ordinates, e.g.
... , area: [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ], ... ... , "area": [ [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 then rather than draw a point and icon it draws the polygon. Likewise if it contains a
**line** property it will draw the polyline. **line** property it will draw the polyline.
@ -201,7 +204,7 @@ then rather than draw a point and icon it draws the polygon. Likewise if it cont
### Circles ### Circles
If the payload contains a **radius** property, as well as name, lat and lon, then rather If the msg.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. than draw a point it will draw a circle. The *radius* property is specified in meters.
msg.payload = { lat:51.05, lon:-1.35, name:"A3090", radius:3000 } msg.payload = { lat:51.05, lon:-1.35, name:"A3090", radius:3000 }
@ -231,15 +234,23 @@ 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. 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. Examples of messages coming FROM the map include: ## Events from the map
The **worldmap in** node can be used to receive various events from the map. Examples of messages coming FROM the map include:
{ "action": "connected" } // useful to trigger delivery or redraw of points
{ "action": "click", ... } // when a marker is clicked
{ "action": "move", ... } // when a marker is moved
{ "action": "connected" }
{ "action": "point", "lat": "50.60634", "lon": "-1.66580", "point": "joe,male,mylayer" } { "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 } ] } { "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 } ] }
{ "action": "delete", "name": "joe" } // when a point or shape is deleted
## Control { "action": "layer", "name": "myLayer" } // when a map layer is changed
{ "action": "addlayer", "name": "myLayer" } // when a new map layer is added
{ "action": "dellayer", "name": "myLayer" } // when a new map layer is deleted
## Controlling the map
You can also control the map via the node, by sending in a msg.payload containing a **command** object. Multiple parameters can be specified in one command. You can also control the map via the node, by sending in a msg.payload containing a **command** object. Multiple parameters can be specified in one command.
@ -248,40 +259,40 @@ Optional properties include
- **lat** - move map to specified latitude. - **lat** - move map to specified latitude.
- **lon** - move map to specified longitude. - **lon** - move map to specified longitude.
- **zoom** - move map to specified zoom level (1 - world, 13 to 20 max zoom depending on map). - **zoom** - move map to specified zoom level (1 - world, 13 to 20 max zoom depending on map).
- **layer** - set map to specified base layer name - `{command:{layer:"Esri"}}` - **layer** - set map to specified base layer name - `{"command":{"layer":"Esri"}}`
- **search** - search markers on map for name containing `string`. If not found in existing markers, will then try geocoding looking using Nominatim. An empty string `""` clears the search results. - `{command:{search:"Dave"}}` - **search** - search markers on map for name containing `string`. If not found in existing markers, will then try geocoding looking using Nominatim. An empty string `""` clears the search results. - `{"command":{"search":"Winchester"}}`
- **showlayer** - show the named overlay(s) - `{command:{showlayer:"foo"}}` or `{command:{showlayer:["foo","bar"]}}` - **showlayer** - show the named overlay(s) - `{"command":{"showlayer":"foo"}}` or `{"command":{"showlayer":["foo","bar"]}}`
- **hidelayer** - hide the named overlay(s) - `{command:{hidelayer:"bar"}}` or `{command:{hidelayer:["bar","another"}}` - **hidelayer** - hide the named overlay(s) - `{"command":{"hidelayer":"bar"}}` or `{"command":{"hidelayer":["bar","another"}}`
- **side** - add a second map alongside with slide between them. Use the name of a *baselayer* to add - or "none" to remove the control. - `{command:{side:"Esri Satellite"}}` - **side** - add a second map alongside with slide between them. Use the name of a *baselayer* to add - or "none" to remove the control. - `{"command":{"side":"Esri Satellite"}}`
- **split** - once you have split the screen - the split value is the % across the screen of the split line. - `{command:{split:50}}` - **split** - once you have split the screen - the split value is the % across the screen of the split line. - `{"command":{"split":50}}`
- **map** - Object containing details of a new map layer: - **map** - Object containing details of a new map layer:
- **name** - name of the map base layer OR **overlay** - name of overlay layer - **name** - name of the map base layer OR **overlay** - name of overlay layer
- **url** - url of the map layer - **url** - url of the map layer
- **opt** - options object for the new layer - **opt** - options object for the new layer
- **wms** - boolean, specifies if the data is provided by a Web Map Service - **wms** - boolean, specifies if the data is provided by a Web Map Service
- **bounds** - sets the bounds of an Overlay-Image. 2 Dimensional Array that defines the top-left and bottom-right Corners (lat/lng Points) - **bounds** - sets the bounds of an Overlay-Image. 2 Dimensional Array that defines the top-left and bottom-right Corners (lat/lon Points)
- **heatmap** - set heatmap options object see https://github.com/Leaflet/Leaflet.heat#reference - **heatmap** - set heatmap options object see https://github.com/Leaflet/Leaflet.heat#reference
- **clear** - layer name - to clear a complete layer and remove from layer menu - **clear** - layer name - to clear a complete layer and remove from layer menu
- **panlock** - lock the map area to the current visible area. - `{command:{panlock:true}}` - **panlock** - lock the map area to the current visible area. - `{"command":{"panlock":true}}`
- **zoomlock** - locks the zoom control to the current value and removes zoom control - `{command:{zoomlock:true}}` - **zoomlock** - locks the zoom control to the current value and removes zoom control - `{"command":{"zoomlock":true}}`
- **hiderightclick** - disables the right click that allows adding points to the map - `{command:{hiderightclick:true}}` - **hiderightclick** - disables the right click that allows adding points to the map - `{"command":{"hiderightclick":true}}`
#### To switch layer, move map and zoom #### To switch layer, move map and zoom
msg.payload.command = {layer:"Esri Satellite", lat:51, lon:3, zoom:10 }; msg.payload.command = { layer:"Esri Satellite", lat:51, lon:3, zoom:10 };
#### To draw a heavily customized Circle on a layer #### To draw a heavily customized Circle on a layer
msg.payload.command = { msg.payload.command = {
name:"circle", name: "circle",
lat:51.515, lat: 51.515,
lon:-0.1235, lon: -0.1235,
radius:10, radius: 10,
layer:"drawing", layer: "drawing",
iconColor:'#464646', iconColor: '#464646',
stroke:false, stroke: false,
fillOpacity:0.8, fillOpacity: 0.8,
clickable:true clickable: true
}; };
#### To add a new base layer #### To add a new base layer
@ -314,10 +325,10 @@ To add an overlay instead of a base layer - specify the `overlay` property inste
#### To add a new geoJSON overlay #### To add a new geoJSON overlay
msg.payload.command.map = { msg.payload.command.map = {
overlay:"myGeoJSON", overlay: "myGeoJSON",
geojson:{ your geojson feature as an object }, geojson: { your geojson feature as an object },
opt:{ optional geojson options, style, etc }, opt: { optional geojson options, style, etc },
fit:true fit: true
}; };
The geojson features may contain a `properties` property. That may also include a `style` with properties - stroke, stroke-width, stroke-opacity, fill, fill-opacity. Any other properties will be listed in the popup. The geojson features may contain a `properties` property. That may also include a `style` with properties - stroke, stroke-width, stroke-opacity, fill, fill-opacity. Any other properties will be listed in the popup.
@ -325,6 +336,7 @@ The geojson features may contain a `properties` property. That may also include
The `opt` property is optional. See the <a href="https://leafletjs.com/examples/geojson/">Leaflet geojson docs</a> for more info on possible options. Note: only simple options are supported as functions cannot be serialised. The `opt` property is optional. See the <a href="https://leafletjs.com/examples/geojson/">Leaflet geojson docs</a> for more info on possible options. Note: only simple options are supported as functions cannot be serialised.
The `fit` property is optional. If present the map will automatically zoom to fit the area relevant to the geojson. The `fit` property is optional. If present the map will automatically zoom to fit the area relevant to the geojson.
see http://leafletjs.com/examples/geojson/ for more details about options for opt. see http://leafletjs.com/examples/geojson/ for more details about options for opt.
#### To add a new KML, GPX, or TOPOJSON overlay #### To add a new KML, GPX, or TOPOJSON overlay
@ -332,13 +344,13 @@ see http://leafletjs.com/examples/geojson/ for more details about options for op
As per the geojson overlay you can also inject a KML layer, GPX layer or TOPOJSON layer. The syntax is the same but with either a `kml` property containing the KML string - a `gpx` property containing a GPX string - or a `topojson` property containing the topojson. As per the geojson overlay you can also inject a KML layer, GPX layer or TOPOJSON layer. The syntax is the same but with either a `kml` property containing the KML string - a `gpx` property containing a GPX string - or a `topojson` property containing the topojson.
msg.payload.command.map = { msg.payload.command.map = {
overlay:"myKML", overlay: "myKML",
kml:"<kml>...your kml placemarks...</kml>" kml: "<kml>...your kml placemarks...</kml>"
}; };
For GPX and KML layers, it is possible to define which icon to use for point markers by adding the For GPX and KML layers, it is possible to define which icon to use for point markers by adding the
following properties to `msg.payload.command.map`: following properties to `msg.payload.command.map`:
- **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name. - **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name.
- **iconColor** : Standard CSS colour name or #rrggbb hex value. - **iconColor** : Standard CSS colour name or #rrggbb hex value.
@ -347,7 +359,7 @@ Again the `fit` property can be added to make the map zoom to the relevant area.
#### To add a Velocity Grid Overlay #### To add a Velocity Grid Overlay
msg.payload.command.map = { msg.payload.command.map = {
overlay:"myWind", overlay: "myWind",
velocity: { velocity: {
displayValues: true, displayValues: true,
displayOptions: { displayOptions: {
@ -367,10 +379,10 @@ see https://github.com/danwild/leaflet-velocity for more details about options a
var imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; var imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
msg.payload = { command : {lat:40.74, lon:-74.175, zoom:13 } }; msg.payload = { command : {lat:40.74, lon:-74.175, zoom:13 } };
msg.payload.command.map = { msg.payload.command.map = {
overlay:"New York Historical", overlay: "New York Historical",
url:'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', url: 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds: imageBounds, bounds: imageBounds,
opt:{ opacity:1.0, attribution:"&copy; University of Texas" } opt: { opacity:1.0, attribution:"&copy; University of Texas" }
}; };
#### To clear a layer from the map #### To clear a layer from the map

20
worldmap.html
View File

@ -98,7 +98,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
path. Worldmap-in nodes are matched to worldmap nodes by having exactly the same path. path. Worldmap-in nodes are matched to worldmap nodes by having exactly the same path.
<p>Shortcut - <code>⌘⇧m</code> - ctrl-shift-m to jump to the default Map (<tt>/worldmap</tt>).</p> <p>Shortcut - <code>⌘⇧m</code> - ctrl-shift-m to jump to the default Map (<tt>/worldmap</tt>).</p>
<p>The minimum <code>msg.payload</code> must contain <code>name</code>, <code>lat</code> and <code>lon</code> properties, e.g.</p> <p>The minimum <code>msg.payload</code> must contain <code>name</code>, <code>lat</code> and <code>lon</code> properties, e.g.</p>
<pre>{name:"Joe", lat:51, lon:-1.05}</pre> <pre>{"name":"Joe", "lat":51, "lon":-1.05}</pre>
<p><code>name</code> must be a unique identifier.</p> <p><code>name</code> must be a unique identifier.</p>
<p>Optional properties include</p> <p>Optional properties include</p>
<ul> <ul>
@ -191,7 +191,21 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
</script> </script>
<script type="text/x-red" data-help-name="worldmap in"> <script type="text/x-red" data-help-name="worldmap in">
<p>Receives events from a worldmap web page.</p> <p>Receives actions from a worldmap web page.</p>
<p>Actions include
<ul><li><b>connected</b> - when a new client connects
<li><b>click</b> - when a marker is clicked</li>
<li><b>move</b> - when a marker is dragged/moved</li>
<li><b>point</b> - when a point is added manually using right-click</li>
<li><b>draw</b> - when a shape is added manually to the drawing layer</li>
<li><b>delete</b> - when a point or shape is deleted</li>
<li><b>layer</b> - when a base layer is changed</li>
<li><b>addlayer</b> - when an overlay is added to the map</li>
<li><b>dellayer</b> - when an overlay is removed from the map</li>
</ul>
Use the debug node to see the complete payload of the msg returned. Further information
can be found in the <a href="https://github.com/dceejay/RedMap/blob/master/README.md#events-from-the-map" target="_new">Events section</a>
of the README.</p>
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
@ -234,7 +248,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
<p>Holds all the points in memory, so if you have a lot of points held for a <p>Holds all the points in memory, so if you have a lot of points held for a
large depth then memory usage may become excessive.</p> large depth then memory usage may become excessive.</p>
<p>To delete a track send a msg.payload containing both the name of the object and <p>To delete a track send a msg.payload containing both the name of the object and
set <code>msg.payload.deleted = true</code></p> set deleted to true - for example <code>msg.payload = { "name":"Fred", "deleted":true }</code></p>
</script> </script>
<script type="text/javascript"> <script type="text/javascript">

2
worldmap/index.html
View File

@ -326,7 +326,7 @@ function doLock() {
console.log("Saved :",JSON.stringify(map.getCenter()),map.getZoom(),baselayername); console.log("Saved :",JSON.stringify(map.getCenter()),map.getZoom(),baselayername);
} }
map.setMaxBounds(mb); map.setMaxBounds(mb);
console.log("Map bounds lock :",lockit); //console.log("Map bounds lock :",lockit);
} }
// Remove old markers // Remove old markers