Page History
...
| Notation | Explanation |
|---|---|
| {properties.expediton} | Accessed the property expedition from the clicked feature |
| {properties["general.name"]} | Accesses the property event.name from the clicked feature. Dot notation cannot be used here, because the property name contains a dot. |
| {layer.name} | Acccesses the name of the layer itself |
| {formatDate(properties.date_time_end)} | Calls a custom function to format a date string using the property date_time_end as a parameter |
| {addFilterButton("device", properties.device)} | Calls 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 to a readable string with decimal degrees Example: {formatLatLng(properties.begin_latitude, properties.begin_longitude)} |
| formatGeometry(geometry) | Format the geojson geometry and display it as human readable coordinates. Only works for type=point Example: {formatGeometry(geometry)} |
| addFilterButton(name, value) | Add a button to request filtering by an attribute Example: {addFilterButton("platform", properties.platform)} |
| formatDate(isoDateString) | Make ISO Timestring more readable Example: {formatDate(properties.date_time_start)} |
| isDefined(valueToCheck, then, else) | Only returns the given string if the first value is not null or undefined. Used as a way to implement conditions. Uses optional else-value if not defined. |
| concatIfDefined(concat1, concat2, ...) | Concats values if every value is defined (not null or undefined) |
| encodeURLComponent(urlComponent) | Encode String to URL Compatible characters |
| round(number, decimals) | Round a number to the given decimals 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 the title in data-title for the whole popup feature. The PopupRenderer will extract the title from that property to display it in the header. This is directly set in the container. Example: {setTitle("Event: ", properties.event)} |
| parseJSON(jsonstring, key1, key2, ...) | Parses a json string and outputs the value of the given property identified by the list of keys Example: {parseJSON('{"outer": {"inner": "Hello World"}}', "outer", "inner")} |
| noCopy() | Prevents the copy button to be displayed in a table row |
| hideOnSiteStart(site) hideOnSiteEnd(site) | Prevents content from being rendered by inserting a comment if the site matches. These functions need to be used together to mark an area to be removed Example: {hideOnSiteStart("gallery")} ...... {hideOnSiteEnd("gallery")} |
Recommendations
- The content should be structured vertically, because the popups and sidebars have a limited width
- Ideally the metadata is structured in a two-column table like the example below
- The popup template should not contain more than
...
Overview
Content Tools