Skip to content

Map Components

Map

Renders a Map onto the page.

{% load groundwork_geo %}

{% map class="my-map-class" center="[4.53,52.22]" zoom=9 %}
<!-- Map config tags go here -->
{% endmap %}

Parameters

element
Optional. Return a cache key given the arguments to the function
style
Optional. Override the map style on a per-map basis. Defaults to the MAPBOX_DEFAULT_STYLE django config.
api_key
Optional. Override the map API key on a per-map basis. Defaults to the MAPBOX_PUBLIC_API_KEY django config.
center
Optional. Initial [lon,lat] location to center the map on.
zoom
Optional. Initial zoom value. Defaults to 2.

Any additional arguments are passed to the map as attributes.

<div
    class="my-map-class"
    data-controller="map"
    data-map-api-key-value="..."
    data-map-api-center-value="[4.53,52.22]"
    data-map-api-zoom-value="9"
>
    <!-- Map config tags go here -->
    <div data-map-target="canvas"></div>
</div>

Values

api-key
A valid mapbox public API key
center
JSON array representing a [lon,lat] pair to initially center the map on.
zoom
Initial map zoom value. Defaults to 2.
style
Style for the map. Defaults to mapbox/streets-v11.

Targets

canvas
Required. An element to render the map into.
config
One or more map config elements. These should have a controller that subclasses MapConfigController

Map source

Adds a datasource to a map.

{% load groundwork_geo %}

{% map %}
    {% map_source id="my_datasource_id" data=my_datasource %}
{% endmap %}

Parameters

id
ID for the datasource made available to layers
data
JSON object conforming to the Mapbox source specification
<div
    data-controller="map"
    data-map-api-key-value="..."
>
    <div
        data-controller="map-source"
        data-map-target="config"
        data-map-source-id-value="my_datasource_id"
        data-map-source-data-value='{"type": "geojson", "url": "mapbox://mapbox.mapbox-terrain-v2"}'
    >
    </div>
    <div data-map-target="canvas"></div>
</div>

Parameters

id
ID for the datasource made available to layers
data
JSON object conforming to the Mapbox source specification

Map layer

Adds a layer to a map.

{% load groundwork_geo %}

{% map %}
    {% map_layer layer=my_layer %}
{% endmap %}

Parameters

layer
JSON object conforming to the Mapbox layer specification
<div
    data-controller="map"
    data-map-api-key-value="xxx"
>
    <div
        data-controller="map-layer"
        data-map-target="config"
        data-map-layer-layer-value='{"id": "terrain-data", "type": "line", "source": "mapbox-terrain", ...}'
    >
    </div>
    <div data-map-target="canvas"></div>
</div>

Parameters

layer
JSON object conforming to the Mapbox layer specification