Map
The Map component provides a reusable pattern for displaying maps in the interface.
Basic OpenStreetMap map
Default map centered on Helsingborg using the OpenStreetMap provider.
Map with markers and popup content
Shows multiple markers with custom icons, colors, and popup content using the markers parameter.
Dark styled map
Demonstrates the dark mapStyle variant while keeping the OpenStreetMap provider.
Compact map with custom height
Uses a smaller height and a closer zoom level to fit map content in tighter layouts.
API
| Parameter | Default | Description |
|---|---|---|
|
lat
|
56.046467 | The initial center latitude of the map (number) |
|
lng
|
12.694512 | The initial center longitude of the map (number) |
|
zoom
|
11 | The initial zoom level of the map (number) |
|
mapStyle
|
default | Theming of the map (pale, dark, color, default) |
|
height
|
600px | A css height value including unit (px, vh, %) |
|
markers
|
[] | An array of objects containing lat (number), lng (number), content (string, can be displayed in a popup) icon (string, based on the icon component names) color (string, hex or color name) |
|
provider
|
openstreetmap | The map provider to use (openstreetmap, googlemaps) |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-map--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |