Page History
...
The following screenshots are taken from a VEF-based viewer using showing the metadata of the same clicked featuregeometry on the map.
| Unstyled Metadata | Styled Metadata |
|---|---|
 |
|
...
The metadata templates are based on the lightweight markup language Markdown. Markdown has a lot of flexibility for formatting text and is human-readable in its unparsed form.To display the metadata
The root for the displayed metadata is structured like a GeoJSON feature and contains a geometry, properties, and layer object. To display the metadata properties, they must be enclosed in curly braces.
The metadata is inside an object and can be accessed using dot notation or like dictionary entries.The root for the displayed metadata is structured like a GeoJSON feature and contains a geometry, properties, and layer object.
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} | Access the value of the expedition property of the clicked feature. |
{properties["general.name"]} | 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} | Acces the name of the layer itself. |
{formatDate(properties.date_time_end)} | 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)} | 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.
|
formatGeometry(geometry) | Format the GeoJSON geometry and display it as human-readable coordinates. Works only for POINT geometries.
|
addFilterButton(name, value) | Add a button to request filtering by an attribute.
|
formatDate(isoDateString) | Improve ISO timestamp readability.
|
formatUnit(value, unit, targetUnit (optional), precision (optional)) | Improve the readability of numbers by simplifying their representation with a unit prefix.
|
isDefined(valueToCheck, then, else) | Return the given string only if the first value is not null or undefined. Used as a way to implement conditions. Uses the optional
|
concatIfDefined(concat1, concat2, ...) | Concatenate values if each value is defined (not null or undefined).
|
encodeURLComponent(urlComponent) | Encode a string to URL-compatible characters.
|
round(number, decimals) | Round a number to the specified decimal places.
|
splitString(string, substring, index) | Split a string at a substring and return the given index.
|
substring(string, startIndex, endIndex) | Split a string at an index and get the substring.
|
setTitle(str1, str2, ...) | Define the title |
for the entire popup |
/sidebar content. This title will be displayed in the header of the popup/sidebar
| |
parseJSON(jsonstring, key1, key2, ...) | Parse a JSON string and return the value of the given property identified by the list of keys.
|
noCopy() | Prevent the copy button from being displayed in a table row. |
hideOnSiteStart(site)hideOnSiteEnd(site) | 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 removed.
|
parseMarkdown(text) | Parse Markdown text to HTML. Useful when text from an attribute/property is formatted as markdown.
|
joinArray(array, seperator) | Join array values as a string. Default separator is a comma (
|
displayLayerLegend() | Display the active 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.
|
displayVideo(media, width, height, thumbnail (optional), cover (optional), poster (optional)) | Display a video in a video player. The following arguments 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.
|
displayVideoPlayerKeys() | Display a link to open the documentation of video player hotkeys. |
HTML Post-Processing
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 recommendedUsing ### for headlines in 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
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
{isDefined(properties.attachment_url, "<h3>Cruise Overview</h3>")}
{displayImage(properties.attachment_url)}
{isDefined(properties.attachment_url, "<h3 class='collapsed'>Measurement Plot</h3>")}
{marehubOverviewPlot()}
### Space & Time
| | |
|--|--|
| {isDefined(properties.date_time_end, "Date Time Start", "Date Time")} | {formatDate(properties.date_time_start)} |
| Date Time End | {formatDate(properties.date_time_end)} |
| Coordinates | {formatGeometry(geometry)} |
| Elevation | {concatIfDefined(properties.elevation, " m")} |
### Event
| | |
|--|--|
| Expedition | [{properties.expedition}](https://marine-data.de/?site=expedition&expedition={encodeURLComponent(properties.expedition)}") {addFilterButton("expedition", properties.expedition)} |
| Expedition Alias | {properties.expedition_alias} |
| Event | [{properties.event}](https://marine-data.de/?site=data&qf=events.name/{encodeURLComponent(properties.event)}") {addFilterButton("event", properties.event)} |
| Event Alias | {properties.event_alias} |
| Platform | {properties.platform} {addFilterButton("platform", properties.platform)} |
| Device | {properties.device} {addFilterButton("device", properties.device)} |
| Sensor URI | [{properties.sensor_uri}]({properties.sensor_uri}) |
### Data
| | |
|--|--|
| Aggregation Type | {properties.ov_type} {addFilterButton("ov_type", properties.ov_type)} |
| Current Velocity | {getMarehubOverviewValue("values_mag")} |
| Current Direction | {getMarehubOverviewValue("values_dir", "°")} |
| {isDefined(properties.parameter_name, properties.parameter_name, "Value")} | {getMarehubOverviewValue()} |
| Method | {properties.method} {addFilterButton("method", properties.method)}|
| {isDefined(properties.depth_type, properties.depth_type, "Depth")} | {getMarehubOverviewValue("depths", "m")} |
#### View Original Data
| | |
|--|--|
| Original Parameter Name | {properties.parameter_origin_name} |
| Original UC Name | {properties.uc_origin_name} |
| Original VC Name | {properties.vc_origin_name} |
| Original Unit | {properties.parameter_origin_unit} |
| Original Method | {properties.origin_method} |
### References
{properties.citation}
| | |
|--|--|
| License | {properties.license} |
| DOI | [{properties.doi}]({properties.doi}) |
| Data URL | [{properties.data_url}]({properties.data_url}) |
| Metadata URL |[{properties.metadata_url}]({properties.metadata_url}) |
| SOP |[{properties.sop_url}]({properties.sop_url}) |
| Provider | {properties.provider} {addFilterButton("provider", properties.provider)} |
| Dataset | {properties.dataset} |
| Curator | {properties.curator} | |
...
Overview
Content Tools