@ -13,10 +13,12 @@ Feel free to [
- **tooltip** : displays the contents when you hover over the marker. (Mutually exclusive with label. Label has priority)
- **contextmenu** : an html fragment to display on right click of marker - defaults to delete marker. You can specify `$name` to pass in the name of the marker. Set to `""` to disable just this instance.
- **contextmenu** : an html fragment to display on right click of marker - defaults to delete marker. You can specify `${name}` to substitute in the name of the marker. Set to `""` to disable just this instance.
Any other `msg.payload` properties will be added to the icon popup text box. This can be
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. If you use the
overridden by using the **popup** property to supply your own html content. If you use the
popup property it will completely replace the contents so photourl, videourl and weblink are
popup property it will completely replace the contents so photourl, videourl and weblink are meaningless in this mode.
meaningless in this mode.
### Icons
### Icons
@ -273,6 +274,7 @@ Other properties can be found in the leaflet documentation.
Shapes can also have a **popup** property containing html, but you MUST also set a property `clickable:true` in order to allow it to be seen.
Shapes can also have a **popup** property containing html, but you MUST also set a property `clickable:true` in order to allow it to be seen.
### Drawing
### 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`.
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`.
@ -280,7 +282,9 @@ A single *right click* will allow you to add a point to the map - you must speci
Right-clicking on an icon will allow you to delete it.
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.
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.
Once an item is drawn you can right click to edit or delete it.
Double click the object to exit edit mode.
### Buildings
### Buildings
@ -389,20 +393,22 @@ The "connected" action additionally includes a:
There are some internal functions available to make interacting with Node-RED easier (e.g. from inside a user defined popup., these include:
There are some internal functions available to make interacting with Node-RED easier (e.g. from inside a user defined popup., these include:
- **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable. If used with a marker the name should be that of the marker - you can use `$name` to let it be substituted automatically.
- **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable. If used with a marker the name should be that of the marker - you can use `${name}` to let it be substituted automatically.
- **addToForm()** : takes a property name value pair to add to a variable called `form`. When used with contextmenu feedback (above) you can set the feedback value to `"_form"` to substitute this accumulated value. This allows you to do things like `onBlur='addToForm(this.name,this.value)'` over several different fields in the menu and then use `feedback(this.name,"_form")` to submit them all at once. For example a simple multiple line form could be as per the example below:
- **addToForm()** : takes a property name value pair to add to a variable called form. When used with contextmenu feedback (above) you can set the feedback value to `"$form"` to substitute this accumulated value. This allows you to do things like `onChange='addToForm(this.name,this.value)'` over several different fields in the menu and then use `feedback(this.name,"$form")` to submit them all at once. For example a simple multiple line form could be:
Also if you wish to retain the values between separate openings of this form you can assign property names to the value field in the form `value="${foo}`, etc. These will then appear as part of an **value** property on the worldmap-in node message.
```
```
var menu = 'Add some data <inputname="foo" onchange=\'addToForm(this.name,this.value)\'></input><br/>'
var menu = 'Add some data <inputname="foo"value="${foo}"onchange=\'addToForm(this.name,this.value)\'></input><br/>'
menu += 'Add more data <inputname="bar" onchange=\'addToForm(this.name,this.value)\'></input><br/>'
menu += 'Add more data <inputname="bar"value="${bar}"onchange=\'addToForm(this.name,this.value)\'></input><br/>'
menu += '<buttonname="my_form"onclick=\'feedback(this.name,"$form",null,true)\'>Submit</button>'
menu += '<buttonname="my_form"onclick=\'feedback(this.name,"_form",null,true)\'>Submit</button>'
msg.payload = { command: { "contextmenu":menu } }
msg.payload = { command: { "contextmenu":menu } }
```
```
- **delMarker()** : takes the name of the marker as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
- **delMarker()** : takes the name of the marker as a parameter. In a popup this can be specified as `${name}` for dynamic substitution.
- **editPoly()** : takes the name of the shape or line as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
- **editPoly()** : takes the name of the shape or line as a parameter. In a popup this can be specified as `${name}` for dynamic substitution.
## Controlling the map
## Controlling the map
@ -478,11 +484,11 @@ careful escaping quotes, and that they remain matched.
For example a marker popup with a slider (note the \ escaping the internal ' )
For example a marker popup with a slider (note the \ escaping the internal ' )
Dave Conway-Jones
12 months ago