STRUCTURED LOCATION
Coordinates stay explicit
The shared model owns markers and routes; target generators own the visual map surface.
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.
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.08PRESENTATION 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.
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.08MARKERS
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 dataThere 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 dataThere are no records to display | ||