Map Instance Properties

• map.boxZoom: BoxZoomHandler

  The map's BoxZoomHandler, which implements zooming using a drag gesture with the Shift key pressed.

• map.doubleClickZoom: DoubleClickZoomHandler

  The map's DoubleClickZoomHandler, which allows the user to zoom by double clicking.

• map.dragPan: DragPanHandler

  The map's DragPanHandler, which implements dragging the map with a mouse or touch gesture.

• map.dragRotate: DragRotateHandler

  The map's DragRotateHandler, which implements rotating the map while dragging with the right mouse button or with the Control key pressed.

• map.keyboard: KeyboardHandler

  The map's KeyboardHandler, which allows the user to zoom, rotate, and pan the map using keyboard shortcuts.

• map.repaint: boolean

  Gets and sets a Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance.

• map.scrollZoom: ScrollZoomHandler

  The map's ScrollZoomHandler, which implements zooming in and out with a scroll wheel or trackpad.

• map.showCollisionBoxes: boolean

  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.

• map.showTileBoundaries: boolean

  Gets and sets a Boolean indicating whether the map will render an outline around each tile. These tile boundaries are useful for debugging.

• map.touchZoomRotate: TouchZoomRotateHandler

  The map's TouchZoomRotateHandler,, which allows the user to zoom or rotate the map with touch gestures.

Map Instance Methods

• map.addControl(control, position?): Map
  control(IControl)The IControl to add.
  position(string?)position on the map to which the control will be added. Valid values are 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . Defaults to 'top-right' .

  Adds a IControl to the map.

• map.addImage(id, image, options)
  id(string) The ID of the image.
  image(((HTMLImageElement | ImageData | {width: number, height: number, data: (Uint8Array | Uint8ClampedArray)}))) The image as an HTMLImageElement , ImageData , or object with width , height , and data properties with the same format as ImageData.
  options(Object)

  • pixelRatio number default: 1
    The amount of padding in pixels to add to the given bounds.
  • sdf boolean default: false
    Whether the image should be interpreted as an SDF image

  Add an image to the style. This image can be used in icon-image, background-pattern, fill-pattern, and line-pattern. An Map.error event will be fired if there is not enough space in the sprite to add this image.

• map.addLayer(layer, before?): Map
  layer(Object) The style layer to add, conforming to the Dragonfly Style Specification's layer definition.
  before(string?). The ID of an existing layer to insert the new layer before. If this argument is omitted, the layer will be appended to the end of the layers array.

  Adds a Dragonfly style layer to the map's style.

• map.addSource(id, source): Map
  layer(string) The ID of the source to add. Must not conflict with existing sources.
  before(Object). The source object, conforming to the Dragonfly Style Specification's source definition or CanvasSourceOptions.

  Adds a source to the map's style.

• map.areTilesLoaded(): boolean

  Returns a Boolean indicating whether all tiles in the viewport from all sources on the style are loaded.

• map.easeTo(options, eventData): Map
  options(any) Options describing the destination and animation of the transition. Accepts CameraOptions and AnimationOptions.
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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.

• map.fitBounds(bounds, options, eventData): Map
  bounds(LngLatBoundsLike). Center these bounds in the viewport and use the highest zoom level up to and including Map.getMaxZoom that fits them in the viewport.
  options(Object)

  • padding number | PaddingOptions
    The amount of padding in pixels to add to the given bounds.
  • linear boolean default: false
    If true , the map transitions using Map.easeTo. If false , the map transitions using Map.flyTo. See those functions and AnimationOptions for information about options available.
  • easing Function?
    An easing function for the animated transition. See AnimationOptions.
  • offset PointLike default: [0,0]
    The center of the given bounds relative to the map's center, measured in pixels.
  • maxZoom number?
    The maximum zoom level to allow when the map view transitions to the specified bounds.
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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.

  var bbox = [[-79, 43], [-73, 45]];
  map.fitBounds(bbox, {
    padding: {top: 10, bottom:25, left: 15, right: 5}
  });

• map.flyTo(options, eventData): Map
  options(Object) Options describing the destination and animation of the transition. Accepts CameraOptions , AnimationOptions , and the following additional options.

  • curve number default: 1.42
    The amount of padding in pixels to add to the given bounds.
  • minZoom number?
    The zero-based zoom level at the peak of the flight path. If curve is specified, this option is ignored.
  • speed number default: 1.2
    The average speed of the animation defined in relation to options.curve . A speed of 1.2 means that the map appears to move along the flight path by 1.2 times options.curve screenfuls every second. A screenful is the map's visible span. It does not correspond to a fixed physical distance, but varies by zoom level.
  • screenSpeed number?
    The average speed of the animation measured in screenfuls per second, assuming a linear timing curve. If speed is specified, this option is ignored.
  • maxDuration number?
    The animation's maximum duration, measured in milliseconds. If duration exceeds maximum duration, it resets to 0.
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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.

  // fly with default options to null island
  map.flyTo({center: [0, 0], zoom: 9});
  // using flyTo options
  map.flyTo({
    center: [0, 0],
    zoom: 9,
    speed: 0.2,
    curve: 1,
    easing(t) {
      return t;
    }
  });

• map.getBearing(): number

  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.

• map.getBounds(): LngLatBounds

  Returns the map's geographical bounds.

• map.getCanvas(): HTMLCanvasElement

  Returns the map's <canvas> element.

• map.getCanvasContainer(): HTMLCanvasElement

  Returns the HTML element containing the map's <canvas> element. If you want to add non-GL overlays to the map, you should append them to this element. This is the element to which event bindings for map interactivity (such as panning and zooming) are attached. It will receive bubbled events from child elements such as the <canvas>, but not from map controls.

• map.getCenter(): LngLat

  Returns the map's geographical centerpoint.

• map.getContainer(): HTMLElement

  Returns the map's containing HTML element.

• map.getFilter(layer): Array
  layer(string) The ID of the style layer whose filter to get.

  Returns the filter applied to the specified style layer.

• map.getLayer(id): Object?
  id(string) The ID of the layer to get.

  Returns the layer with the specified ID in the map's style,or undefined if the ID corresponds to no existing layers.

• map.getLayoutProperty(layer, name): any
  layer(string) The ID of the layer to get the layout property from.
  name(string) The name of the layout property to get.

  Returns the value of a layout property in the specified style layer.

• map.getLight(): Object

  Returns the value of the light object.

• map.getMaxBounds(): LngLatBounds | null

  Returns the maximum bounds the map is constrained to, or null if none set.

• map.getMaxZoom(): number

  Returns the map's maximum allowable zoom level.

• map.getMinZoom(): number

  Returns the map's minimum allowable zoom level.

• map.getPaintProperty(layer, name): any
  layer(string) The ID of the layer to get the paint property from.
  name(string) The name of the paint property to get.

  Returns the value of a paint property in the specified style layer.

• map.getPitch(): number

  Returns map's current pitch, measured in degrees away from the plane of the screen.

• map.getRenderWorldCopies(): boolean

  Returns the state of renderWorldCopies.

• map.getSource(id): Object
  id(string) The ID of the source to get.

  Returns the source with the specified ID,or undefined if the ID corresponds to no existing sources.

• map.getStyle(): Object

  Returns the map's Dragonfly style object, which can be used to recreate the map's style.

• map.getZoom(): number

  Returns the map's current zoom level.

• map.hasImage(id): boolean
  id(string) The ID of the image.

  Returns whether the image with that id has been added or not.

• map.isMoving(): boolean

  Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture.

• map.isRotating(): boolean

  Returns true if the map is rotating due to a camera animation or user gesture.

• map.isSourceLoaded(id): boolean
  id(string) The ID of the source to be checked.

  Returns a Boolean indicating whether the source is loaded.

• map.isStyleLoaded(id): boolean

  Returns a Boolean indicating whether the map's style is fully loaded.

• map.isZooming(): boolean

  Returns true if the map is zooming due to a camera animation or user gesture.

