Rich pop-up configuration

[NicoledeGreef]

Allow authors to specify HTML to give output structure to feature pop-ups e.g. tables and font formatting tags Support attribute value(s) along with static text labels, e.g. Well ID: {well id value} Dynamic hyperlink generation, e.g. http://www.url.com/page?item={some id} Embed videos, etc. sky's the limit in terms of html support

See DMF KML pop-up support configuration as an example. Example site: BC Parks

[qqnluaq]

add code to detect hyperlink in attribute values, and convert to link: easy SMK already supports using a description attribute as the content of the identify popup. add configuration to layers to support a custom identify popup on a per-layer basis, with a template mechanism for substitution of attribute values.

[cpspicer]

Just need to honor KML styles - see pop-up configuration in the BC Parks KML file. That's the target.

[cpspicer]

Could be considered a duplicate with support for KML uploaded layers. The primary goal would be to honor the KML style instead of over riding it. Example in the 2018 Parks KML file added to item #23

[qqnluaq]

Feature Popup Template

Configuration

{
    "layers": [
        {
            "id": <layer-id>,
            "popupTemplate": <template>
        }
    ]
}

The <template> can be a chunk of HTML that is treated as a Vue template.

If the <template> starts with a @, it names an existing template. There are 3 templates built into SMK:

• "@feature-properties" Displays all the properties of the feature, using the raw property names.

• "@feature-attributes" Displays the properties of the feature, using the attributes property from the layer. This will display only the attributes marked visible, and uses the title of the attribute.

• "@feature-description" Displays the description property of the feature as literal HTML.

Template context

If the <template> is a Vue template, the props passed to the component will be:

• layer The layer containing the feature

  • .id The identifier of the layer

  • .title The title of the layer

  • .attributes [May not be present] The list of attributes configured for this layer.

  • .id The identifier of the attribute

  • .name The name of the feature property (ie, the column name)

  • .title The title (human readable) defined for the feature property

  • .visible If the attribute is to be made visible

• feature The feature to be displayed

  • .id The identifier of the feature

  • .title The title of the feature

  • .properties An object containing the properties of the feature. The key of an item is the property name. The value of the item is property's value.

[NicoledeGreef]

I have been able to customize pop-up content but the UI aspect of doing so is perhaps not rock solid in terms of usability. It's hard to tell whether you're in code mode or preview mode and I have lost changes once or twice when I was sure I saved. Not sure it was user error when this happened but it's possible. I will move this ticket to verified based on my very basic implementation':

<div>
<div><h1>{{ feature.title }}</h1></div>
<hr>
<div><b>Street Address:</b> {{ feature.properties['addressString'] }}&nbsp;&nbsp;{{ feature.properties['POSTAL_CODE'] }}</div>
<div><b>Operator:</b> {{ feature.properties['OPERATOR_NAME'] }}</div>
<div><b>Health Authority:</b> {{ feature.properties['HEALTH_AUTHORITY'] }}</div>
<div><b>Type:</b> {{ feature.properties['TYPE'] }}</div>
<br>
</div>