SMK Usage Guide

A versatile and lightweight toolkit for building a simple web map.

This project is maintained by bcgov

SMK / Configuration / Layers

Vector Layer

This is default configuration for the Vector layer. Click on a property name for more information:

{ "layers": [ {
    "type":                "vector",
    "id":                  null,
    "title":               null,
    "opacity":             null,
    "isVisible":           false,
    "isQueryable":         true,
    "minScale":            null,
    "maxScale":            null,
    "metadataUrl":         null,
    "popupTemplate":       null,
    "titleAttribute":      null,
    "attributes":          null,
    "queries":             null,
    "useClustering":       false,
    "clusterOption":       null,
    "useHeatmap":          false,
    "style":               null,
    "conditionalStyles":   null,
    "legend":              null,
    "dataUrl":             null
} ] }

Type Property

"type": String

The type of layer object.

Must be one of these values: "esri-dynamic", "vector", or "wms".

Id Property

"id": String

The unique identifier for the layer. Conventionally it is all lowercase with - separating words.

Note

This MUST be unique within the configuration.

Title Property

"title": String

The title to show in the "layers" tool panel.

Opacity Property

"opacity": Number

The value can be from 0 (completely transparent, invisible) to 1 (opaque). This opacity value is applied over any opacity that may already configured for the layer on the server where it rendered.

IsVisible Property

"isVisible": Boolean

If true, then the layer is visible when the map initializes. Default is false.

IsQueryable Property

"isQueryable": Boolean

If true, the layer is able to be queried by the "identify" tool. Defaults to true.

MinScale Property

"minScale": Number

This value is the denominator of the scale value. The layer is visible if the current scale is greater than the minimum scale value for the layer.

MaxScale Property

"maxScale": Number

This value is the denominator of the scale value. The layer is visible if the current scale is less than the maximum scale value for the layer.

MetadataUrl Property

"metadataUrl": String

The URL that will be used as a link to additional metadata of this layer.

PopupTemplate Property

"popupTemplate": String

A string that contains a Vue template. The template is used to construct the popup that appears when presenting a feature, in the "identify" tool, "query" tool, and "select" tool.

The model that is available to the template:

// layer configuration
layer.id
layer.title
layer.attributes // array of objects: { visible, title, name }

// current feature
feature.id
feature.title
feature.properties // object: attribute key:value

TitleAttribute Property

"titleAttribute": String

The name of the attribute to use as the title for a feature from this layer.

Attributes Property

"attributes": Array

An array of attribute objects. Used to control how feature attributes appear in the popup that is used by the "identify" tool, "query" tool, and "select" tool.

Note

The order of the attribute objects, is the order they will appear in the popup. If this property is null or missing, then the popup will show all the attributes of the feature, using the internal field names. If this property is an empty array ([]), then no attributes will be shown for the feature.

Queries Property

"queries": Array

An array of query objects. These are query definitions which are used by the "query" tool to allow the user to specify query parameters, and show the results of these parameterized queries on the map.

UseClustering Property

"useClustering": Boolean

If true, the layer should use point clustering. Only relevant for point geometry layers. The default is false.

ClusterOption Property

"clusterOption": Object

The cluster option object used to influence the rendering of clusters of points.

UseHeatmap Property

"useHeatmap": Boolean

If true, the layer should use heatmap clustering. Only relevant for point geometry layers. The default is false.

Style Property

"style": Object | Array

The style object used to render the features from this data source.

ConditionalStyles Property

"conditionalStyles": Array

Style attributes applied to features based on feature attribute values. These style attributes override style attributes with the same name in the style property.

Each conditional style has a property, which is the name of a feature attribute, and conditions, an array of objects containing:

In this sample configuration, features having a Station_Type value of Public will be styled as blue, and features where Station_Type is Private will be styled as green.

"conditionalStyles": [
    {
        "property": "Station_Type",
        "conditions": [
            {
                "value": "Public",
                "label": "Public Stations",
                "style": {
                    "strokeColor": "#0000ff",
                    "fillColor": "#0000ff"
                }
            },
            {
                "value": "Private",
                "label": "Private Stations",
                "style": {
                    "strokeColor": "#00ff00",
                    "fillColor": "#00ff00"
                }
            }
        ]
    }
]

This sample configuration styles features having a Charging_Level value of 3 or higher with a white stroke color:

"conditionalStyles": [
    {
        "property": "Charging_Level",
        "conditions": [
            {
                "label": "Fast Charging",
                "operator": ">=",
                "value": 3,
                "style": {
                    "strokeColor": "#ffffff"
                }
            }
        ]
    }
]

Legend Property

"legend": Object

Optional attributes to configure the display of the layer in legends.

"point", "line", "fill": Boolean

Set the shape of the legend swatch. “line” is the default.

"excludeOtherLegendWithDefaultStyling": Boolean

By default, when conditional styles are used, an “Other” legend will be added with a swatch using the styling in the style to represent features that are not matched by any of the conditions. Set excludeOtherLegendWithDefaultStyling to true to exclude the “Other” legend for situations where all of a layer’s features will be matched by the conditions and an “Other” legend is not necessary.

"otherLegendLabelOverride": String

A string value to display instead of “Other” when conditional styles are used.

DataUrl Property

"dataUrl": String

The URL that points to a GeoJSON data source.