• map.jumpTo(options, eventData): Map
  options(CameraOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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.

• map.loaded(): boolean

  Returns a Boolean indicating whether the map is fully loaded. Returns false if the style is not yet fully loaded, or if there has been a change to the sources or style that has not yet fully loaded.

• map.loadImage(layer, before?): Map
  url(string) The URL of the image file. Image file must be in png, webp, or jpg format.
  callback(Function) Expecting callback(error, data) . Called when the image has loaded or with an error argument if there is an error.

  Load an image from an external URL for use with Map.addImage. External domains must support CORS.

• map.moveLayer(layer, before?): Map
  layer(Object) The style layer to move.
  before(string?) The ID of an existing layer to insert the new layer before. If this argument is omitted, the layer will be appended to the end of the layers array.

  Moves a layer to a different z-position.

• map.off(type, listener): Map
  map.off(type, layer, listener): Map
  type(string) The event type previously used to install the listener.
  layer(string) The layer ID previously used to install the listener.
  listener(Function) The function previously installed as a listener.

  Removes an event listener for events previously added with Map.on. Use layer parameter if the listener was added to a specific layer.

• map.on(type, listener): Map
  map.on(type, layer, listener): Map
  type(string) The event type to listen for. One of 'mousedown' , 'mouseup' , 'click' , 'dblclick' , 'mousemove' , 'mouseenter' , 'mouseleave' , 'mouseover' , 'mouseout' , 'contextmenu' , 'touchstart' , 'touchend' , or 'touchcancel' . mouseenter and mouseover events are triggered when the cursor enters a visible portion of the specified layer from outside that layer or outside the map canvas. mouseleave and mouseout events are triggered when the cursor leaves a visible portion of the specified layer, or leaves the map canvas.
  layer(string) The ID of a style layer. Only events whose location is within a visible feature in this layer will trigger the listener. The event will have a features property containing an array of the matching features.
  listener(Function) The function to be called when the event is fired.

  Adds a listener for events of a specified type. If layer parameter is present only events occurring on features in a specified style layer are processed.

• map.panBy(offset, options, eventData): Map
  offset(PointLike) x and y coordinates by which to pan the map.
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Pans the map by the specified offest.

• map.panTo(lnglat, options, eventData): Map
  lnglat(LngLatLike) The location to pan the mapt to.
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Pans the map to the specified location, with an animated transition.

• map.project(lnglat): Point
  lnglat(LngLatLike) The geographical location to project.

  Returns a Point representing pixel coordinates, relative to the map's container, that correspond to the specified geographical location.

• map.queryRenderedFeatures( geometry?, options?):Array<Object>
  geometry(PointLike | Array<PointLike>) he geometry of the query region: either a single point or southwest and northeast points describing a bounding box. Omitting this parameter (i.e. calling Map.queryRenderedFeatures with zero arguments, or with only a options argument) is equivalent to passing a bounding box encompassing the entire map viewport.
  options(Object)

  • layers Array<string>?
    An array of style layer IDs for the query to inspect. Only features within these layers will be returned. If this parameter is undefined, all layers will be checked.
  • filter Array?
    A filter to limit query results.

  Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

  The properties value of each returned feature object contains the properties of its source feature. For GeoJSON sources, only string and numeric property values are supported (i.e. null, Array, and Object values are not supported).

  Each feature includes a top-level layer property whose value is an object representing the style layer to which the feature belongs. Layout and paint properties in this object contain values which are fully evaluated for the given zoom level and feature.

  Features from layers whose visibility property is "none", or from layers whose zoom range excludes the current zoom level are not included. Symbol features that have been hidden due to text or icon collision are not included. Features from all other layers are included, including features that may have no visible contribution to the rendered result; for example, because the layer's opacity or color alpha component is set to 0.

  The topmost rendered feature appears first in the returned array, and subsequent features are sorted by descending z-order. Features that are rendered multiple times (due to wrapping across the antimeridian at low zoom levels) are returned only once (though subject to the following caveat).

  Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

  // Find all features at a point
  var features = map.queryRenderedFeatures(
    [20, 35],
    { layers: ['my-layer-name'] }
  );
  // Find all features within a static bounding box
  var features = map.queryRenderedFeatures(
    [[10, 20], [30, 50]],
    { layers: ['my-layer-name'] }
  );
  // Find all features within a bounding box around a point
  var width = 10;
  var height = 20;
  var features = map.queryRenderedFeatures([
    [point.x - width / 2, point.y - height / 2],
    [point.x + width / 2, point.y + height / 2]
  ], { layers: ['my-layer-name'] });
  // Query all rendered features from a single layer
  var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] }

• map.querySourceFeatures(sourceID, parameters?):Array<Object>
  sourceIDThe ID of the vector tile or GeoJSON source to query.
  parameters(Object?)

  • sourceLayers string
    The name of the vector tile layer to query. For vector tile sources, this parameter is required. For GeoJSON sources, it is ignored.
  • filter Array?
    A filter to limit query results.

  Returns an array of GeoJSON Feature objects.

  In contrast to Map.queryRenderedFeatures, this function returns all features matching the query parameters, whether or not they are rendered by the current style (i.e. visible). The domain of the query includes all currently-loaded vector tiles and GeoJSON source tiles: this function does not check tiles outside the currently visible viewport.

  Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

• map.remove()

  Clean up and release all internal resources associated with this map. This includes DOM elements, event bindings, web workers, and WebGL resources. Use this method when you are done using the map and wish to ensure that it no longer consumes browser resources. Afterwards, you must not call any other methods on the map.

