Map
The <Map/> component creates and displays a map. The Map can be controlled and interacted with via its props. The only required prop is accessToken. This is a string token provided by Mapbox, you will need to create a Mapbox account to get one.
A Map component can accept a number of other components as children. Data at a specific point is displayed on a map using a Marker. Information that applies to paths or regions on a map can be applied by Layer components.
Props
accessToken
string
required
as
string | undefined
className
string | undefined
cssFile
string | undefined
style
({ [key: string]: ReactText; } & string) | ({ [key: string]: ReactText; } & Style) | undefined
antialias
boolean | undefined
attributionControl
boolean | undefined
bearing
(number & { bearing: number; eventData?: EventData | undefined; }) | undefined
bearingSnap
number | undefined
bounds
(LngLatBounds & { bounds: LngLatBoundsLike; eventData?: EventData | undefined; options?: (AnimationOptions & CameraOptions & { curve: number; maxDuration?: number | undefined; minZoom?: number | undefined; screenSpeed?: number | undefined; speed: number; }) | undefined; }) | ([...] & { ...; }) | ([...] & { ...; }) |...
boxZoom
boolean | undefined
center
LngLat | { lng: number; lat: number; } | { lon: number; lat: number; } | [number, number] | undefined
clickTolerance
number | undefined
3
collectResourceTiming
boolean | undefined
false
crossSourceCollisions
boolean | undefined
true
customAttribution
string | string[] | undefined
dragPan
boolean | undefined
dragRotate
boolean | undefined
doubleClickZoom
boolean | undefined
hash
string | boolean | undefined
fadeDuration
number | undefined
300
failIfMajorPerformanceCaveat
boolean | undefined
fitBoundsOptions
FitBoundsOptions | undefined
interactive
boolean | undefined
keyboard
boolean | undefined
locale
{ [key: string]: string; } | undefined
localIdeographFontFamily
string | undefined
null
logoPosition
"top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined
"bottom-left"
maxBounds
LngLatBounds | [LngLatLike, LngLatLike] | [number, number, number, number] | undefined
maxPitch
number | undefined
maxZoom
number | undefined
minPitch
number | undefined
minZoom
number | undefined
preserveDrawingBuffer
boolean | undefined
pitch
(number & { pitch: number; eventData?: EventData | undefined; }) | undefined
0
pitchWithRotate
boolean | undefined
true
refreshExpiredTiles
boolean | undefined
true
renderWorldCopies
boolean | undefined
true
scrollZoom
boolean | undefined
trackResize
boolean | undefined
transformRequest
TransformRequestFunction | undefined
null
touchZoomRotate
boolean | undefined
zoom
number | undefined
maxTileCacheSize
number | undefined
null
ease
{ eventData?: EventData | undefined; options: CameraOptions | (CameraOptions & AnimationOptions); } | undefined
fly
{ eventData?: EventData | undefined; options: CameraOptions | (CameraOptions & AnimationOptions) | (CameraOptions & AnimationOptions & { curve: number; maxDuration?: number | undefined; minZoom?: number | undefined; screenSpeed?: number | undefined; speed: number; }); } | undefined
images
[{ name: string; image: HTMLImageElement | ArrayBufferView | { width: number; height: number; data: Uint8Array | Uint8ClampedArray; } | ImageData; options?: { pixelRatio?: number | undefined; sdf?: boolean | undefined; } | undefined; }] | undefined
jump
{ eventData?: EventData | undefined; options: CameraOptions; } | undefined
light
{ options: Light; lightOptions?: any; } | undefined
repaint
boolean | undefined
rotate
{ bearing: number; eventData?: EventData | undefined; options?: AnimationOptions | undefined; } | undefined
screen
{ p0: PointLike; p1: PointLike; bearing: number; eventData?: EventData | undefined; options?: { easing?: ((time: number) => number) | undefined; linear: number; maxZoom?: number | undefined; offset: PointLike; padding?: number | ... 1 more ... | undefined; } | undefined; } | undefined
showCollisionBoxes
boolean | undefined
showTileBoundaries
boolean | undefined
styleMbx
string | Style | { style: string | Style; options?: { diff?: boolean | undefined; localIdeographFontFamily?: string | undefined; } | undefined; } | undefined
onBoxzoomcancel
((data: MapBoxZoomEvent) => void) | undefined
onBoxzoomend
((data: MapBoxZoomEvent) => void) | undefined
onBoxzoomstart
((data: MapBoxZoomEvent) => void) | undefined
onClick
((data: MapMouseEvent) => void) | undefined
onContextmenu
((data: MapMouseEvent) => void) | undefined
onData
((data: MapDataEvent) => void) | undefined
onDataloading
((data: MapDataEvent) => void) | undefined
onDblclick
((data: MapMouseEvent) => void) | undefined
onDrag
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onDragend
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onDragstart
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onError
((data: { error: { message: string; }; }) => void) | undefined
onIdle
(() => void) | undefined
onLoad
(() => void) | undefined
onMousedown
((data: MapMouseEvent) => void) | undefined
onMousemove
((data: MapMouseEvent) => void) | undefined
onMouseout
((data: MapMouseEvent) => void) | undefined
onMouseover
((data: MapMouseEvent) => void) | undefined
onMouseup
((data: MapMouseEvent) => void) | undefined
onMove
((data: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void) | undefined
onMoveend
((data: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void) | undefined
onMovestart
((data: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void) | undefined
onPitch
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onPitchend
((data: EventData) => void) | undefined
onPitchstart
((data: EventData) => void) | undefined
onRemove
(() => void) | undefined
onRender
(() => void) | undefined
onResize
(() => void) | undefined
onRotate
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onRotateend
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onRotatestart
((data: MapboxEvent<MouseEvent | TouchEvent | undefined>) => void) | undefined
onSourcedata
((data: MapSourceDataEvent) => void) | undefined
onSourcedataloading
((data: MapSourceDataEvent) => void) | undefined
onStyledata
((data: MapStyleDataEvent) => void) | undefined
onStyledataloading
((data: MapStyleDataEvent) => void) | undefined
onStyleimagemissing
((data: string) => void) | undefined
onTouchcancel
((data: MapTouchEvent) => void) | undefined
onTouchend
((data: MapTouchEvent) => void) | undefined
onTouchmove
((data: MapTouchEvent) => void) | undefined
onTouchstart
((data: MapTouchEvent) => void) | undefined
onWebglcontextlost
((data: MapContextEvent) => void) | undefined
onWebglcontextrestored
((data: MapContextEvent) => void) | undefined
onWheel
((data: MapWheelEvent) => void) | undefined
onZoom
((data: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void) | undefined
onZoomend
((data: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void) | undefined
onZoomstart
((data: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void) | undefined