In a tagrendering, some special values are substituted by an advanced UI-element. This allows advanced features and visualizations to be reused by custom themes or even to query third-party API's.
General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssStyle}`. Note that you _do not_ need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args
Instead of using `{"render": {"en": "{some_special_visualisation(some_arg, some other really long message, more args)} , "nl": "{some_special_visualisation(some_arg, een boodschap in een andere taal, more args)}}`, one can also write
{
"render": {
"special": {
"type": "some_special_visualisation",
"argname": "some_arg",
"message": {
"en": "some other really long message",
"nl": "een boodschap in een andere taal"
},
"other_arg_name": "more args"
},
"before": {
"en": "Some text to prefix before the special element (e.g. a title)",
"nl": "Een tekst om voor het element te zetten (bv. een titel)"
},
"after": {
"en": "Some text to put after the element, e.g. a footer"
In other words: use `{ "before": ..., "after": ..., "special": {"type": ..., "argname": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)
The special element which shows the questions which are unkown. Added by default if not yet there
name
default
description
labels
_undefined_
One or more ';'-separated labels. If these are given, only questions with these labels will be given. Use `unlabeled` for all questions that don't have an explicit label. If none given, all questions will be shown
blacklisted-labels
_undefined_
One or more ';'-separated labels of questions which should _not_ be included
#### Example usage of questions
`{questions(,)}`
### add\_new\_point
An element which allows to add a new point on the 'last\_click'-location. Only makes sense in the layer `last_click`
#### Example usage of add\_new\_point
`{add_new_point()}`
### user\_profile
A component showing information about the currently logged in user (username, profile description, profile picture + link to edit them). Mostly meant to be used in the 'user-settings'
#### Example usage of user\_profile
`{user_profile()}`
### language\_picker
A component to set the language of the user interface
#### Example usage of language\_picker
`{language_picker()}`
### logout
Shows a button where the user can log out
#### Example usage of logout
`{logout()}`
### histogram
Create a histogram for a list of given values, read from the properties.
The layer-id and tagRenderingId to render. Can be multiple value if ';'-separated (in which case every value must also contain the layerId, e.g. `layerId.tagRendering0; layerId.tagRendering1`). Note: this can cause layer injection
The (maximum) zoomlevel: the target zoomlevel after fitting the entire feature. The minimap will fit the entire feature, then zoom out to this zoom level. The higher, the more zoomed in with 1 being the entire world and 19 being really close
(Matches all resting arguments) This argument should be the key of a property of the feature. The corresponding value is interpreted as either the id or the a list of ID's. The features with these ID's will be shown on this minimap. (Note: if the key is 'id', list interpration is disabled)
A boolean indicating wether this tagging should be applied automatically if the relevant tags on this object are changed. A visual element indicating the multi\_apply is still shown
If set to 'true', the tags on the other objects will always be overwritten. The default behaviour will be to only change the tags on other objects if they are either undefined or had the same value before the change
{multi\_apply(\_features\_with\_the\_same\_name\_within\_100m, name:etymology:wikidata;name:etymology, Apply etymology information on all nearby objects with the same name)}
If set, only show the closenote button if zoomed in enough
zoomButton
_undefined_
Text to show if not zoomed in enough
#### Example usage of close\_note
`{close_note(,checkmark.svg,id,,,)}`
### plantnet\_detection
Sends the images linked to the current object to plantnet.org and asks it what plant species is shown on it. The user can then select the correct species; the corresponding wikidata-identifier will then be added to the object (together with `source:species:wikidata=plantnet.org AI`).
The keys given to the images, e.g. if image is given, the first picture URL will be added as image, the second as image:0, the third as image:1, etc... Multiple values are allowed if ';'-separated
Shows a big button; clicking this button will apply certain tags onto the feature.
The first argument takes a specification of which tags to add. These can either be a tag to add, such as `amenity=fast_food` or can use a substitution, e.g. `addr:housenumber=$number`. This new point will then have the tags `amenity=fast_food` and `addr:housenumber` with the value that was saved in `number` in the original feature.
If a value to substitute is undefined, empty string will be used instead.
This supports multiple values, e.g. `ref=$source:geometry:type/$source:geometry:ref`
Remark that the syntax is slightly different then expected; it uses '$' to note a value to copy, followed by a name (matched with `[a-zA-Z0-9_:]*`). Sadly, delimiting with `{}` as these already mark the boundaries of the special rendering...
Note that these values can be prepare with javascript in the theme by using a [calculatedTag](calculatedTags.md#calculating-tags-with-javascript)
A specification of the tags to apply. This is either hardcoded in the layer or the `$name` of a property containing the tags to apply. If redirected and the value of the linked property starts with `{`, the other property will be interpreted as a json object
If specified, applies the the tags onto _another_ object. The id will be read from properties\[id\_of\_object\_to\_apply\_this\_one\] of the selected object. The tags are still calculated based on the tags of the _selected_ element
If specified, this maproulette-challenge will be closed when the tags are applied. This should be the ID of the task, _not_ the task\_id.
#### Example usage of tag\_apply
`{tag_apply(survey_date=$_now:date, Surveyed today!)}`, \`{tag\_apply(addr:street=$addr:street, Apply the address, apply\_icon.svg, \_closest\_osm\_id)
### import\_button
This button will copy the point from an external dataset into OpenStreetMap
Note that the contributor must zoom to at least zoomlevel 18 to be able to use this functionality. It is only functional in official themes, but can be tested in unoffical themes.
The argument `tags` of the import button takes a `;`-seperated list of tags to add (or the name of a property which contains a JSON-list of properties).
These can either be a tag to add, such as `amenity=fast_food` or can use a substitution, e.g. `addr:housenumber=$number`. This new point will then have the tags `amenity=fast_food` and `addr:housenumber` with the value that was saved in `number` in the original feature.
Remark that the syntax is slightly different then expected; it uses '$' to note a value to copy, followed by a name (matched with `[a-zA-Z0-9_:]*`). Sadly, delimiting with `{}` as these already mark the boundaries of the special rendering...
1. The new feature will be added and will flow through the program as any other new point as if it came from OSM. This means that there should be a layer which will match the new tags and which will display it.
2. The original feature from your geojson layer will gain the tag '\_imported=yes'. This should be used to change the appearance or even to hide it (eg by changing the icon size to zero)
3. There should be a way for the theme to detect previously imported points, even after reloading. A reference number to the original dataset is an excellent way to do this
4. When importing ways, the theme creator is also responsible of avoiding overlapping ways.
The import button can be tested in an unofficial theme by adding `test=true` or `backend=osm-test` as [URL-paramter](URL_Parameters.md). The import button will show up then. If in testmode, you can read the changeset-XML directly in the web console. In the case that MapComplete is pointed to the testing grounds, the edit will be made on [https://master.apis.dev.openstreetmap.org](https://master.apis.dev.openstreetmap.org)
name
default
description
targetLayer
_undefined_
The id of the layer where this point should end up. This is not very strict, it will simply result in checking that this layer is shown preventing possible duplicate elements
tags
_undefined_
The tags to add onto the new object - see specification above. If this is a key (a single word occuring in the properties of the object), the corresponding value is taken and expanded instead
text
Import this data into OpenStreetMap
The text to show on the button
icon
./assets/svg/addSmall.svg
A nice icon to show in the button
snap\_onto\_layers
_undefined_
If a way of the given layer(s) is closeby, will snap the new point onto this way (similar as preset might snap). To show multiple layers to snap onto, use a `;`\-seperated list
The maximum distance that the imported point will be moved to snap onto a way in an already existing layer (in meters). This is previewed to the contributor, similar to the 'add new point'-action of MapComplete
The property name of the maproulette\_id - this is probably `mr_taskId`. If given, the maproulette challenge will be marked as fixed. Only use this if part of a maproulette-layer.
`{import_button(,,Import this data into OpenStreetMap,./assets/svg/addSmall.svg,,5,,)}`
### import\_way\_button
This button will copy the data from an external dataset into OpenStreetMap, copying the geometry and adding it as a 'line'
Note that the contributor must zoom to at least zoomlevel 18 to be able to use this functionality. It is only functional in official themes, but can be tested in unoffical themes.
The argument `tags` of the import button takes a `;`-seperated list of tags to add (or the name of a property which contains a JSON-list of properties).
These can either be a tag to add, such as `amenity=fast_food` or can use a substitution, e.g. `addr:housenumber=$number`. This new point will then have the tags `amenity=fast_food` and `addr:housenumber` with the value that was saved in `number` in the original feature.
Remark that the syntax is slightly different then expected; it uses '$' to note a value to copy, followed by a name (matched with `[a-zA-Z0-9_:]*`). Sadly, delimiting with `{}` as these already mark the boundaries of the special rendering...
1. The new feature will be added and will flow through the program as any other new point as if it came from OSM. This means that there should be a layer which will match the new tags and which will display it.
2. The original feature from your geojson layer will gain the tag '\_imported=yes'. This should be used to change the appearance or even to hide it (eg by changing the icon size to zero)
3. There should be a way for the theme to detect previously imported points, even after reloading. A reference number to the original dataset is an excellent way to do this
4. When importing ways, the theme creator is also responsible of avoiding overlapping ways.
The import button can be tested in an unofficial theme by adding `test=true` or `backend=osm-test` as [URL-paramter](URL_Parameters.md). The import button will show up then. If in testmode, you can read the changeset-XML directly in the web console. In the case that MapComplete is pointed to the testing grounds, the edit will be made on [https://master.apis.dev.openstreetmap.org](https://master.apis.dev.openstreetmap.org)
name
default
description
targetLayer
_undefined_
The id of the layer where this point should end up. This is not very strict, it will simply result in checking that this layer is shown preventing possible duplicate elements
tags
_undefined_
The tags to add onto the new object - see specification above. If this is a key (a single word occuring in the properties of the object), the corresponding value is taken and expanded instead
text
Import this data into OpenStreetMap
The text to show on the button
icon
./assets/svg/addSmall.svg
A nice icon to show in the button
snap\_to\_point\_if
_undefined_
Points with the given tags will be snapped to or moved
max\_snap\_distance
0.05
If the imported object is a LineString or (Multi)Polygon, already existing OSM-points will be reused to construct the geometry of the newly imported way
Distance to distort the geometry to snap to this layer
#### Example usage of import\_way\_button
`{import_way_button(,,Import this data into OpenStreetMap,./assets/svg/addSmall.svg,,0.05,,0.05,,0.1)}`
### conflate\_button
This button will modify the geometry of an existing OSM way to match the specified geometry. This can conflate OSM-ways with LineStrings and Polygons (only simple polygons with one single ring). An attempt is made to move points with special values to a decent new location (e.g. entrances)
Note that the contributor must zoom to at least zoomlevel 18 to be able to use this functionality. It is only functional in official themes, but can be tested in unoffical themes.
The argument `tags` of the import button takes a `;`-seperated list of tags to add (or the name of a property which contains a JSON-list of properties).
These can either be a tag to add, such as `amenity=fast_food` or can use a substitution, e.g. `addr:housenumber=$number`. This new point will then have the tags `amenity=fast_food` and `addr:housenumber` with the value that was saved in `number` in the original feature.
Remark that the syntax is slightly different then expected; it uses '$' to note a value to copy, followed by a name (matched with `[a-zA-Z0-9_:]*`). Sadly, delimiting with `{}` as these already mark the boundaries of the special rendering...
1. The new feature will be added and will flow through the program as any other new point as if it came from OSM. This means that there should be a layer which will match the new tags and which will display it.
2. The original feature from your geojson layer will gain the tag '\_imported=yes'. This should be used to change the appearance or even to hide it (eg by changing the icon size to zero)
3. There should be a way for the theme to detect previously imported points, even after reloading. A reference number to the original dataset is an excellent way to do this
4. When importing ways, the theme creator is also responsible of avoiding overlapping ways.
The import button can be tested in an unofficial theme by adding `test=true` or `backend=osm-test` as [URL-paramter](URL_Parameters.md). The import button will show up then. If in testmode, you can read the changeset-XML directly in the web console. In the case that MapComplete is pointed to the testing grounds, the edit will be made on [https://master.apis.dev.openstreetmap.org](https://master.apis.dev.openstreetmap.org)
The id of the layer where this point should end up. This is not very strict, it will simply result in checking that this layer is shown preventing possible duplicate elements
The tags to add onto the new object - see specification above. If this is a key (a single word occuring in the properties of the object), the corresponding value is taken and expanded instead
A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature
Use the wikidata entry from this key to show the wikipedia article for. Multiple keys can be given (separated by ';'), in which case the first matching value is used
`{wikipedia()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the wikipedia page of whom the feature was named after. Also remember that these can be styled, e.g. `{wikipedia():max-height: 10rem}` to limit the height
What key to use, e.g. `language`, `tactile_writing:braille:language`, ... If a language is supported, the language code will be appended to this key, resulting in `language:nl=yes` if nl is picked
Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links)
The keys given to the images, e.g. if image is given, the first picture URL will be added as image, the second as image:0, the third as image:1, etc... Multiple values are allowed if ';'-separated
Adds an overview of the mangrove-reviews of this object. Mangrove.Reviews needs - in order to identify the reviewed object - a coordinate and a name. By default, the name of the object is given, but this can be overwritten
`{reviews()}` for a vanilla review, `{reviews(name, play_forest)}` to review a play forest. If a name is known, the name will be used as identifier, otherwise 'play\_forest' is used
A normal opening hours table can be invoked with `{opening_hours_table()}`. A table for e.g. conditional access with opening hours can be `{opening_hours_table(access:conditional, no @ &LPARENS, &RPARENS)}`
Remove this string from the end of the value before parsing. **Note: use `&RPARENs` to indicate `)` if needed**
#### Example usage of opening\_hours\_state
`{opening_hours_state(opening_hours,,)}`
### canonical
Converts a short, canonical value into the long, translated text including the unit. This only works if a `unit` is defined for the corresponding value. The unit specification will be included in the text.
name
default
description
key
_undefined_
The key of the tag to give the canonical text for
#### Example usage of canonical
If the object has `length=42`, then `{canonical(length)}` will be shown as **42 meter** (in english), **42 metre** (in french), ...
### export\_as\_geojson
Exports the selected feature as GeoJson-file
#### Example usage of export\_as\_geojson
`{export_as_geojson()}`
### open\_in\_iD
Opens the current view in the iD-editor
#### Example usage of open\_in\_iD
`{open_in_iD()}`
### open\_in\_josm
Opens the current view in the JOSM-editor
#### Example usage of open\_in\_josm
`{open_in_josm()}`
### clear\_location\_history
A button to remove the travelled track information from the device
#### Example usage of clear\_location\_history
`{clear_location_history()}`
### visualize\_note\_comments
Visualises the comments for notes
name
default
description
commentsKey
comments
The property name of the comments, which should be stringified json
start
0
Drop the first 'start' comments
#### Example usage of visualize\_note\_comments
`{visualize_note_comments(comments,0)}`
### add\_image\_to\_note
Adds an image to a node
name
default
description
Id-key
id
The property name where the ID of the note to close can be found
#### Example usage of add\_image\_to\_note
`{add_image_to_note(id)}`
### title
Shows the title of the popup. Useful for some cases, e.g. 'What is phone number of {title()}?'
#### Example usage of title
`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.
### maproulette\_task
Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).
This reads the property `mr_challengeId` to detect the parent campaign.
#### Example usage of maproulette\_task
`{maproulette_task()}`
### maproulette\_set\_status
Change the status of the given MapRoulette task
name
default
description
message
_undefined_
A message to show to the user
image
confirm
Image to show
message\_confirm
_undefined_
What to show when the task is closed, either by the user or was already closed.
status
1
A statuscode to apply when the button is clicked. 1 = `close`, 2 = `false_positive`, 3 = `skip`, 4 = `deleted`, 5 = `already fixed` (on the map, e.g. for duplicates), 6 = `too hard`
maproulette\_id
mr\_taskId
The property name containing the maproulette id
ask\_feedback
_empty string_
If not an empty string, this will be used as question to ask some additional feedback. A text field will be added
#### Example usage of maproulette\_set\_status
The following example sets the status to '2' (false positive)
Expects a string which denotes the filename to download the contents of `href` into. If set, this link will act as a download-button.
arialabel
_undefined_
If set, this text will be used as aria-label
#### Example usage of link
`{link(,,,,)}`
### multi
Given an embedded tagRendering (read only) and a key, will read the keyname as a JSON-list. Every element of this list will be considered as tags and rendered with the tagRendering
name
default
description
key
_undefined_
The property to read and to interpret as a list of properties
tagrendering
_undefined_
An entire tagRenderingConfig
classes
_undefined_
CSS-classes to apply on every individual item. Seperated by `space`
#### Example usage of multi
{
"render": {
"special": {
"type": "multi",
"key": "_doors_from_building_properties",
"tagrendering": {
"en": "The building containing this feature has a <ahref='#{id}'>door</a> of width {entrance:width}"
If the given key can be interpreted as a JSON, only show the key containing the current language (or 'en'). This specialRendering is meant to be used by MapComplete studio and is not useful in map themes
Gives an interactive element which shows a tag comparison between the OSM-object and the upstream object. This allows to copy some or all tags into OSM
name
default
description
url
_undefined_
The attribute containing the url where to fetch more data
host
_undefined_
The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. '[https://example.com](https://example.com)'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '\*'.
readonly
_undefined_
If 'yes', will not show 'apply'-buttons
#### Example usage of compare\_data
`{compare_data(,,)}`
### login\_button
Show a login button
#### Example usage of login\_button
`{login_button()}`
### linked\_data\_from\_website
Attempts to load (via a proxy) the specified website and parsed ld+json from there. Suitable data will be offered to import into OSM
name default description key website Attempt to load ld+json from the specified URL. This can be in an embedded useProxy yes If 'yes', uses the provided proxy server. This proxy server will scrape HTML and search for a script with `lang='ld+json'`. If `no`, the data will be downloaded and expects a linked-data-json directly host _undefined_ If not using a proxy, define what host the website is allowed to connect to mode _undefined_ If `display`, only show the data in tabular and readonly form, ignoring already existing tags. This is used to explicitly show all the tags. If unset or anything else, allow to apply/import on OSM
#### Example usage of linked\_data\_from\_website
`{linked_data_from_website(website,yes,,)}`
### auto\_apply
A button to run many actions for many features at once. To effectively use this button, you'll need some ingredients:
* A target layer with features for which an action is defined in a tag rendering. The following special visualisations support an autoAction: tag\_apply, import\_way\_button, conflate\_button
* A host feature to place the auto-action on. This can be a big outline (such as a city). Another good option for this is the layer
This document is autogenerated from [src/UI/SpecialVisualizations.ts](https://github.com/pietervdvn/MapComplete/blob/develop/src/UI/SpecialVisualizations.ts)