• map.removeControl(control): Map
  control(IControl)The IControl to remove.

  Remove the control to the map.

• map.removeImage(id)
  id(string) The ID of the image.

  Remove an image from the style (such as one used by icon-image or background-pattern).

• map.removeLayer(id)
  id(string) The ID of the layer to remove.

  Removes the layer with the given id from the map's style. If no such layer exists, an error event is fired.

• map.removeSource(id)
  id(string) The ID of the source to remove.

  Removes the source with the given id from the map's style.

• map.resetNorth(options, eventData): Map
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Rotates the map so that north is up (0° bearing), with an animated transition.

• map.resize( eventData): Map
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Resizes the map according to the dimensions of its container element. This method must be called after the map's container is resized by another script, or when the map is shown after being initially hidden with CSS.

• map.rotateto(bearing, options, eventData): Map
  bearing(number)
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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.

• map.setBearing(bearing, eventData): Map
  bearing(number) The desired bearing.
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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. Equivalent to jumpTo({bearing: bearing}).

  map.setBearing(90);

• map.setCenter(center, eventData): Map
  center(LngLatLike) The desired bearing.
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Sets the map's geographical centerpoint. Equivalent to jumpTo({center: center}).

  map.setBearing(90);

• map.setFilter(layer, filter): Map
  layer(string) The ID of the layer to which the filter will be applied.
  filter(Array | null | undefined) The filter, conforming to the Dragonfly Style Specification's filter definition. If null or undefined, the function removes any existing filter from the layer.

  Sets the zoom extent for the specified style layer.

  map.setLayerZoomRange('my-layer', 2, 5);

• map.setLayerZoomRange(layer, minzoom, maxzoom): Map
  layer(string) The ID of the layer to which the zoom extent will be applied.
  minzoom(number) The minimum zoom to set (0-24).
  maxzoom(number) The maximum zoom to set (0-24).

  Sets the value of a layout property in the specified style layer.

  map.setLayoutProperty('my-layer', 'visibility', 'none');

• map.setLayoutProperty(layer, name, value): Map
  layer(string) The ID of the layer to set the layout property in.
  name(string) The name of the layout property to set.
  value(any) The value of the layout propery to set. Must be of a type appropriate for the property, as defined in the Dragonfly Style Specification.

  Sets the value of a layout property in the specified style layer.

  map.setLayoutProperty('my-layer', 'visibility', 'none');

• map.setLight(light): Map
  light(LightSpecification) Light properties to set. Must conform to the Dragonfly Style Specification.

  Sets the any combination of light values.

• map.setMaxBounds(lnglatbounds): Map
  lnglatbounds(LngLatLike | null | undefined) The maximum bounds to set. If null or undefined is provided, the function removes map's maximum bounds.

  Sets or clears the map's geographical bounds. Pan and zoom operations are constrained within these bounds. If a pan or zoom is performed that would display regions outside these bounds, the map will instead display a position and zoom level as close as possible to the operation's request while still remaining within the bounds.

• map.setMaxZoom(maxZoom): Map
  maxZoom(number | null |undefined) The maximum zoom level to set. If null or undefined is provided, the function removes the current maximum zoom (sets it to 22).

  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.

• map.setMinZoom(minZoom): Map
  minZoom(number | null |undefined) The minimum zoom level to set (0-24). If null or undefined is provided, the function removes the current minimum zoom (i.e. sets it to 0).

  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.

• map.setPaintProperty(layer, name, value): Map
  layer(string) The ID of the layer to set the paint property in.
  name(string) The name of the paint property to set.
  value(any) The value of the paint propery to set. Must be of a type appropriate for the property, as defined in the Dragonfly Style Specification .

  Sets the value of a paint property in the specified style layer.

  map.setPaintProperty('my-layer', 'fill-color', '#faafee');

• map.setPitch(pitch, eventData): Map
  pitch(number) The pitch to set, measured in degrees away from the plane of the screen (0-60).
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Sets the map's pitch (tilt). Equivalent to jumpTo({pitch: pitch}).

• map.setRenderWorldCopies( renderWorldCopies ): Map
  eventData(boolean). If true , multiple copies of the world will be rendered, when zoomed out. undefined is treated as true , null is treated as false .

  Sets the state of renderWorldCopies

