DISPLAY

Map

Map provides a portable location surface with deterministic markers, optional route endpoints, controls, scale, and location actions.

STRUCTURED LOCATION

Coordinates stay explicit

The shared model owns markers and routes; target generators own the visual map surface.

PLAYGROUND

Plan an office route

The example combines a centered map, semantic marker labels, a waypoint, route endpoints, scale, location controls, and named actions.

dowe
Map centerLat:4.7109 centerLng:-74.0721 zoom:12 height:"360px" width:"100%" showScale:true showLocationControl:true routeStartLat:4.7109 routeStartLng:-74.0721 routeEndLat:4.65 routeEndLng:-74.09 onLocation:locateUser onLocationError:reportLocationError onRoute:buildRoute scheme:"primary" variant:"soft"
  marker id:"office" lat:4.7109 lng:-74.0721 label:"Dowe office" popup:"Main workspace" icon:"start" onClick:selectOffice
  marker id:"destination" lat:4.65 lng:-74.09 label:"Delivery point" popup:"Route endpoint" icon:"end"
  waypoint lat:4.68 lng:-74.08

PRESENTATION STATES

Tune the map to its context

A map can be interactive for exploration or quiet and compact when it only confirms a stored location.

LOCATION CARD

Disable interaction when the map is a visual confirmation rather than a planning tool.

WAYPOINTS

Use waypoints to describe a route without turning every intermediate point into an actionable marker.

dowe
Map centerLat:4.7109 centerLng:-74.0721 zoom:14 height:"240px" showControls:false interactive:false scheme:"success" variant:"outlined"
  marker id:"office" lat:4.7109 lng:-74.0721 label:"Office" icon:"start"

Map centerLat:4.69 centerLng:-74.08 zoom:11 height:"240px" showScale:true scheme:"info" variant:"soft"
  marker id:"north" lat:4.73 lng:-74.06 label:"North checkpoint" icon:"waypoint"
  waypoint lat:4.69 lng:-74.08

MARKERS

Give every marker an id

Markers require unique static ids plus latitude and longitude. label and popup provide accessible and contextual copy; onClick stays optional.

ROUTES

Declare all four endpoints

A route is either absent or complete: routeStartLat, routeStartLng, routeEndLat, and routeEndLng must appear together.

Marker prop
Type
Default

No data

There are no records to display

API

Map props

Map also accepts common identity, spacing, sizing, visibility, radius, border, and accessibility props.

Prop
Type
Default

No data

There are no records to display