Update README.md
This commit is contained in:
Dave Conway-Jones
parent
c4d020cea1
commit
6bce963ba9
266
README.md
266
README.md
@ -121,10 +121,143 @@ SIDC codes can be generated using the online tool - https://spatialillusions.com
|
|||||||
|
|
||||||
There are lots of extra options you can specify as `msg.options` - see the <a href="https://github.com/spatialillusions/milsymbol/tree/master/docs" target="mapinfo">milsymbol docs here</a>.
|
There are lots of extra options you can specify as `msg.options` - see the <a href="https://github.com/spatialillusions/milsymbol/tree/master/docs" target="mapinfo">milsymbol docs here</a>.
|
||||||
|
|
||||||
|
### Areas, Lines and Rectangles
|
||||||
|
|
||||||
|
If the msg.payload contains an **area** property - that is an array of co-ordinates, e.g.
|
||||||
|
|
||||||
|
msg.payload = {"name": "zone1", "area": [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ]}
|
||||||
|
|
||||||
|
then rather than draw a point and icon it draws the polygon. If the "area" array only has 2
|
||||||
|
elements, then it assumes this is a bounding box for a rectangle and draws a rectangle.
|
||||||
|
|
||||||
|
Likewise if it contains a **line** property it will draw the polyline.
|
||||||
|
|
||||||
|
There are extra optional properties you can specify - see Options below.
|
||||||
|
|
||||||
|
|
||||||
|
### Circles and Ellipses
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
msg.payload = { "name":"A3090", "lat":51.05, "lon":-1.35, "radius":3000 }
|
||||||
|
|
||||||
|
As per Areas and Lines you may also specify *color*, *fillColor*, and *layer*, see Options section below.
|
||||||
|
|
||||||
|
msg.payload = {
|
||||||
|
"name": "circle",
|
||||||
|
"lat": 51.515,
|
||||||
|
"lon": -0.1235,
|
||||||
|
"radius": 1000,
|
||||||
|
"layer": "drawing",
|
||||||
|
"iconColor": '#464646',
|
||||||
|
"stroke": false,
|
||||||
|
"fillOpacity": 0.8,
|
||||||
|
"clickable": true
|
||||||
|
};
|
||||||
|
|
||||||
|
If the **radius** property is an array of two numbers, these specify the minor and major radii
|
||||||
|
of an ellipse, in meters. A **tilt** property can also be applied to rotate the ellipse by
|
||||||
|
a number of degrees.
|
||||||
|
|
||||||
|
msg.payload = { "name":"Bristol Channel", "lat":51.5, "lon":-2.9, "radius":[30000,70000], "tilt":45 };
|
||||||
|
|
||||||
|
|
||||||
|
### Arcs, Range Rings
|
||||||
|
|
||||||
|
You can add supplemental arc(s) to a marker by adding an **arc** property as below.
|
||||||
|
Supplemental means that you can also specify a line using a **bearing** and **length** property.
|
||||||
|
|
||||||
|
```
|
||||||
|
msg.payload = { name:"Camera01", icon:"fa-camera", lat:51.05, lon:-1.35,
|
||||||
|
bearing: 235,
|
||||||
|
length: 2200,
|
||||||
|
arc: {
|
||||||
|
ranges: [500,1000,2000],
|
||||||
|
pan: 228,
|
||||||
|
fov: 40,
|
||||||
|
color: '#aaaa00'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**ranges** can be a single number or an array of arc distances from the marker.
|
||||||
|
The **pan** is the bearing of the centre of the arc, and the **fov** (Field of view)
|
||||||
|
specifies the angle of the arc.
|
||||||
|
Defaults are shown above.
|
||||||
|
|
||||||
|
### GeoJSON
|
||||||
|
|
||||||
|
If the msg.payload contains a **geojson** property, and no **lat** and **lon**, then
|
||||||
|
rather than draw a point it will render the geojson.
|
||||||
|
|
||||||
|
msg.payload = {
|
||||||
|
"name": "MyPolygon",
|
||||||
|
"geojson": {
|
||||||
|
"type": "Feature",
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[[-180,10],[20,90],[180,-5],[-30,-90]]]
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"stroke-width": "8",
|
||||||
|
"stroke": "#ff00ff",
|
||||||
|
"fill-color": "#808000",
|
||||||
|
"fill-opacity": 0.2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Often geojson may not have a `properties` or `style` property in which case you can specify some global optional properties (see below) in order to set some defaults for the geojson object.
|
||||||
|
|
||||||
|
msg.payload = {
|
||||||
|
"name": "Myline",
|
||||||
|
"layer": "Lines",
|
||||||
|
"color": "#0000ff",
|
||||||
|
"weight": "6",
|
||||||
|
"dashArray": "30 20",
|
||||||
|
"geojson": {
|
||||||
|
"type": "LineString",
|
||||||
|
"coordinates": [[0,0],[0,90]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
**Note**: you can just send a msg.payload containing the geojson itself - but obviously you then can't style
|
||||||
|
it, set the name, layer, etc.
|
||||||
|
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
Areas, Rectangles, Lines, Circles and Ellipses can also specify more optional properties:
|
||||||
|
|
||||||
|
- **layer** : declares which layer you put it on.
|
||||||
|
- **color** : can set the colour of the polygon or line.
|
||||||
|
- **fillColor** : can set the fill colour of the polygon.
|
||||||
|
- **fillOpacity** : can set the opacity of the polygon fill colour.
|
||||||
|
- **dashArray** : optional dash array for polyline.
|
||||||
|
- **clickable** : boolean - set to true to allow click to show popup.
|
||||||
|
- **popup** : html string to display in popup (as well as name).
|
||||||
|
- **editable** : boolean - set to true to allow simple edit/delete right click contextmenu
|
||||||
|
- **contextmenu** : html string to display a more complex right click contextmenu
|
||||||
|
- **weight** : the width of the line (or outline)
|
||||||
|
|
||||||
|
Other properties can be found in the leaflet documentation.
|
||||||
|
|
||||||
|
|
||||||
|
### Drawing
|
||||||
|
|
||||||
|
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 and edit polylines, polygons, rectangles and circles.
|
||||||
|
Once an item is drawn you can right click to edit or delete it. Double click the object to exit edit mode.
|
||||||
|
|
||||||
|
|
||||||
### Buildings
|
### Buildings
|
||||||
|
|
||||||
The OSM Buildings layer is available in the layers menu. You can replace this with a
|
The OSM Buildings layer is available in the layers menu. You can replace this with
|
||||||
building of your own by sending a `msg.payload.command.map` containing an `overlay`
|
buildings of your own by sending a `msg.payload.command.map` containing an `overlay`
|
||||||
and a `geojson` property. The geojson property should be a GeoJSON Feature Collection
|
and a `geojson` property. The geojson property should be a GeoJSON Feature Collection
|
||||||
as per the OSMBuildings spec. For example in a function node:
|
as per the OSMBuildings spec. For example in a function node:
|
||||||
|
|
||||||
@ -185,135 +318,6 @@ in addition existing male, female, fa-male and fa-female icons are all represent
|
|||||||
- 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 project so I'm 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, Lines and Rectangles
|
|
||||||
|
|
||||||
If the msg.payload contains an **area** property - that is an array of co-ordinates, e.g.
|
|
||||||
|
|
||||||
msg.payload = {"name": "zone1", "area": [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ]}
|
|
||||||
|
|
||||||
then rather than draw a point and icon it draws the polygon. If the "area" array only has 2
|
|
||||||
elements, then it assumes this is a bounding box for a rectangle and draws a rectangle.
|
|
||||||
|
|
||||||
Likewise if it contains a **line** property it will draw the polyline.
|
|
||||||
|
|
||||||
There are extra optional properties you can specify - see Options below.
|
|
||||||
|
|
||||||
|
|
||||||
### Circles and Ellipses
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
msg.payload = { "name":"A3090", "lat":51.05, "lon":-1.35, "radius":3000 }
|
|
||||||
|
|
||||||
As per Areas and Lines you may also specify *color*, *fillColor*, and *layer*, see Options section below.
|
|
||||||
|
|
||||||
msg.payload = {
|
|
||||||
"name": "circle",
|
|
||||||
"lat": 51.515,
|
|
||||||
"lon": -0.1235,
|
|
||||||
"radius": 1000,
|
|
||||||
"layer": "drawing",
|
|
||||||
"iconColor": '#464646',
|
|
||||||
"stroke": false,
|
|
||||||
"fillOpacity": 0.8,
|
|
||||||
"clickable": true
|
|
||||||
};
|
|
||||||
|
|
||||||
If the **radius** property is an array of two numbers, these specify the minor and major radii
|
|
||||||
of an ellipse, in meters. A **tilt** property can also be applied to rotate the ellipse by
|
|
||||||
a number of degrees.
|
|
||||||
|
|
||||||
msg.payload = { "name":"Bristol Channel", "lat":51.5, "lon":-2.9, "radius":[30000,70000], "tilt":45 };
|
|
||||||
|
|
||||||
|
|
||||||
### GeoJSON
|
|
||||||
|
|
||||||
If the msg.payload contains a **geojson** property, and no **lat** and **lon**, then rather than draw a point
|
|
||||||
it will render the geojson.
|
|
||||||
|
|
||||||
msg.payload = {
|
|
||||||
"name": "MyPolygon",
|
|
||||||
"geojson": {
|
|
||||||
"type": "Feature",
|
|
||||||
"geometry": {
|
|
||||||
"type": "Polygon",
|
|
||||||
"coordinates": [[[-180,10],[20,90],[180,-5],[-30,-90]]]
|
|
||||||
},
|
|
||||||
"style": {
|
|
||||||
"stroke-width": "8",
|
|
||||||
"stroke": "#ff00ff",
|
|
||||||
"fill-color": "#808000",
|
|
||||||
"fill-opacity": 0.2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Other optional properties (see below) can be used to style the geojson "outside" of the feature itself.
|
|
||||||
|
|
||||||
msg.payload = {
|
|
||||||
"name": "Myline",
|
|
||||||
"color": "#0000ff",
|
|
||||||
"weight": "6",
|
|
||||||
"dashArray": "30 20",
|
|
||||||
"geojson": {
|
|
||||||
"type": "LineString",
|
|
||||||
"coordinates": [[0,0],[0,90]]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
### Options
|
|
||||||
|
|
||||||
Areas, Rectangles, Lines, Circles and Ellipses can also specify more optional properties:
|
|
||||||
|
|
||||||
- **layer** : declares which layer you put it on.
|
|
||||||
- **color** : can set the colour of the polygon or line.
|
|
||||||
- **fillColor** : can set the fill colour of the polygon.
|
|
||||||
- **fillOpacity** : can set the opacity of the polygon fill colour.
|
|
||||||
- **dashArray** : optional dash array for polyline.
|
|
||||||
- **clickable** : boolean - set to true to allow click to show popup.
|
|
||||||
- **popup** : html string to display in popup (as well as name).
|
|
||||||
- **editable** : boolean - set to true to allow simple edit/delete right click contextmenu
|
|
||||||
- **contextmenu** : html string to display a more complex right click contextmenu
|
|
||||||
- **weight** : the width of the line (or outline)
|
|
||||||
|
|
||||||
Other properties can be found in the leaflet documentation.
|
|
||||||
|
|
||||||
|
|
||||||
### Arcs, Range Rings
|
|
||||||
|
|
||||||
You can add supplemental arc(s) to an icon by adding an **arc** property as below.
|
|
||||||
Supplemental means that you can also specify a line using a **bearing** and **length** property.
|
|
||||||
|
|
||||||
```
|
|
||||||
msg.payload = { name:"Camera01", icon:"fa-camera", lat:51.05, lon:-1.35,
|
|
||||||
bearing: 235,
|
|
||||||
length: 2200,
|
|
||||||
arc: {
|
|
||||||
ranges: [500,1000,2000],
|
|
||||||
pan: 228,
|
|
||||||
fov: 40,
|
|
||||||
color: '#aaaa00'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**ranges** can be a single number or an array of arc distances from the marker.
|
|
||||||
The **pan** is the bearing of the centre of the arc, and the **fov** (Field of view)
|
|
||||||
specifies the angle of the arc.
|
|
||||||
Defaults are shown above.
|
|
||||||
|
|
||||||
|
|
||||||
## Drawing
|
|
||||||
|
|
||||||
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 and edit polylines, polygons, rectangles and circles.
|
|
||||||
Once an item is drawn you can right click to edit or delete it. Double click the object to exit edit mode.
|
|
||||||
|
|
||||||
|
|
||||||
## Events from the map
|
## Events from the map
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user