• map.setStyle(style, options): Map
  style((StyleSpecification | string | null). A JSON object conforming to the schema described in the Dragonfly Style Specification , or a URL to such JSON.
  options(Object)

  • diff boolean
    If false, force a 'full' update, removing the current style and adding building the given one instead of attempting a diff-based update.
  • localIdeographFontFamily string
    If non-null, defines a css font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges. Forces a full update.

  Updates the map's Dragonfly style object with a new value. If the given value is style JSON object, compares it against the the map's current state and perform only the changes necessary to make the map style match the desired state.

• map.setZoom(zoom, eventData): Map
  zoom(number) The zoom level to set (0-20).
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Sets the map's zoom level. Equivalent to jumpTo({zoom: zoom}).

  map.setZoom(5);

• map.snapToNorth(options, eventData): Map
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  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).

• map.stop(): Map

  Stops any animated transition underway.

• map.unproject(point): LngLat
  point(Point) The pixel coordinates to unproject.

  Returns a LngLat representing geographical coordinates that correspond to the specified pixel coordinates.

• map.zoomIn(options, eventData): Map
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Increases the map's zoom level by 1.

• map.zoomOut(options, eventData): Map
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Decreases the map's zoom level by 1.

• map.zoomTo(zoom, options, eventData): Map
  zoom(number) The zoom level to transition to.
  options(AnimationOptions)
  eventData(Object). Additional properties to be added to event objects of events triggered by this method.

  Decreases the map's zoom level by 1.

Map Events

• boxzoomcancel
  data(ZoomEvent)

  Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. See BoxZoomHandler.

• boxzoomend
  data(ZoomEvent)

  Fired when a "box zoom" interaction ends. See BoxZoomHandler.

• boxzoomstart
  data(ZoomEvent)

  Fired when a "box zoom" interaction starts. See BoxZoomHandler.

• click
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.

• contextmenu
  data(MapMouseEvent)

  Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.

• data
  data(MapDataEvent)

  Fired when any map data loads or changes. See MapDataEvent for more information.

• dataloading
  data(MapDataEvent)

  Fired when any map data (style, source, tile, etc) begins loading or changing asyncronously. All dataloading events are followed by a data or error event. See MapDataEvent for more information.

• dblclick
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) is clicked twice at the same point on the map.

• drag
  data(MapMouseEvent | MapTouchEvent)

  Fired repeatedly during a "drag to pan" interaction. See DragPanHandler.

• dragend
  data({originalEvent: DragEvent})

  Fired when a "drag to pan" interaction ends. See DragPanHandler.

• dragstart
  data({originalEvent: DragEvent})

  Fired when a "drag to pan" interaction starts. See DragPanHandler.

• error
  data({error: {message: string}})

  Fired when an error occurs. This is GL JS's primary error reporting mechanism. We use an event instead of throw to better accommodate asyncronous operations. If no listeners are bound to the error event, the error will be printed to the console.

• load

  Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

• mousedown
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) is pressed within the map.

• mouseenter
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) enters a visible portion of a specified layer from outside that layer or outside the map canvas. This event can only be listened for via the three-argument version of Map.on, where the second argument specifies the desired layer.

• mouseleave
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) leaves a visible portion of a specified layer, or leaves the map canvas. This event can only be listened for via the three-argument version of Map.on, where the second argument specifies the desired layer.

• mousemove
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) is moved within the map.

• mouseout
  data(MapMouseEvent)

  Fired when a point device (usually a mouse) leaves the map's canvas.

• mouseover
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) is moved within the map.

• mouseup
  data(MapMouseEvent)

  Fired when a pointing device (usually a mouse) is released within the map.

• move
  data(MapMouseEvent | MapTouchEvent)

  Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods such as Map.flyTo.

• moveend
  data(({originalEvent: DragEvent})

  Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods such as Map.flyTo.

• movestart
  data(({originalEvent: DragEvent})

  Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods such as Map.flyTo.

• pitch
  data(MapEventData)

  Fired whenever the map's pitch (tilt) changes as. the result of either user interaction or methods such as Map.flyTo.

• pitchend
  data(MapEventData)

  Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as Map.flyTo.

• pitchstart
  data(MapEventData)

  Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as Map.flyTo.

• remove

  Fired immediately after the map has been removed with Map.remove().

• render

  Fired whenever the map is drawn to the screen, as the result of:

  • a change to the map's position, zoom, pitch, or bearing
  • a change to the map's style
  • a change to a GeoJSON source
  • the loading of a vector tile, GeoJSON file, glyph, or sprite
• resize

  Fired immediately after the map has been resized.

• rotate
  data(MapMouseEvent | MapTouchEvent)

  Fired repeatedly during a "drag to rotate" interaction. See DragPanHandler.

• rotateend
  data(MapMouseEvent | MapTouchEvent)

  Fired when a "drag to rotate" interaction ends. See DragPanHandler.

• rotatestart
  data(MapMouseEvent | MapTouchEvent)

  Fired when a "drag to rotate" interaction starts. See DragPanHandler.

• sourcedata
  data(MapDataEvent)

  Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information.

• sourcedataloading
  data(MapDataEvent)

  Fired when any map's sources begins loading or changing asyncronously. All sourcedataloading events are followed by a sourcedata or error event. See MapDataEvent for more information.

• styledata
  data(MapDataEvent)

  Fired when any map's style loads or changes. See MapDataEvent for more information.

• styledataloading
  data(MapDataEvent)

  Fired when any map style begins loading or changing asyncronously. All styledataloading events are followed by a styledata or error event. See MapDataEvent for more information.

• touchcancel
  data(MapTouchEvent)

  Fired when a touchcancel event occurs within the map.

• touchend
  data(MapTouchEvent)

  Fired when a touchend event occurs within the map.

• touchmove
  data(MapTouchEvent)

  Fired when a touchmove event occurs within the map.

• touchstart
  data(MapTouchEvent)

  Fired when a touchstart event occurs within the map.

• webglcontextlost

  Fired when the WebGL context is lost.

• webglcontextrestored

  Fired when the WebGL context is restored.

• wheel
  data(MapWheelEvent)

  Fired when a wheel event occurs within the map.

• zoom
  data(MapMouseEvent | MapTouchEvent)

  Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such asMap.flyTo.

• zoomend
  data(MapMouseEvent | MapTouchEvent)

  Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such asMap.flyTo.

• zoomstart
  data(MapMouseEvent | MapTouchEvent)

  Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as Map.flyTo.

Instance Methods

• LngLat.convert(item): LngLat
  input(LngLatLike) An array of two numbers to convert, or a LngLat object to return.

  Converts an array of two numbers to a LngLat object. If a LngLat object is passed in, the function returns it unchanged.

  var arr = [-73.9749, 40.7736];
  var ll = dragonfly.LngLat.convert(arr);
  ll;   // = LngLat {lng: -73.9749, lat: 40.7736}

• toArray(): Array<number>

  Returns the coordinates represented as an array of two numbers.

  var ll = new dragonfly.LngLat(-73.9749, 40.7736);
  ll.toArray(); // = [-73.9749, 40.7736]

• toBounds(radius): LngLatBounds
  radius(number) Distance in meters from the coordinates to extend the bounds.

  Returns a LngLatBounds from the coordinates extended by a given radius.

  var ll = new dragonfly.LngLat(-73.9749, 40.7736);
  ll.toBounds(100).toArray(); // = [[-73.97501862141328, 40.77351016847229], [-73.97478137858673, 40.77368983152771]]

• toString(): string

  Returns the coordinates represented as a string of the format 'LngLat(lng, lat)'.

  var ll = new dragonfly.LngLat(-73.9749, 40.7736);
  ll.toString(); // = "LngLat(-73.9749, 40.7736)"

• wrap(): LngLat

  Returns a new LngLat object whose longitude is wrapped to the range (-180, 180).

  var ll = new dragonfly.LngLat(286.0251, 40.7736);
  var wrapped = ll.wrap();
  wrapped.lng; // = -73.9749

Instance Methods

• LngLatBounds.convert(item): LngLatBounds
  input(LngLatBoundsLike) An array of two numbers to convert, or a LngLatBounds object to return.

  Converts an array to a LngLatBounds object. If a LngLatBounds object is passed in, the function returns it unchanged. Internally, the function calls LngLat.convert to convert arrays to LngLat values.

  ar arr = [[-73.9876, 40.7661], [-73.9397, 40.8002]];
  var llb = dragonfly.LngLatBounds.convert(arr);
  llb;   // = LngLatBounds {_sw: LngLat {lng: -73.9876, lat: 40.7661}, _ne: LngLat {lng: -73.9397, lat: 40.8002}}

• extend(obj): LngLatBounds
  obj(LngLatBoundsLike | LngLatBounds) object to extend to.

  Extend the bounds to include a given LngLat or LngLatBounds.

• getCenter(): LngLat

  Returns the geographical coordinate equidistant from the bounding box's corners.

  var llb = new dragonfly.LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
  llb.getCenter(); // = LngLat {lng: -73.96365, lat: 40.78315}

• getEast(): number

  Returns the east edge of the bounding box.

• getNorth(): number

  Returns the north edge of the bounding box.

• getNorthEast(): LngLat

  Returns the northeast corner of the bounding box.

• getNorthWest(): LngLat

  Returns the northwest corner of the bounding box.

• getSouth(): number

  Returns the south edge of the bounding box.

• getSouthEast(): LngLat

  Returns the southeast corner of the bounding box.

• getSouthWest(): LngLat

  Returns the southwest corner of the bounding box.

• getWest(): number

  Returns the west edge of the bounding box.

• isEmpty(): boolean

  Check if the bounding box is an empty/null-type box. True if bounds have been defined, otherwise false.

• setNorthEast(ne): LngLatBounds
  ne(LngLatLike)

  Set the northeast corner of the bounding box.

• setsouthwest(sw): LngLatBounds
  sw(LngLatLike)

  Set the southwest corner of the bounding box.

• toArray(): Array<Array<number>>

  Returns the bounding box represented as an array, consisting of the southwest and northeast coordinates of the bounding represented as arrays of numbers.

  var llb = new dragonfly.LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
  llb.toArray(); // = [[-73.9876, 40.7661], [-73.9397, 40.8002]]

• toString(): string

  Returns the bounding box represents as a string of the format 'LngLatBounds(LngLat(lng, lat), LngLat(lng, lat))'.

  var llb = new dragonfly.LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
  llb.toString(); // = "LngLatBounds(LngLat(-73.9876, 40.7661), LngLat(-73.9397, 40.8002))"

Instance Methods

• disable()

  Disables the "box zoom" interaction.

  map.boxZoom.disable();

• enable()

  Enables the "box zoom" interaction.

  map.boxZoom.enable();

• isactive(): boolean

  Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.

• isEnabled(): boolean

  Returns a Boolean indicating whether the "box zoom" interaction is enabled.

Instance Methods

• disable()

  Disables the "scroll to zoom" interaction.

  map.scrollZoom.disable();

• enable(options?)
  options(Object?)

  • around string
    If "center" is passed, map will zoom around center of map.

  Enables the "scroll to zoom" interaction.

  map.scrollZoom.enable();
  map.scrollZoom.enable({ around: 'center' })

• isEnabled(): boolean

  Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.

Instance Methods

• disable()

  Disables the "drag to pan" interaction.

  map.dragPan.disable();

• enable()

  Enables the "drag to pan" interaction.

  map.dragPan.enable();

• isactive(): boolean

  Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.

• isEnabled(): boolean

  Returns a Boolean indicating whether the "drag to pan" interaction is enabled.

Instance Methods

• disable()

  Disables the "drag to rotate" interaction.

  map.dragPan.disable();

• enable()

  Enables the "drag to rotate" interaction.

  map.dragPan.enable();

• isactive(): boolean

  Returns a Boolean indicating whether the "drag to rotate" interaction is active, i.e. currently being used.

• isEnabled(): boolean

  Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.

Instance Methods

• disable()

  Disables keyboard interaction.

  map.keyboard.disable();

• enable()

  Enables the keyboard interaction.

  map.keyboard.enable();

• isEnabled(): boolean

  Returns a Boolean indicating whether the keyboard interaction is enabled.

Instance Methods

• disable()

  Disables the "double click to zoom" interaction.

  map.doubleClickZoom.disable();

• enable()

  Enables the "double click to zoom" interaction.

  map.doubleClickZoom.enable();

• isactive(): boolean

  Returns a Boolean indicating whether the "double click to zoom" interaction is active, i.e. currently being used.

• isEnabled(): boolean

  Returns a Boolean indicating whether the "double click to zoom" interaction is enabled.

Instance Methods

• disable()

  Disables the "pinch to rotate and zoom" interaction.

  map.touchZoomRotate.disable();

• disableRotation()

  Disables the "pinch to rotate" interaction, leaving the "pinch to zoom" interaction enabled.

  map.touchZoomRotate.disableRotation();

• enable(options?)
  options(Object?)

  • around string
    If "center" is passed, map will zoom around center of map.

  Enables the "pinch to rotate and zoom" interaction.

  map.touchZoomRotate.enable();
  map.touchZoomRotate.enable({ around: 'center' });

• enableRotation()

  Enables the "pinch to rotate" interaction.

  map.touchZoomRotate.enableRotation();

• isEnabled(): boolean

  Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.

Instance Methods

• setData(data): GeoJSONSource
  options(Object | string) A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.

  Sets the GeoJSON data and re-renders the map.

map.addSource('some id', {
    type: 'geojson',
    data: 'url_to_geojson'
});
map.addSource('some id', {
   type: 'geojson',
   data: {
       "type": "FeatureCollection",
       "features": [{
           "type": "Feature",
           "properties": {},
           "geometry": {
               "type": "Point",
               "coordinates": [
                   -76.53063297271729,
                   39.18174077994108
               ]
           }
       }]
   }
});
map.getSource('some id').setData({
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": { "name": "Null Island" },
      "geometry": {
          "type": "Point",
          "coordinates": [ 0, 0 ]
      }
  }]
});

