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):cssClasses}`. 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
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)
Shows the extra description from the presets of the layer, if one matches. It will pick the most specific one (e.g. if preset `A` implies `B`, but `B` does not imply `A`, it'll pick B) or the first one if no ordering can be made. Might be empty
Defined in [/src/UI/Popup/DataVisualisations.ts#L215](/src/UI/Popup/DataVisualisations.ts#L215)
#### Example usage of preset_description
`{preset_description()}`
### show_icons
Displays all icons from the specified tagRenderings (if they are known and have an icon) together, e.g. to give a summary of the dietary options
| name | default | description |
-----|-----|----- |
| labels | _undefined_ | A ';'-separated list of labels and/or ids of tagRenderings |
| class | inline-flex mx-4 | CSS-classes of the container, space-separated |
Defined in [/src/UI/Popup/DataVisualisations.ts#L307](/src/UI/Popup/DataVisualisations.ts#L307)
`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.
### translated
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
| name | default | description |
-----|-----|----- |
| key | value | The attribute to interpret as json |
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 |
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)}`
Elements to help with importing data to OSM. For example: buttons to import a feature, apply tags on an element, apply multiple tags on an element or to work with maproulette
A button to run many actions for many features at once.
To effectively use this button, you'll need some ingredients:
1. 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
2. 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 [current_view](./BuiltinLayers.md#current_view)
3. Then, use a calculated tag on the host feature to determine the overlapping object ids
4. At last, add this component
| name | default | description |
-----|-----|----- |
| target_layer | _undefined_ | The layer that the target features will reside in |
| target_feature_ids | _undefined_ | The key, of which the value contains a list of ids |
| tag_rendering_id | _undefined_ | The ID of the tagRendering containing the autoAction. This tagrendering will be calculated. The embedded actions will be executed |
| text | _undefined_ | The text to show on the button |
| icon | ./assets/svg/robot.svg | The icon to show on the button |
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
| 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'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. |
| readonly | _undefined_ | If 'yes', will not show 'apply'-buttons |
Defined in [/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts#L243](/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts#L243)
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)
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).
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...
| 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 |
| way_to_conflate | _undefined_ | The key, of which the corresponding value is the id of the OSM-way that must be conflated; typically a calculatedTag |
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).
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...
| 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 |
| max_snap_distance | 5 | 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 |
| note_id | _undefined_ | If given, this key will be read. The corresponding note on OSM will be closed, stating 'imported' |
| maproulette_id | _undefined_ | 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. |
| to_point | _undefined_ | If set, a feature will be converted to a centerpoint |
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).
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...
| 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 |
| move_osm_point_if | _undefined_ | Moves the OSM-point to the newly imported point if these conditions are met |
| max_move_distance | 0.05 | If an OSM-point is moved, the maximum amount of meters it is moved. Capped on 20m |
| snap_onto_layers | _undefined_ | If no existing nearby point exists, but a line of a specified layer is closeby, snap to this layer instead |
| snap_to_layer_max_distance | 0.1 | Distance to distort the geometry to snap to this layer |
Attempts to load (via a proxy) the specified website and parsed ld+json from there. Suitable data will be offered to import into OSM. Note: this element is added by default; but is disabled if the theme has the 'more privacy' flag set
| key | website | Attempt to load ld+json from the specified URL. This can be in an embedded <scripttype='ld+json'>|
| 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 |
| collapsed | yes | If the containing accordion should be closed |
Defined in [/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts#L105](/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts#L105)
| 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 |
Defined in [/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts#L25](/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts#L25)
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`).
| image_key | image,mapillary,image,wikidata,wikimedia_commons,image,panoramax,image,image | The keys given to the images, e.g. if <spanclass='literal-code'>image</span> is given, the first picture URL will be added as <spanclass='literal-code'>image</span>, the second as <spanclass='literal-code'>image:0</span>, the third as <spanclass='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated |
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...
| tags_to_apply | _undefined_ | 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 |
| message | _undefined_ | The text to show to the contributor |
| image | _undefined_ | An image to show to the contributor on the button |
| id_of_object_to_apply_this_one | _undefined_ | 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 |
| maproulette_id | _undefined_ | If specified, this maproulette-challenge will be closed when the tags are applied. This should be the `id` of the individual task, _not_ the task_id (which corresponds with the challenge). |
These special visualisations are (mostly) interactive components that most elements get by default. You'll normally won't need them in custom layers. There are also a few miscellaneous elements supporting the map UI.
| zoomlevel | 18 | 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 |
| idKey | id | The key of one or more properties of the feature, semi-colon separated. 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. |
| class | h-40 rounded | CSS-classes (space-separated) that should be applied onto the container |
The special element which shows the questions which are unknown. 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. Note that the questionbox which is added by default will blacklist 'hidden'. If both a whitelist and a blacklist are given, will show questions having at least one label from the whitelist but none of the blacklist. |
| show_all | _undefined_ | Either `no`, `yes` or `user-preference`. Indicates if all questions should be shown at once |
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)
| image_key | image;mapillary;image;wikidata;wikimedia_commons;image;panoramax;image;image | The keys given to the images, e.g. if <spanclass='literal-code'>image</span> is given, the first picture URL will be added as <spanclass='literal-code'>image</span>, the second as <spanclass='literal-code'>image:0</span>, the third as <spanclass='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated |
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
| name | default | description |
-----|-----|----- |
| mode | closed | Either `open` or `closed`. If `open`, then the image carousel will always be shown |
| readonly | _undefined_ | If 'readonly' or 'yes', will not show the 'link'-button |
| subjectKey | name | The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b> |
| fallback | _undefined_ | The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value |
| question | _undefined_ | The question to ask during the review |
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
| subjectKey | name | The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b> |
| fallback | _undefined_ | The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value |
| subjectKey | name | The key to use to determine the subject. If the value is specified, the subject will be <b>tags[subjectKey]</b> and will use this to filter the reviews. |
| fallback | _undefined_ | The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value |
| subjectKey | name | The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b> |
| fallback | _undefined_ | The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value |
| question | _undefined_ | The question to ask in the review form. Optional |
`{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 QR-code which shares the current URL and adds the login token. Anyone with this login token will have the same permissions as you currently have. Logging out from this session will also log them out
| name | default | description |
-----|-----|----- |
| text | _undefined_ | Extra text on the side of the QR-code |
| textClass | _undefined_ | CSS class of the the side text |
| header | _undefined_ | The _identifier_ of a single tagRendering. This will be used as header |
| labels | _undefined_ | A `;`-separated list of either identifiers or label names. All tagRenderings matching this value will be shown in the accordion |
| blacklist | _undefined_ | A `;`-separated list of either identifiers or label names. Matching tagrenderings will _not_ be included, even if they are in `labels` |
Defined in [/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L176](/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L176)
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
Defined in [/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L96](/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L96)
| featureId | _undefined_ | The key of the attribute which contains the id of the feature from which to use the tags |
| tagRenderingId | _undefined_ | 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 |
Defined in [/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L23](/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L23)
Defined in [/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L20](/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L20)
| class | _undefined_ | CSS-classes to add to the element |
| download | _undefined_ | 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 |
| icon | _undefined_ | If set, show this icon next to the link. You might want to combine this with `class: button` |
Defined in [/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L147](/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L147)
Defined in [/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L212](/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L212)
#### Example usage of open_in_iD
`{open_in_iD()}`
### open_in_josm
Opens the current view in the JOSM-editor
Defined in [/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L226](/src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts#L226)
Defined in [/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L109](/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L109)
Defined in [/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L68](/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L68)
`{wikidata_label()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the label itself
### wikipedia
A box showing the corresponding wikipedia article(s) - based on the **wikidata** tag.
| name | default | description |
-----|-----|----- |
| keyToShowWikipediaFor | wikidata;wikipedia | 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 |
Defined in [/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L39](/src/UI/SpecialVisualisations/WebAndCommunicationSpecialVisualisations.ts#L39)
`{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
| key | _undefined_ | 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 `<key>:nl=yes` if _nl_ is picked |
| question | _undefined_ | What to ask if no questions are known |
| render_list_item | {language()} | How a single language will be shown in the list of languages. Use `{language}` to indicate the language (which it must contain). |
| render_single_language | _undefined_ | What will be shown if the feature only supports a single language |
| no_known_languages | _undefined_ | The text that is shown if no languages are known for this key. If this text is omitted, the languages will be prompted instead |
| feature_ids | _undefined_ | A JSON-serialized list of IDs of features to apply the tagging on |
| keys | _undefined_ | One key (or multiple keys, seperated by ';') of the attribute that should be copied onto the other features. |
| text | _undefined_ | The text to show on the button |
| autoapply | _undefined_ | 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 |
| overwrite | _undefined_ | 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)}
This document is autogenerated from [src/UI/SpecialVisualizations.ts](https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/src/UI/SpecialVisualizations.ts)
