VEF-based viewers enable the user styling of 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 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.
The folliowing screenshots are taken from a VEF-based viewer using the same clicked feature
Unstyled Metadata | Styled Metadata |
---|---|
The basis for the metadata templates is the lightweight markup language Markdown. Markdown has a lot of flexiblility for formatting text and is human readable in its unparsed form.
To display the metadata properties, they need to be enclosed in curly brackets. The metadata is inside an object and can be accessed using dot-notation or like entries from a dictionary.
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 also need to be enclosed in curly brackets and use rounded brackets to enclose parameters.
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 |
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")} |
parseMarkdown(text) | Parse markdown text to html. Useful when text from a variable/property is formatted as markdown e.g. layer.abstract Example: {parseMarkdown(layer.abstract)} |
joinArray(array, seperator) | Join Array values as a string. Default seperator is ", " Example: {joinArray(array, " - ")} |
displayLayerLegend() | Display the active layers legend graphic |
The resulting HTML markup gets altered by the viewer for optimized visualization of metadata after the templates got evaluated.
{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} |