Page History
VEF-based viewers enable the user styling of to style popup and sidebar metadata that gets displayed when clicking on features on the map for better readability and visualization. Templates that are based on the Markdown language and allow flexible customization of metadata rendering. Predefined function calls enable the use of advanced visualizations such as displaying diagrams or a video player. Without the use of templates, the original metadata gets displayed in a simple table while using the technical names of each property.
...
A predefined list of function calls can be used to perform additional metadata transformations. Function calls also need to be enclosed in curly brackets and use rounded 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 need to be passed as strings enclosed in quotes.
| 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 itself 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 |
...
- 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 belowThe popup template should not contain more than
HTML Post-Processing
The resulting HTML markup gets altered by the viewer for optimized visualization of metadata after the templates got evaluated.
- Headlines will be grouped in collapsible sections. H3 using ### is recommended
- Empty collapsible groups are not rendered
- A copy button will be added automatically to table rows to copy a property
- Table rows with empty content in the second cell will be removed
Example Template
| 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