Skip to content

Static map card

The Static map card renders configured GeoJSON building layers and outdoor markers with Leaflet.

When to use it

Use it for a fixed floor plan, building layout, or marker set embedded in dashboard JSON. Use Dynamic map when marker coordinates should follow live entity data.

Live example

The Card Lab mounts the production map with one deterministic site marker. External map tiles remain blocked by the documentation sandbox.

Open the Static map Card Lab in a new page

Requirements

Requirement Value
Dashboard types Standard
Minimum size 2 columns by 2 rows
Data GeoJSON and marker objects stored in the card configuration
Backend capabilities None; browser access to OpenStreetMap tiles is required
Permissions Browser geolocation permission when enabled

Configuration

This card has no guided editor in SDK 5.2.0; configure it in expert JSON. The paths below are relative to cardConfig.data.

mapCenter

Property Value
Type Object
Required No
Default Map fallback near Bern when no features exist
Values { "lat": number, "lng": number }

Sets the initial center when both coordinates are truthy.

geoJsonArray

Property Value
Type Nested array of GeoJSON FeatureCollections
Required No
Default Empty array at runtime
Values Building level groups

Supplies floor layers and indoor points.

geoJsonBaseLayer

Property Value
Type Array of GeoJSON FeatureCollections
Required No
Default Empty array at runtime
Values Building base geometries

Supplies the building outlines used for centering and nearest-building information.

markers

Property Value
Type Array of marker objects
Required No
Default No outdoor markers
Values Markers with latLng, icon, and optional detail fields

Adds configured outdoor markers.

markers[].latLng

Property Value
Type Object
Required Yes
Default No default
Values { "lat": number, "lng": number }

Positions the marker.

markers[].icon

Property Value
Type string
Required Yes
Default No default
Values An icon key supported by the map configuration

Selects the marker icon.

markers[].title

Property Value
Type string
Required No
Default No title
Values Plain text

Sets the marker detail heading.

markers[].description

Property Value
Type string
Required No
Default No description
Values Plain text

Stores a description on the marker object; the outdoor detail renderer uses markerMarkdownText for its body.

Property Value
Type string
Required No
Default No link
Values Any string

The production Leaflet card does not navigate this value in SDK 5.2.0.

markers[].markdownContext

Property Value
Type Object
Required No
Default Empty interpolation context
Values JSON object

Provides the data root for markerMarkdownText interpolation.

markerMarkdownText

Property Value
Type Markdown string with interpolation
Required No
Default Empty marker detail
Values Markdown with {{ expression }} tokens

Defines the detail body for clicked outdoor markers.

allowUserPosition

Property Value
Type Boolean
Required No
Default false
Values true or false

Enables the user-location control.

defaultShowUserPosition

Property Value
Type Boolean
Required No
Default false
Values true or false

Displays location initially when allowed, permission is granted, and the reader has no stored preference.

Examples

One fixed site marker

{
  "cardId": "map",
  "data": {
    "mapCenter": { "lat": 46.948, "lng": 7.447 },
    "geoJsonArray": [],
    "geoJsonBaseLayer": [],
    "markers": [
      {
        "latLng": { "lat": 46.948, "lng": 7.447 },
        "icon": "device",
        "title": "Core site",
        "markdownContext": { "status": "Operational" }
      }
    ],
    "markerMarkdownText": "Status: **{{ status }}**"
  }
}

The map centers on the marker and shows its interpolated status when selected.

Behavior

The map clusters outdoor markers, chooses the nearest building for indoor controls, and switches configured floor layers. It auto-centers on all available features after the map is ready.

Limitations and safety

Large GeoJSON payloads increase dashboard configuration size and browser rendering cost. Enabling geolocation should be an explicit operational decision.

See Dynamic map.