Technical details on the use of maps

API-keys

The API-key that is used on this page is just for use in the Designsystem, and is limited to the relevant domains.

Your project you need to provide your own API-key from Maptiler when using the Vue component or using the static map API.

If you do not change the key, you will get 403 Forbidden.

GeoJSON suported features

The map supports the following GeoJSON features:
FeatureCollection, with the following feature types: Polygon, LineString and Point.

It does not support GeometryCollection or the Multi*-variants of the feature types.

Map data, properties, state and reactivity

Providing data

For simple maps, with one or a few point features, you can provide an array of javascript objects to the points property.

Each object must contain a longitude (float) and latitude (float), optionally openPopup (bool) and popupContent (string / HTML).

For more complex maps, or maps that also needs to show features of the type polygons and/or line, you can provide data with the geoJson property.

The GeoJSON can be provided as an URL or a Javascript object.

State

The map state property has the following options:

• longitude and latitude (center of map, roughly in the center of Oslo)
• zoom (zoom level, 11)
• showPopups (bool, true)
• autoFitToBounds (bool, true), see details below.

If you want to override any of these, you should provide a complete state (all options)

Fit map to bounds of GeoJSON-data

The map automatically sets a center point and zooms to fit the maximum bounds of the given GeoJSON-data

If a new GeoJSON dataset is provided after load, the map will automatically pan and zoom to the bounds of the new data.

This behaviour overrides the center point and zoom level in state.

To disable, set the property autoFitToBounds in the state to false.

This behaviour only works then using geoJson as a data source.

Clustering

To have features of the type "Point" group together, you can set the clusteredPointsproperty to true.

This only works then using geoJson as a data source.

Reactivity and load later

You can change the data or state at any time, or load the map on demand. Please check the javascript and developer tabs for examples.

Ratio (width / height)

The map will take 100% width.

To control the height of the map, you can provide any class/classes from the ratio helper (see: general -> helpers -> ratio) to the ratio property.

The default ratio is 16:9

Resize

By calling resize on the map instance the map will recalculate and take the available space of the container.

Popups

Popups appear on click on a feature if the following conditions are met:

• showPopups is true, this is the default but can be set to false by overriding the property state.
• When using geoJson: the feature has the property popupContent.
• When using points: a key with the name popupContent added to the array (per point).
• There is actually a string with data/HTML in the key / property.

Popups appear after load if the following conditions are met:

• All of the conditions for on click above are met.
• When using geoJson: the feature is a "Point" and has the property openPopup, with a value of true.
• When using points: openPopup is added as a key to the array (per point), with a value of true.
• clusteredPoints is false.
• Note: you should limit the number of automatically opened popups to 1 or 2.

Popup event system

The map will fire events on the window object when opening and/or closing a popup if the following conditions are met:

• You are using geoJson as the data source.
• On popup opened - the feature has the property: popupEvent with a string value (name).
• On popup closed - the feature has the property: popdownEvent with a string value (name).

You can add a custom payload to the fired events by adding the property popupEventData to the feature.

The payload can be a Javascript object or a valid JSON-string that will be parsed. Default value is null

In your project you can listen for the fired events like this:

window.addEventListener('eventNameFromPopupEvent', (event) => { const payload = event.detail.data; doMagic(payload); });

Highlight a polygon

If you need to highlight a polygon, add the property highlight with a value of true to the polygon.

It will get another fill and border colour than normal polygons.