MapboxMap class

The MapboxMap object represents the map on your page. It exposes methods and properties that enable you to programmatically change the map, and fires events as users interact with it.

You create a MapboxMap by specifying a container and other options. Then Mapbox GL JS initializes the map on the page and returns your MapboxMap object.

var map = MapboxMap(
  MapOptions(
    container: 'map',
    center: LngLat(-122.420679, 37.772537),
    zoom: 13,
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
    hash: true,
    transformRequest: (url, resourceType) {
      if (resourceType == 'Source' && url.startsWith('http://myHost')) {
        return RequestParameters(
          url: url.replaceAll('http', 'https'),
          headers: {'my-custom-header': true},
          credentials: 'include',
        );
      }
      return RequestParameters(url: url);
    },
  ),
);

@see Display a map

Inheritance

Constructors

MapboxMap(MapOptions options)
factory
MapboxMap.fromJsObject(MapboxMapJsImpl jsObject)
Creates a new MapboxMap from a jsObject.

Properties

boxZoom → BoxZoomHandler
The map's {@link BoxZoomHandler}, which implements zooming using a drag gesture with the Shift key pressed. Find more details and examples using boxZoom in the {@link BoxZoomHandler} section.
no setter
doubleClickZoom → DoubleClickZoomHandler
The map's {@link DoubleClickZoomHandler}, which allows the user to zoom by double clicking. Find more details and examples using doubleClickZoom in the {@link DoubleClickZoomHandler} section.
no setter
dragPan → DragPanHandler
The map's {@link DragPanHandler}, which implements dragging the map with a mouse or touch gesture. Find more details and examples using dragPan in the {@link DragPanHandler} section.
no setter
dragRotate → DragRotateHandler
The map's {@link DragRotateHandler}, which implements rotating the map while dragging with the right mouse button or with the Control key pressed. Find more details and examples using dragRotate in the {@link DragRotateHandler} section.
no setter
hashCode → int
The hash code for this object.
no setterinherited
jsObject → MapboxMapJsImpl
JS object.
final
keyboard → KeyboardHandler
The map's {@link KeyboardHandler}, which allows the user to zoom, rotate, and pan the map using keyboard shortcuts. Find more details and examples using keyboard in the {@link KeyboardHandler} section.
no setter
painter → dynamic
no setter
repaint ↔ bool
Gets and sets a Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance.
getter/setter pair
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scrollZoom → ScrollZoomHandler
The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad. Find more details and examples using scrollZoom in the {@link ScrollZoomHandler} section.
no setter
showCollisionBoxes ↔ bool
Gets and sets a Boolean indicating whether the map will render boxes around all symbols in the data source, revealing which symbols were rendered or which were hidden due to collisions. This information is useful for debugging.
getter/setter pair
showOverdrawInspector ↔ bool
Gets and sets a Boolean indicating whether the map should color-code each fragment to show how many times it has been shaded. White fragments have been shaded 8 or more times. Black fragments have been shaded 0 times. This information is useful for debugging.
getter/setter pair
showTileBoundaries ↔ bool
Gets and sets a Boolean indicating whether the map will render an outline around each tile and the tile ID. These tile boundaries are useful for debugging.
getter/setter pair
style → Style
no setter
touchZoomRotate → TouchZoomRotateHandler
The map's {@link TouchZoomRotateHandler}, which allows the user to zoom or rotate the map with touch gestures. Find more details and examples using touchZoomRotate in the {@link TouchZoomRotateHandler} section.
no setter
version → String
The version of Mapbox GL JS in use as specified in package.json, CHANGELOG.md, and the GitHub release.
no setter
vertices ↔ bool
show vertices
getter/setter pair

Methods

