Home > @yext/search-ui-react > MapboxMap
A component that renders a map with markers to show result locations using Mapbox GL.
Signature:
declare function MapboxMap<T>({ mapboxAccessToken, mapboxOptions, PinComponent, renderPin, getCoordinate, onDrag }: MapboxMapProps<T>): JSX.Element;
Parameter | Type | Description |
---|---|---|
{ mapboxAccessToken, mapboxOptions, PinComponent, renderPin, getCoordinate, onDrag } | MapboxMapProps<T> |
Returns:
JSX.Element
A React element containing a Mapbox Map
For the map to work properly, be sure to include Mapbox GL stylesheet in the application.
For instance, user may add the following import statement in their application's index file or in the file where MapboxMap
is used: import 'mapbox-gl/dist/mapbox-gl.css';
Or, user may add a stylesheet link in their html page: <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet" />