Instance Methods

• getVideo(): HTMLVideoElement

  Returns the HTML video element.

• setCoordinates(coordinates): VideoSource
  coordinates(Array<Array<number>>) Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the video. The coordinates start at the top left corner of the video and proceed in clockwise order. They do not have to represent a rectangle.

  Sets the video's coordinates and re-renders the map.

// add to map
map.addSource('some id', {
   type: 'video',
   url: [
       'assets/videos/SocialExplorerDemo.webm'
   ],
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// update
var mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove

Instance Methods

• setCoordinates(coordinates): ImageSource
  coordinates(Array<Array<number>>) Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the image. The coordinates start at the top left corner of the image and proceed in clockwise order. They do not have to represent a rectangle.

  Sets the image's coordinates and re-renders the map.

// add to map
map.addSource('some id', {
   type: 'image',
   url:  'assets/images/map.jpg',
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// update
var mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove

Instance Methods

• getCanvas(): HTMLCanvasElement

  Returns the HTML canvas element.

• pause()

  Disables animation. The map will display a static copy of the canvas image.

• play()

  Enables animation. The image will be copied from the canvas to the map on each frame.

• setCoordinates(coordinates): CanvasSource
  coordinates(Array<Array<number>>) Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the canvas. The coordinates start at the top left corner of the canvas and proceed in clockwise order. They do not have to represent a rectangle.

  Sets the canvas's coordinates and re-renders the map.

// add to map
map.addSource('some id', {
   type: 'canvas',
   canvas: 'idOfMyHTMLCanvas',
   animate: true,
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// update
var mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove

Instance Methods

• off(type, listener): Map
  type(string) The event type to remove listeners for.
  listener(Function) The listener function to remove.

  Removes a previously registered event listener.

• on(type, listener): Map
  type(string) The event type to add a listener for.
  listener(Function) The function to be called when the event is fired. The listener function is called with the data object passed to fire , extended with target and type properties.

  Adds a listener to a specified event type.

• once(type, listener): Map
  type(string) The event type to listen for.
  listener(Function) The function to be called when the event is fired the first time.

  Adds a listener to a specified event type.

Instance Properties

• defaultPrevented : boolean

  true if preventDefault() has been called

• lnglat

  The geographic location on the map of the mouse cursor.

• originalEvent

  The DOM event which caused the map event.

• point

  The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.

• target

  The Map object that fired the event.

• type

  The event type.

Instance Methods

• preventDefault()

  Prevents subsequent default processing of the event by the map. Calling this method will prevent the following default map behaviors:

  • On mousedown events, the behavior of DragPanHandler
  • On mousedown events, the behavior of DragRotateHandler
  • On mousedown events, the behavior of BoxZoomHandler
  • On dblclick events, the behavior of DoubleClickZoomHandler

Instance Properties

• defaultPrevented : boolean

  true if preventDefault() has been called

• lnglat

  The geographic location on the map of the center of the touch event points.

• lnglats

  The geographical locations on the map corresponding to a touch event's touches property.

• map

  The Map object that fired the event.

• originalEvent

  The DOM event which caused the map event.

• point

  The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left corner.

• points

  The array of pixel coordinates corresponding to a touch event's touches property.

• type

  The event type.

Instance Methods

• preventDefault()

  Prevents subsequent default processing of the event by the map. Calling this method will prevent the following default map behaviors:

  • On touchstart events, the behavior of DragPanHandler
  • On touchstart events, the behavior of TouchZoomRotateHandler

Instance Properties

• defaultPrevented : boolean

  true if preventDefault() has been called

• map

  The Map object that fired the event.

• originalEvent

  The DOM event which caused the map event.

• type

  The event type.

Instance Methods

• preventDefault()

  Prevents subsequent default processing of the event by the map. Calling this method will prevent the following default map behaviors:

  • On touchstart events, the behavior of DragPanHandler
  • On touchstart events, the behavior of TouchZoomRotateHandler