addControl(dynamic control, [String? position]) → MapboxMap
Adds an {@link IControl} to the map, calling control.onAdd(this).
addImage(String id, dynamic image, [Map<String, dynamic>? options]) → dynamic
Add an image to the style. This image can be displayed on the map like any other icon in the style's sprite using the image's ID with icon-image, background-pattern, fill-pattern, or line-pattern. A {@link MapboxMap#error} event will be fired if there is not enough space in the sprite to add this image.
addLayer(dynamic layer, [String? beforeId]) → MapboxMap
Adds a Mapbox style layer to the map's style.
addSource(String id, dynamic source) → MapboxMap
Adds a source to the map's style.
addSourceType(String name, dynamic sourceType, Function callback) → dynamic
Adds a/// custom source type*(#Custom Sources), making it available for use with {@link MapboxMap#addSource}. @private @param {string} name The name of the source type; source definition objects use this name in the {type: ...} field. @param {Function} SourceType A {@link Source} constructor. @param {Function} callback Called when the source type is ready or with an error argument if there is an error.
areTilesLoaded() → bool
Returns a Boolean indicating whether all tiles in the viewport from all sources on the style are loaded.
cameraForBounds(LngLatBounds bounds, [dynamic options]) → CameraOptions
@memberof MapboxMap# @param {LatLngBoundsLike} bounds Calculate the center for these bounds in the viewport and use the highest zoom level up to and including MapboxMap#getMaxZoom() that fits in the viewport. LatLngBounds represent a box that is always axis-aligned with bearing 0. @param options @param {number | PaddingOptions} options.padding The amount of padding in pixels to add to the given bounds. @param {PointLike} options.offset=[0, 0] The center of the given bounds relative to the map's center, measured in pixels. @param {number} options.maxZoom The maximum zoom level to allow when the camera would transition to the specified bounds. @returns {CameraOptions | void} If map is able to fit to provided bounds, returns CameraOptions with center, zoom, and bearing. If map is unable to fit, method will warn and return undefined. @example var bbox = [-79, 43, -73, 45]; var newCameraTransform = map.cameraForBounds(bbox, { padding: {top: 10, bottom:25, left: 15, right: 5} });
inherited
easeTo(dynamic options, [dynamic eventData]) → MapboxMap
Changes any combination of center, zoom, bearing, and pitch, with an animated transition between old and new values. The map will retain its current values for any details not specified in options.
inherited
fire(Event event, [dynamic properties]) → dynamic
inherited
fitBounds(LngLatBounds bounds, [Map<String, dynamic>? options, dynamic eventData]) → MapboxMap
Pans and zooms the map to contain its visible area within the specified geographical bounds. This function will also reset the map's bearing to 0 if bearing is nonzero.
inherited
fitScreenCoordinates(Point p0, Point p1, num bearing, [dynamic options, dynamic eventData]) → MapboxMap
Pans, rotates and zooms the map to to fit the box made by points p0 and p1 once the map is rotated to the specified bearing. To zoom without rotating, pass in the current map bearing.
inherited
flyTo(dynamic options, [String? eventData]) → MapboxMap
Changes any combination of center, zoom, bearing, and pitch, animating the transition along a curve that evokes flight. The animation seamlessly incorporates zooming and panning to help the user maintain her bearings even after traversing a great distance.
inherited
getBearing() → num
Returns the map's current bearing. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up.
inherited
getBounds() → LngLatBounds
Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region. @example var bounds = map.getBounds();
getCanvas() → CanvasElement
Returns the map's <canvas> element.
getCanvasContainer() → HtmlElement
Returns the HTML element containing the map's <canvas> element.
getCenter() → LngLat
Returns the map's geographical centerpoint.
inherited
getContainer() → HtmlElement
Returns the map's containing HTML element.
getFeatureState(dynamic feature) → dynamic
Gets the state of a feature. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer.
getFilter(String layerId) → List
Returns the filter applied to the specified style layer.
getLayer(String id) → dynamic
Returns the layer with the specified ID in the map's style.
getLayoutProperty(String layerId, String name) → dynamic
Returns the value of a layout property in the specified style layer.
getLight() → dynamic
Returns the value of the light object.
getMaxBounds() → LngLatBounds
Returns the maximum geographical bounds the map is constrained to, or null if none set. @example var maxBounds = map.getMaxBounds();
getMaxPitch() → num
Returns the map's maximum allowable pitch.
getMaxZoom() → num
Returns the map's maximum allowable zoom level.
getMinPitch() → num
Returns the map's minimum allowable pitch.
getMinZoom() → num
Returns the map's minimum allowable zoom level.
getPaintProperty(String layerId, String name) → dynamic
Returns the value of a paint property in the specified style layer.
getPitch() → num
Returns the map's current pitch (tilt).
inherited
getRenderWorldCopies() → bool
Returns the state of renderWorldCopies. If true, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to false:
getSource(String id) → dynamic
Returns the source with the specified ID in the map's style.
getStyle() → dynamic
Returns the map's Mapbox style object, which can be used to recreate the map's style.
getZoom() → num
Returns the map's current zoom level.
inherited
hasImage(String id) → bool
Check whether or not an image with a specific ID exists in the style. This checks both images in the style's original sprite and any images that have been added at runtime using {@link addImage}.
isEasing() → bool
inherited
isMoving() → bool
Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture. @example var isMoving = map.isMoving();
isRotating() → bool
Returns true if the map is rotating due to a camera animation or user gesture. @example map.isRotating();
isSourceLoaded(String id) → bool
Returns a Boolean indicating whether the source is loaded.
isStyleLoaded() → bool
Returns a Boolean indicating whether the map's style is fully loaded.
isZooming() → bool
Returns true if the map is zooming due to a camera animation or user gesture. @example var isZooming = map.isZooming();
jumpTo(CameraOptions options, [dynamic eventData]) → MapboxMap
Changes any combination of center, zoom, bearing, and pitch, without an animated transition. The map will retain its current values for any details not specified in options.
inherited
listens(String type) → dynamic
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type.
inherited
listImages() → List<String>
/// Returns an Array of strings containing the IDs of all images currently available in the map. This includes both images from the style's original sprite and any images that have been added at runtime using {@link addImage}.
loaded() → bool
Returns a Boolean indicating whether the map is fully loaded.
loadImage(String url, Function callback) → dynamic
Load an image from an external URL to be used with MapboxMap#addImage. External domains must support CORS.
moveLayer(String id, String beforeId) → MapboxMap
Moves a layer to a different z-position.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
off(String type, [dynamic layerIdOrListener, Listener? listener]) → MapboxMap
Removes a previously registered event listener.
inherited
on(String type, [dynamic layerIdOrListener, Listener? listener]) → MapboxMap
Adds a listener to a specified event type.
inherited
once(String type, Listener listener) → MapboxMap
Adds a listener that will be called only once to a specified event type.
inherited
panBy(Point offset, [AnimationOptions? options, dynamic eventData]) → MapboxMap
Pans the map by the specified offset.
inherited
panTo(LngLat lnglat, [AnimationOptions? options, dynamic eventData]) → MapboxMap
Pans the map to the specified location, with an animated transition.
inherited
project(LngLat lnglat) → Point
Returns a {@link Point} representing pixel coordinates, relative to the map's container, that correspond to the specified geographical location.
queryRenderedFeatures(dynamic geometry, [Map<String, dynamic>? options]) → List<Feature>
Adds a listener for events of a specified type occurring on features in a specified style layer.
querySourceFeatures(String sourceId, dynamic parameters) → List
Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.
remove() → dynamic
Clean up and release all internal resources associated with this map.
removeControl(dynamic control) → MapboxMap
Removes the control from the map.
removeFeatureState(dynamic target, [String? key]) → dynamic
Removes feature state, setting it back to the default behavior. If only source is specified, removes all states of that source. If target.id is also specified, removes all keys for that feature's state. If key is also specified, removes that key from that feature's state. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer. @param {Object} target Identifier of where to set state: can be a source, a feature, or a specific key of feature. Feature objects returned from {@link MapboxMap#queryRenderedFeatures} or event handlers can be used as feature identifiers. @param {string | number} target.id (optional) Unique id of the feature. Optional if key is not specified. @param {string} target.source The Id of the vector source or GeoJSON source for the feature. @param {string} target.sourceLayer (optional) /// For vector tile sources, the sourceLayer is required.* @param {string} key (optional) The key in the feature state to reset.
removeImage(String id) → dynamic
Remove an image from a style. This can be an image from the style's original sprite or any images that have been added at runtime using {@link addImage}.
removeLayer(String id) → dynamic
Removes the layer with the given ID from the map's style.
removeSource(String id) → dynamic
Removes a source from the map's style.
resetNorth([AnimationOptions? options, dynamic eventData]) → MapboxMap
Rotates the map so that north is up (0° bearing), with an animated transition.
inherited
resetNorthPitch([AnimationOptions? options, dynamic eventData]) → MapboxMap
Rotates and pitches the map so that north is up (0° bearing) and pitch is 0°, with an animated transition.
inherited
resize([dynamic eventData]) → MapboxMap
Resizes the map according to the dimensions of its container element.
rotateTo(num bearing, [AnimationOptions? options, dynamic eventData]) → MapboxMap
Rotates the map to the specified bearing, with an animated transition. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up.
inherited
setBearing(num bearing, [dynamic eventData]) → MapboxMap
Sets the map's bearing (rotation). The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up.
inherited
setCenter(LngLat center, [dynamic eventData]) → MapboxMap
Sets the map's geographical centerpoint. Equivalent to jumpTo({center: center}).
inherited
setEventedParent([Evented? parent, dynamic data]) → dynamic
Bubble all events fired by this instance of Evented to this parent instance of Evented.
inherited
setFeatureState(dynamic feature, dynamic state) → dynamic
Sets the state of a feature. The state object is merged in with the existing state of the feature. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer.
setFilter(String layerId, dynamic filter, [StyleSetterOptions? options]) → MapboxMap
Sets the filter for the specified style layer.
setLayerZoomRange(String layerId, num minzoom, num maxzoom) → MapboxMap
Sets the zoom extent for the specified style layer. The zoom extent includes the minimum zoom level and maximum zoom level) at which the layer will be rendered.
setLayoutProperty(String layerId, String name, dynamic value, [StyleSetterOptions? options]) → MapboxMap
Sets the value of a layout property in the specified style layer.
setLight(dynamic light, StyleSetterOptions options) → MapboxMap
Sets the any combination of light values.
setMaxBounds(LngLatBounds? bounds) → MapboxMap
Sets or clears the map's geographical bounds.
setMaxPitch([num? maxPitch]) → MapboxMap
Sets or clears the map's maximum pitch. If the map's current pitch is higher than the new maximum, the map will pitch to the new maximum.
setMaxZoom([num? maxZoom]) → MapboxMap
Sets or clears the map's maximum zoom level. If the map's current zoom level is higher than the new maximum, the map will zoom to the new maximum.
setMinPitch([num? minPitch]) → MapboxMap
Sets or clears the map's minimum pitch. If the map's current pitch is lower than the new minimum, the map will pitch to the new minimum.
setMinZoom([num? minZoom]) → MapboxMap
Sets or clears the map's minimum zoom level. If the map's current zoom level is lower than the new minimum, the map will zoom to the new minimum.
setPaintProperty(String layerId, String name, dynamic value, [StyleSetterOptions? options]) → dynamic
Sets the value of a paint property in the specified style layer.
setPitch(num pitch, [dynamic eventData]) → MapboxMap
Sets the map's pitch (tilt). Equivalent to jumpTo({pitch: pitch}).
inherited
setRenderWorldCopies([bool? renderWorldCopies]) → MapboxMap
Sets the state of renderWorldCopies.
setStyle(dynamic style, [dynamic options]) → MapboxMap
Updates the map's Mapbox style object with a new value.
setZoom(num zoom, [dynamic eventData]) → MapboxMap
Sets the map's zoom level. Equivalent to jumpTo({zoom: zoom}).
inherited
snapToNorth([AnimationOptions? options, dynamic eventData]) → MapboxMap
Snaps the map so that north is up (0° bearing), if the current bearing is close enough to it (i.e. within the bearingSnap threshold).
inherited
stop() → MapboxMap
Stops any animated transition underway.
inherited
toString() → String
A string representation of this object.
inherited
triggerRepaint() → dynamic
Trigger the rendering of a single frame. Use this method with custom layers to repaint the map when the layer changes. Calling this multiple times before the next frame is rendered will still result in only a single frame being rendered.
unproject(Point point) → LngLat
Returns a {@link LngLat} representing geographical coordinates that correspond to the specified pixel coordinates.
updateImage(String id, dynamic image) → dynamic
Update an existing image in a style. This image can be displayed on the map like any other icon in the style's sprite using the image's ID with icon-image, background-pattern, fill-pattern, or line-pattern.
zoomIn([AnimationOptions? options, dynamic eventData]) → MapboxMap
Increases the map's zoom level by 1.
inherited
zoomOut([AnimationOptions? options, dynamic eventData]) → MapboxMap
Decreases the map's zoom level by 1.
inherited
zoomTo(num zoom, [AnimationOptions? options, dynamic eventData]) → MapboxMap
Zooms the map to the specified zoom level, with an animated transition.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited