[//]: # (WARNING: this file is automatically generated. Please find the sources at the bottom and edit those sources) # Special tag renderings 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 # Table of contents 1. [Special tag renderings](#special-tag-renderings) 2. [Using expanded syntax](#using-expanded-syntax) 3. [Overview of all special components](#overview-of-all-special-components) - [UI](#ui) + [braced](#braced) + [create_copy](#create_copy) + [preset_description](#preset_description) + [show_icons](#show_icons) + [title](#title) + [translated](#translated) - [data](#data) + [all_tags](#all_tags) + [canonical](#canonical) + [direction_absolute](#direction_absolute) + [direction_indicator](#direction_indicator) + [opening_hours_state](#opening_hours_state) + [opening_hours_table](#opening_hours_table) + [points_in_time](#points_in_time) + [statistics](#statistics) - [data_import](#data_import) + [auto_apply](#auto_apply) + [compare_data](#compare_data) + [conflate_button](#conflate_button) + [import_button](#import_button) + [import_way_button](#import_way_button) + [linked_data_from_website](#linked_data_from_website) + [maproulette_set_status](#maproulette_set_status) + [plantnet_detection](#plantnet_detection) + [tag_apply](#tag_apply) - [default](#default) + [add_new_point](#add_new_point) + [delete_button](#delete_button) + [if_nothing_known](#if_nothing_known) + [minimap](#minimap) + [move_button](#move_button) + [qr_code](#qr_code) + [questions](#questions) + [share_link](#share_link) + [split_button](#split_button) - [favourites](#favourites) + [favourite_icon](#favourite_icon) + [favourite_status](#favourite_status) - [images](#images) + [image_carousel](#image_carousel) + [image_upload](#image_upload) + [nearby_images](#nearby_images) - [notes](#notes) + [add_image_to_note](#add_image_to_note) + [add_note_comment](#add_note_comment) + [close_note](#close_note) + [open_note](#open_note) + [visualize_note_comments](#visualize_note_comments) - [reviews](#reviews) + [create_review](#create_review) + [list_reviews](#list_reviews) + [rating](#rating) + [reviews](#reviews) - [settings](#settings) + [clear_caches](#clear_caches) + [clear_location_history](#clear_location_history) + [disabled_questions](#disabled_questions) + [gps_all_tags](#gps_all_tags) + [gyroscope_all_tags](#gyroscope_all_tags) + [import_mangrove_key](#import_mangrove_key) + [language_picker](#language_picker) + [login_button](#login_button) + [logout](#logout) + [pending_changes](#pending_changes) + [qr_login](#qr_login) + [storage_all_tags](#storage_all_tags) - [tagrendering_manipulation](#tagrendering_manipulation) + [group](#group) + [multi](#multi) + [steal](#steal) - [ui](#ui) + [preset_type_select](#preset_type_select) - [web_and_communication](#web_and_communication) + [fediverse_link](#fediverse_link) + [link](#link) + [mapillary_link](#mapillary_link) + [open_in_iD](#open_in_id) + [open_in_josm](#open_in_josm) + [send_email](#send_email) + [wikidata_label](#wikidata_label) + [wikipedia](#wikipedia) - [Unclassified elements](#unclassified-elements) + [export_as_geojson](#export_as_geojson) + [export_as_gpx](#export_as_gpx) + [histogram](#histogram) + [language_chooser](#language_chooser) + [multi_apply](#multi_apply) + [upload_to_osm](#upload_to_osm) # Using expanded syntax 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) # Overview of all special components ## UI ### braced Show a literal text within braces | name | default | description | -----|-----|----- | | text | _undefined_ | The value to show | Defined in [/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L296](/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L296) #### Example usage of braced `{braced()}` ### create_copy Allow to create a copy of the current element Defined in [/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L315](/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L315) #### Example usage of create_copy `{create_copy()}` ### preset_description 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) #### Example usage of show_icons `{show_icons(,inline-flex mx-4)}` ### title Shows the title of the popup. Useful for some cases, e.g. 'What is phone number of {title()}?' Defined in [/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L281](/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L281) #### Example usage of title `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 | Defined in [/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L251](/src/UI/SpecialVisualisations/UISpecialVisualisations.ts#L251) #### Example usage of translated `{translated(value)}` ## data Visualises data of a POI, sometimes with data updating capabilities ### all_tags Prints all key-value pairs of the object - used for debugging Defined in [/src/UI/Popup/DataVisualisations.ts#L270](/src/UI/Popup/DataVisualisations.ts#L270) #### Example usage of all_tags `{all_tags()}` ### 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 | Defined in [/src/UI/Popup/DataVisualisations.ts#L163](/src/UI/Popup/DataVisualisations.ts#L163) #### 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), ... ### direction_absolute Converts compass degrees (with 0° being north, 90° being east, ...) into a human readable, translated direction such as 'north', 'northeast' | name | default | description | -----|-----|----- | | key | _direction:centerpoint | The attribute containing the degrees | | offset | 0 | Offset value that is added to the actual value, e.g. `180` to indicate the opposite (backward) direction | Defined in [/src/UI/Popup/DataVisualisations.ts#L47](/src/UI/Popup/DataVisualisations.ts#L47) #### Example usage of direction_absolute `{direction_absolute(_direction:centerpoint,0)}` ### direction_indicator Gives a distance indicator and a compass pointing towards the location from your GPS-location. If clicked, centers the map on the object Defined in [/src/UI/Popup/DataVisualisations.ts#L34](/src/UI/Popup/DataVisualisations.ts#L34) #### Example usage of direction_indicator `{direction_indicator()}` ### opening_hours_state A small element, showing if the POI is currently open and when the next change is | name | default | description | -----|-----|----- | | key | opening_hours | The tagkey from which the opening hours are read. | | prefix | _empty string_ | Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__ | | postfix | _empty string_ | Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__ | Defined in [/src/UI/Popup/DataVisualisations.ts#L126](/src/UI/Popup/DataVisualisations.ts#L126) #### Example usage of opening_hours_state `{opening_hours_state(opening_hours,,)}` ### opening_hours_table Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'. | name | default | description | -----|-----|----- | | key | opening_hours | The tagkey from which the table is constructed. | | prefix | _empty string_ | Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__ | | postfix | _empty string_ | Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__ | Defined in [/src/UI/Popup/DataVisualisations.ts#L87](/src/UI/Popup/DataVisualisations.ts#L87) #### Example usage of opening_hours_table 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)}` ### points_in_time Creates a visualisation for 'points in time', e.g. collection times of a postbox | name | default | description | -----|-----|----- | | key | _undefined_ | The key out of which the points_in_time will be parsed | Defined in [/src/UI/Popup/DataVisualisations.ts#L281](/src/UI/Popup/DataVisualisations.ts#L281) #### Example usage of points_in_time `{points_in_time()}` ### statistics Show general statistics about all the elements currently in view. Intended to use on the `current_view`-layer. They will be split per layer Defined in [/src/UI/Popup/DataVisualisations.ts#L203](/src/UI/Popup/DataVisualisations.ts#L203) #### Example usage of statistics `{statistics()}` ## data_import 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 ### auto_apply 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 | Defined in [/src/UI/Popup/AutoApplyButtonVis.ts#L65](/src/UI/Popup/AutoApplyButtonVis.ts#L65) #### Example usage of auto_apply `{auto_apply(,,,,./assets/svg/robot.svg)}` ### compare_data 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'. 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) #### Example usage of compare_data `{compare_data(,,)}` ### 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. #### Specifying which tags to copy or add 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. 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) #### Importing a dataset into OpenStreetMap: requirements If you want to import a dataset, make sure that: 1. The dataset to import has a suitable license 2. The community has been informed of the import 3. All other requirements of the [import guidelines](https://wiki.openstreetmap.org/wiki/Import/Guidelines) have been followed There are also some technicalities in your theme to keep in mind: 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. #### Disabled in unofficial themes 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 | 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 | | 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 | Defined in [/src/UI/Popup/ImportButtons/ConflateImportButtonViz.ts#L30](/src/UI/Popup/ImportButtons/ConflateImportButtonViz.ts#L30) #### Example usage of conflate_button `{conflate_button(,,Import this data into OpenStreetMap,./assets/svg/addSmall.svg,)}` ### 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. #### Specifying which tags to copy or add 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. 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) #### Importing a dataset into OpenStreetMap: requirements If you want to import a dataset, make sure that: 1. The dataset to import has a suitable license 2. The community has been informed of the import 3. All other requirements of the [import guidelines](https://wiki.openstreetmap.org/wiki/Import/Guidelines) have been followed There are also some technicalities in your theme to keep in mind: 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. #### Disabled in unofficial themes 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 | 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 | | 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 | Defined in [/src/UI/Popup/ImportButtons/PointImportButtonViz.ts#L17](/src/UI/Popup/ImportButtons/PointImportButtonViz.ts#L17) #### Example usage of import_button `{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. #### Specifying which tags to copy or add 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. 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) #### Importing a dataset into OpenStreetMap: requirements If you want to import a dataset, make sure that: 1. The dataset to import has a suitable license 2. The community has been informed of the import 3. All other requirements of the [import guidelines](https://wiki.openstreetmap.org/wiki/Import/Guidelines) have been followed There are also some technicalities in your theme to keep in mind: 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. #### Disabled in unofficial themes 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 | 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 | | 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 | Defined in [/src/UI/Popup/ImportButtons/WayImportButtonViz.ts#L22](/src/UI/Popup/ImportButtons/WayImportButtonViz.ts#L22) #### Example usage of import_way_button `{import_way_button(,,Import this data into OpenStreetMap,./assets/svg/addSmall.svg,,0.05,,0.05,,0.1)}` ### 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. Note: this element is added by default; but is disabled if the theme has the 'more privacy' flag set | name | default | description | -----|-----|----- | | key | website | Attempt to load ld+json from the specified URL. This can be in an embedded