Page History
VEF-based viewers allow users to style the popup and sidebar metadata that appears appear when users click on features on the map, improving readability and visualization. Templates are based on the Markdown language and allow for flexible customization of metadata rendering. Predefined function calls allow the use of advanced visualizations, such as displaying charts or a video player. Without the use of templates, the original metadata is displayed in a simple table, using the technical names of each property.
...
A predefined list of function calls can be used to perform additional metadata transformations. Function calls must also be enclosed in curly brackets and use round brackets to enclose parameters.
Function parameters can be a string or a reference to a property from the properties, layer, or geometry object. When passing numbers, they must be passed as strings enclosed in quotes.
| Notation | Explanation |
|---|---|
{properties.expediton} | Accessing the Property "expedition" from Access the value of the expedition property of the clicked feature |
{properties["general.name"]} | Accesses Access the value of the "event.name" property of the clicked feature. Dot notation cannot be used here because the property name itself contains a dot. |
{layer.name} | Acccesses Acces the name of the layer itself. |
{formatDate(properties.date_time_end)} | Calls Call a custom function to format a date string using the " date_time_end" property of the clicked feature as a parameter. |
{addFilterButton("device", properties.device)} | Calls Call a custom function with two parameters to display a filter button in the table column that filters by device. |
Available Functions
| Name | Description |
|---|---|
formatLatLng(latitude, longitude) | Format lat/lng into a readable string with decimal degrees. Example: {formatLatLng(properties.begin_latitude, properties.begin_longitude)} |
formatGeometry(geometry) | Format the geojson GeoJSON geometry and display it as human-readable coordinates. Works only for type=pointPOINT geometries. Example: {formatGeometry(geometry)} |
addFilterButton(name, value) | Add a button to request filtering by an attribute. Example: {addFilterButton("platform", properties.platform)} |
formatDate(isoDateString) | Make ISO timestamps more readableImprove ISO timestamp readability. Example: {formatDate(properties.date_time_start)} |
isDefined(valueToCheck, then, else) | Returns Return the given string only if the first value is not null or undefined. Used as a way to implement conditions. Uses the optional Example: {isDefined(properties.date_time_end, "Date Time Start", "Date Time")} |
concatIfDefined(concat1, concat2, ...) | Concatenate values if each value is defined (not null or undefined). Example: {concatIfDefined(properties.elevation, " m")} |
encodeURLComponent(urlComponent) | Encode String a string to URL Compatible -compatible characters. Example: {encodeURLComponent("PS133/2_0_Underway-6")} |
round(number, decimals) | Round a number to the specified decimal places. Example: {round("1.12345", "3")} |
splitString(string, substring, index) | Split a string at a substring and return the given index. Example: {splitString("Hello World", " ", "1")} |
substring(string, startIndex, endIndex) | Split a string at an index and get the substring. Example: {substring("Hello World", "0", "5")} |
setTitle(str1, str2, ...) | Defines Define the title in data-title for the entire popup feature. The PopupRenderer will extract the title from this property to display it in the header. This is set directly in the container. Example: {setTitle("Event: ", properties.event)} |
parseJSON(jsonstring, key1, key2, ...) | Parses Parse a json JSON string and returns return the value of the given property identified by the list of keys. Example: {parseJSON('{"outer": {"inner": "Hello World"}}', "outer", "inner")} |
noCopy() | Prevents Prevent the copy button from being displayed in a table row. |
hideOnSiteStart(site)hideOnSiteEnd(site) | Prevents Prevent content from being rendered by inserting a comment when the page matches. These functions must be used together to mark an area to be remove. Example: {hideOnSiteStart("gallery")} ...... {hideOnSiteEnd("gallery")} |
parseMarkdown(text) | Parse markdown Markdown text to htmlHTML. Useful when text from a variablean attribute/property is formatted as markdown e.g. layer.abstract Example: {parseMarkdown(layer.abstract)} |
joinArray(array, seperator) | Join Array array values as a string. Default seperator separator is ", "a comma ( Example: {joinArray(array, " - ")} |
displayLayerLegend() | Display the active layers layer's legend graphic. |
displayImage(src, width (optional), height (optional), srcset (optional)) | Display an image. Clicking on an image opens it in a full-screen, zoomable lightbox. Example: {displayImage(propertie.picture, properties.width, properties.height, properties.srcset)} |
displayVideo(media, width, height, thumbnail (optional), cover (optional), poster (optional)) | The following keys are supported: "media" (url to media file), thumbnail (url to webvtt file for seekbar thumbnails), cover (url to video cover) and poster (url to background poster on video player loading). They contain the respective urls. Example: {displayVideo(properties.video, properties.width, properties.height, properties.thumbnail, propertie.cover)} |
displayVideoPlayerKeys() | Displays Display a link to open a the documentation of video player hotkeys. |
...
The resulting HTML markup is modified by the VEF-based viewer after the templates have been evaluated for optimal visualization of the metadata.
- Headlines are grouped into collapsible sections. H3 with
###is recommended - Empty collapsible groups are not rendered
- Copy button automatically added to table rows to copy a property value
- Removes table rows with empty content in the second cell/column
Recommendations
- The content should be organized vertically because the as pop-ups and sidebars the sidebar have a limited width.
- Ideally, the metadata is structured in a two-column table, as in the following example
...
Overview
Content Tools