Map
import { Map } from '@enmovil/ui-design-system';
A map that shows groups of markers, routes and geofences, with optional drawing tools and place search. It needs a Google Maps API key, passed in apiKey.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
center | LatLngLiteral | No | { lat: 17.385044, lng: 78.486671 } | — | Initial centre of the map as { lat, lng }. Defaults to Hyderabad (17.385044, 78.486671); when it changes the map re-centres, so pass a stable object rather than a new literal on every render. |
zoom | number | No | 8 | — | Initial zoom level of the map. Defaults to 8; when it changes the map zooms to the new level (0 is ignored). |
markerGroups | { key: string; markers: { [key: string]: any; lat: number; lng: number; status?: string | number; label?: string; icon?: string | undefined; }[]; enableClustering?: boolean | undefined; radius?: number | undefined; }[] | undefined | No | [] | — | Groups of markers to show on the map, each with its own clustering and radius settings. Markers can be hidden with the Show Markers filter. |
polylineGroups | { key: string; path: LatLngLiteral[]; color?: string; weight?: number; opacity?: number | undefined; showEndpoints?: boolean | undefined; showArrows?: boolean | undefined; ... 9 more ...; destinationLabel?: string | undefined; }[] | undefined | No | [] | — | Routes to draw on the map, each with its own colour, line style, arrows and start/end markers. |
geofenceGroups | { key: string; type: "circle" | "polygon"; center?: { lat: number; lng: number; }; radius?: number; path?: { lat: number; lng: number; }[] | undefined; strokeColor?: string | undefined; fillColor?: string | undefined; fillOpacity?: number | undefined; strokeWeight?: number | undefined; editab... | No | [] | — | Circular and polygonal areas to draw on the map. They can be hidden with the Show Geofences filter. |
apiKey | string | No | — | — | Google Maps API key used to load the maps script when it is not already on the page. The script is loaded once per page; without a key and without a loaded script the map stays blank and an error is logged. |
className | string | No | — | — | Extra CSS class added to the map wrapper. |
enabledFilters | ("markers" | "geofences" | "viewMarks" | "endpoints")[] | No | [] | — | Filter checkboxes shown above the map: markers (Show Markers), geofences (Show Geofences), viewMarks (View Markers) and endpoints (Show Start/End Points). Nothing is shown when it is empty. Changing any checkbox also turns off the layers whose checkbox is not listed, so list every layer you use. |
filterOptions | { label: string; key: string | string[]; }[] | No | [] | — | Declared, but not used by the component; the checkbox labels are fixed and chosen by enabledFilters. |
defaultShowEndpoints | boolean | No | true | — | Whether route start and end markers are shown at first. Defaults to true; routes still need showEndpoints, and the endpoints filter can change it later. |
defaultViewMarks | boolean | No | false | — | Whether a small dot is drawn at every point of every route at first. Defaults to false; the viewMarks filter can change it later. |
enableDrawing | boolean | No | false | — | Adds the drawing toolbar at the top centre of the map. Turning it off removes the toolbar but keeps the shapes already drawn. |
drawingControls | { drawingModes?: ("circle" | "polygon" | "marker" | "polyline" | "rectangle")[]; markerOptions?: { icon?: string; } | undefined; polylineOptions?: { editable?: boolean | undefined; strokeColor?: string | undefined; strokeOpacity?: number | undefined; strokeWeight?: number | undefined; } | und... | No | — | — | Which shapes the drawing toolbar offers and how they look. Requires enableDrawing, and is only read when the toolbar is created, so later changes are ignored until drawing is turned off and on again. |
defaultDrawingMode | "circle" | "polygon" | "marker" | "polyline" | "rectangle" | null | No | null | — | Drawing tool that is active when the toolbar appears. Defaults to null (pan and select); changing it switches the active tool. Requires enableDrawing. |
enableSearch | boolean | No | false | — | Adds a "Search places..." box at the top left of the map. Picking a result drops a marker on each matching place and fits the map to them. The box uses a fixed element id, so only one map on a page can have search. |
markerGroups
An array of objects. Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
key | string | Yes | Identifies the group. Passed to getInfoWindowContent when one of its markers is clicked. |
markers | { lat: number; lng: number; status?: number | string; label?: string; icon?: string; [key: string]: any; }[] | Yes | Markers of the group. Markers without lat or lng are skipped. |
enableClustering | boolean | No | Groups nearby markers of this group into numbered clusters that split apart as you zoom in. |
radius | number | No | Draws a shaded circle of this radius, in metres, around every marker of the group. No circle is drawn without it. |
markerGroups.markers
An array of objects. Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
lat | number | Yes | Latitude of the marker. |
lng | number | Yes | Longitude of the marker. |
status | number | string | No | Not used by the component itself; passed to getInfoWindowContent with the rest of the marker data. |
label | string | No | Title of the default popup shown when the marker is clicked. |
icon | string | No | Image source of the marker icon. Falls back to the bundled marker icon. |
polylineGroups
An array of objects. Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
key | string | Yes | Identifies the group. Not used by the component when drawing. |
path | google.maps.LatLngLiteral[] | Yes | Points of the route, in order, as { lat, lng }. Routes with an empty path are skipped. |
color | string | No | Colour of the line, also used for its arrows. Falls back to the theme's route colour (dark green). |
weight | number | No | Line width in pixels. Defaults to 2. |
opacity | number | No | Opacity of the line from 0 to 1, also used for its arrows. Defaults to 1. |
showEndpoints | boolean | No | Shows source and destination markers at the first and last points of the path. Also needs defaultShowEndpoints (or the endpoints filter) to be on. |
showArrows | boolean | No | Draws direction arrows along the line, about every 60 pixels. |
arrowScale | number | No | Size of the arrows. Defaults to 2. Requires showArrows. |
arrowColor | string | No | Colour of the arrows. Falls back to color. Requires showArrows. |
arrowOpacity | number | No | Opacity of the arrows from 0 to 1. Falls back to opacity. Requires showArrows. |
variant | "solid" | "dashed" | "dotted" | No | Line style: solid, dashed or dotted. Defaults to solid. |
sourceIcon | string | No | Image source of the start marker. Falls back to the bundled source icon. Requires showEndpoints. |
destinationIcon | string | No | Image source of the end marker. Falls back to the bundled destination icon. Requires showEndpoints. |
sourceKey | string | No | Key passed to getInfoWindowContent when the start marker is clicked. Defaults to source. |
destinationKey | string | No | Key passed to getInfoWindowContent when the end marker is clicked. Defaults to destination. |
sourceLabel | string | No | Title of the start marker's popup. Defaults to Source. |
destinationLabel | string | No | Title of the end marker's popup. Defaults to Destination. |
geofenceGroups
An array of objects. Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
key | string | Yes | Identifies the geofence. Returned in onEditGeoFenceGroups when the geofence is edited. |
type | "circle" | "polygon" | Yes | Shape of the geofence: circle (needs center and radius) or polygon (needs path). |
center | { lat: number; lng: number } | No | Centre of a circular geofence. Circles without it are not drawn. |
radius | number | No | Radius of a circular geofence in metres. Circles without it are not drawn. |
path | { lat: number; lng: number }[] | No | Corner points of a polygonal geofence, in order. Polygons without it are not drawn. |
strokeColor | string | No | Outline colour. Falls back to the theme's geofence colour (red). |
fillColor | string | No | Fill colour. Falls back to the theme's geofence colour (red). |
fillOpacity | number | No | Fill opacity from 0 to 1. Defaults to 0.2. |
strokeWeight | number | No | Outline width in pixels. Defaults to 2. |
editable | boolean | No | Lets the user drag the geofence's handles to move or reshape it; each change fires onEditGeoFenceGroups. Defaults to false. |
geofenceGroups.center
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
lat | number | Yes | Latitude of the circle's centre. |
lng | number | Yes | Longitude of the circle's centre. |
geofenceGroups.path
An array of objects. Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
lat | number | Yes | Latitude of the point. |
lng | number | Yes | Longitude of the point. |
filterOptions
An array of objects. Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
label | string | Yes | Declared, but not used by the component. |
key | string | string[] | Yes | Declared, but not used by the component. |
drawingControls
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
drawingModes | ( | "marker" | "polyline" | "polygon" | "circle" | "rectangle" )[] | No | Shapes offered in the drawing toolbar: marker, polyline, polygon, circle and rectangle. Only the listed shapes get a button. |
markerOptions | { icon?: string; } | No | Look of markers placed with the drawing toolbar. |
polylineOptions | { editable?: boolean; strokeColor?: string; strokeOpacity?: number; strokeWeight?: number; } | No | Look of lines drawn with the drawing toolbar. |
polygonOptions | { editable?: boolean; strokeColor?: string; strokeOpacity?: number; strokeWeight?: number; } | No | Look of polygons drawn with the drawing toolbar. |
circleOptions | { editable?: boolean; fillColor?: string; fillOpacity?: number; strokeColor?: string; strokeOpacity?: number; strokeWeight?: number; } | No | Look of circles drawn with the drawing toolbar. |
rectangleOptions | { editable?: boolean; fillColor?: string; fillOpacity?: number; strokeColor?: string; strokeOpacity?: number; strokeWeight?: number; } | No | Look of rectangles drawn with the drawing toolbar. |
drawingControls.markerOptions
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
icon | string | No | Image source of drawn markers. Falls back to the bundled marker icon. |
drawingControls.polylineOptions
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
editable | boolean | No | Lets the user drag a drawn line's points after drawing; each change fires onDrawingPolylines. |
strokeColor | string | No | Colour of drawn lines. |
strokeOpacity | number | No | Opacity of drawn lines from 0 to 1. |
strokeWeight | number | No | Width of drawn lines in pixels. |
drawingControls.polygonOptions
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
editable | boolean | No | Lets the user drag a drawn polygon's corners after drawing; each change fires onDrawingPolygons. |
strokeColor | string | No | Outline colour of drawn polygons. |
strokeOpacity | number | No | Outline opacity of drawn polygons from 0 to 1. |
strokeWeight | number | No | Outline width of drawn polygons in pixels. |
drawingControls.circleOptions
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
editable | boolean | No | Lets the user move and resize a drawn circle after drawing; each change fires onDrawingCircles. |
fillColor | string | No | Fill colour of drawn circles. |
fillOpacity | number | No | Fill opacity of drawn circles from 0 to 1. |
strokeColor | string | No | Outline colour of drawn circles. |
strokeOpacity | number | No | Outline opacity of drawn circles from 0 to 1. |
strokeWeight | number | No | Outline width of drawn circles in pixels. |
drawingControls.rectangleOptions
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
editable | boolean | No | Lets the user move and resize a drawn rectangle after drawing; each change fires onDrawingRectangles. |
fillColor | string | No | Fill colour of drawn rectangles. |
fillOpacity | number | No | Fill opacity of drawn rectangles from 0 to 1. |
strokeColor | string | No | Outline colour of drawn rectangles. |
strokeOpacity | number | No | Outline opacity of drawn rectangles from 0 to 1. |
strokeWeight | number | No | Outline width of drawn rectangles in pixels. |
Events
| Name | Signature | When it fires |
|---|---|---|
getInfoWindowContent | ((key: string, data: any) => ReactNode) | Returns the content of the popup that opens when a marker or route endpoint is clicked. Called with the group key (or the endpoint's sourceKey / destinationKey) and the marker's data; the result is rendered to static HTML, so click handlers and state inside it do not work. Without it the popup shows the marker's label and its latitude and longitude. |
onMapInit | ((map: Map) => void) | Fires once with the underlying map instance after the map is created and the groups are drawn. |
onDrawingCircles | ((circles: { lat: number; lng: number; radius: number; }[]) => void) | Fires with every circle drawn so far, as { lat, lng, radius } (radius in metres), after a circle is drawn or an editable one is changed. |
onDrawingRectangles | ((rectangles: { northEast: { lat: number; lng: number; }; southWest: { lat: number; lng: number; }; }[]) => void) | Fires with every rectangle drawn so far, as { northEast, southWest } corners, after a rectangle is drawn or an editable one is changed. |
onDrawingPolygons | ((polygons: any[]) => void) | Fires with every polygon drawn so far, each as an array of { lat, lng } points, after a polygon is drawn or an editable one is changed. |
onDrawingPolylines | ((polylines: any[]) => void) | Fires with every line drawn so far, each as an array of { lat, lng } points, after a line is drawn or an editable one is changed. |
onDrawingMarkers | ((markers: { lat: number; lng: number; }[]) => void) | Fires with every marker drawn so far, as { lat, lng }, after a marker is placed. |
onPlaceSelect | ((place: PlaceResult) => void) | Fires with the first matching place when the user picks a search result. Requires enableSearch. |
onEditGeoFenceGroups | ((geofenceGroups: { key: string; type: "circle" | "polygon"; center?: { lat: number; lng: number; }; radius?: number; path?: { lat: number; lng: number; }[] | undefined; strokeColor?: string | undefined; fillColor?: string | undefined; fillOpacity?: number | undefined; strokeWeight?: number |... | Fires when an editable geofence is moved, resized or reshaped, with only the geofences edited so far: { key, type, center, radius } for circles and { key, type, path } for polygons. Also fires with an empty array whenever geofenceGroups changes, including on first render. |
Children
Map does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Map in Storybook to try every story with the full set of controls.