A versatile and lightweight toolkit for building a simple web map.
This project is maintained by bcgov
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": String
The type of layer object.
Must be one of these values:
"esri-dynamic"
,
"vector"
,
or
"wms"
.
"id": String
The unique identifier for the layer.
Conventionally it is all lowercase with -
separating words.
This MUST be unique within the configuration.
"title": String
The title to show in the "layers"
tool panel.
"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": Boolean
If true
, then the layer is visible when the map initializes.
Default is false
.
"isQueryable": Boolean
If true
, the layer is able to be queried by the "identify"
tool.
Defaults to true
.
"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": 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": String
The URL that will be used as a link to additional metadata of this layer.
"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": String
The name of the attribute to use as the title for a feature from this layer.
"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.
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": 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": Boolean
If true
, the layer should use point clustering.
Only relevant for point geometry layers.
The default is false
.
"clusterOption": Object
The cluster option object used to influence the rendering of clusters of points.
"useHeatmap": Boolean
If true
, the layer should use heatmap clustering.
Only relevant for point geometry layers.
The default is false
.
"style": Object | Array
The style object used to render the features from this data source.
"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:
value
: the value of the feature’s property
attributelabel
: an optional description of features matching this condition, for use in legends; if omitted; value will be usedstyle
: an object of style properties and valuesoperator
: an optional operator to use to compare the condition value to the feature’s property value. Operators are:
>
greater than, for number values>=
greater than or equal to, for number values<
less than, for number values<=
less than or equal to, for number valuesexists
a value exists (is not null or undefined)!=
not equal to=
equal. This is also the default if no operator is given.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": 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": String
The URL that points to a GeoJSON data source.