Map

The Map 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 Map by specifying a container and other options. Then Goong GL JS initializes the map on the page and returns your Map object.

Extends Evented.

new Map class(options: Object)

Parameters

options(Object)

Name	Description
options.container `(HTMLElement \| string)`	The HTML element in which Goong GL JS will render the map, or the element's string `id` . The specified element must have no children.
options.minZoom `number` default: `0`	The minimum zoom level of the map (0-24).
options.maxZoom `number` default: `22`	The maximum zoom level of the map (0-24).
options.minPitch `number` default: `0`	The minimum pitch of the map (0-60).
options.maxPitch `number` default: `60`	The maximum pitch of the map (0-60).
options.style `(Object \| string)?`	The map's Goong style. This must be an a JSON object conforming to the schema described in the Goong Style Specification , or a URL to such JSON. To load a style from the Goong API, you can use a Style URL provided below: `https://tiles.goong.io/assets/goong_light_v2.json` `https://tiles.goong.io/assets/goong_map_web.json` `https://tiles.goong.io/assets/goong_map_dark.json` `https://tiles.goong.io/assets/navigation_day.json` `https://tiles.goong.io/assets/navigation_night.json` Tilesets hosted with Goong can be style-optimized Learn more about style-optimized vector tiles in our Style Editor.
options.hash `(boolean \| string)` default: `false`	If `true` , the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL. For example, `http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60` . An additional string may optionally be provided to indicate a parameter-styled hash, e.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar , where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash.
options.interactive `boolean` default: `true`	If `false` , no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to interaction.
options.bearingSnap `number` default: `7`	The threshold, measured in degrees, that determines when the map's bearing will snap to north. For example, with a `bearingSnap` of 7, if the user rotates the map within 7 degrees of north, the map will automatically snap to exact north.
options.pitchWithRotate `boolean` default: `true`	If `false` , the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
options.clickTolerance `number` default: `3`	The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).
options.attributionControl `boolean` default: `true`	If `true` , an AttributionControl will be added to the map.
options.customAttribution `(string \| Array<string>)?`	String or strings to show in an AttributionControl . Only applicable if `options.attributionControl` is `true` .
options.logoPosition `string` default: `'bottom-left'`	A string representing the position of the Goong wordmark on the map. Valid options are `top-left` , `top-right` , `bottom-left` , `bottom-right` .
options.failIfMajorPerformanceCaveat `boolean` default: `false`	If `true` , map creation will fail if the performance of Goong GL JS would be dramatically worse than expected (i.e. a software renderer would be used).
options.preserveDrawingBuffer `boolean` default: `false`	If `true` , the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()` . This is `false` by default as a performance optimization.
options.antialias `boolean?`	If `true` , the gl context will be created with MSAA antialiasing, which can be useful for antialiasing custom layers. This is `false` by default as a performance optimization.
options.refreshExpiredTiles `boolean` default: `true`	If `false` , the map won't attempt to re-request tiles once they expire per their HTTP `cacheControl` / `expires` headers.
options.maxBounds `LngLatBoundsLike?`	If set, the map will be constrained to the given bounds.
options.scrollZoom `(boolean \| Object)` default: `true`	If `true` , the "scroll to zoom" interaction is enabled. An `Object` value is passed as options to ScrollZoomHandler#enable .
options.boxZoom `boolean` default: `true`	If `true` , the "box zoom" interaction is enabled (see BoxZoomHandler ).
options.dragRotate `boolean` default: `true`	If `true` , the "drag to rotate" interaction is enabled (see DragRotateHandler ).
options.dragPan `(boolean \| Object)` default: `true`	If `true` , the "drag to pan" interaction is enabled. An `Object` value is passed as options to DragPanHandler#enable .
options.keyboard `boolean` default: `true`	If `true` , keyboard shortcuts are enabled (see KeyboardHandler ).
options.doubleClickZoom `boolean` default: `true`	If `true` , the "double click to zoom" interaction is enabled (see DoubleClickZoomHandler ).
options.touchZoomRotate `(boolean \| Object)` default: `true`	If `true` , the "pinch to rotate and zoom" interaction is enabled. An `Object` value is passed as options to TouchZoomRotateHandler#enable .
options.trackResize `boolean` default: `true`	If `true` , the map will automatically resize when the browser window resizes.
options.center `LngLatLike` default: `[0,0]`	The inital geographical centerpoint of the map. If `center` is not specified in the constructor options, Goong GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
options.zoom `number` default: `0`	The initial zoom level of the map. If `zoom` is not specified in the constructor options, Goong GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0` .
options.bearing `number` default: `0`	The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If `bearing` is not specified in the constructor options, Goong GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0` .
options.pitch `number` default: `0`	The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If `pitch` is not specified in the constructor options, Goong GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0` .
options.bounds `LngLatBoundsLike?`	The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
options.fitBoundsOptions `Object?`	A `fitBounds` options object to use only when fitting the initial `bounds` provided above.
options.renderWorldCopies `boolean` default: `true`	If `true` , multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false` : When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude. Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level.
options.maxTileCacheSize `number` default: `null`	The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
options.localIdeographFontFamily `string` default: `'sans-serif'`	Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana' and 'Hangul Syllables' ranges. In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). Set to `false` , to enable font settings from the map's style for these glyph ranges. Note that Goong Style Editor sets this value to `false` by default. The purpose of this option is to avoid bandwidth-intensive glyph server requests. (See Use locally generated ideographs .)
options.transformRequest `RequestTransformFunction` default: `null`	A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests. Expected to return an object with a `url` property and optionally `headers` and `credentials` properties.
options.collectResourceTiming `boolean` default: `false`	If `true` , Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a `resourceTiming` property of relevant `data` events.
options.fadeDuration `number` default: `300`	Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
options.crossSourceCollisions `boolean` default: `true`	If `true` , symbols from multiple sources can collide with each other during collision detection. If `false` , collision detection is run separately for the symbols in each source.
options.accessToken `string` default: `null`	If specified, map will use this token instead of the one defined in goongjs.accessToken.
options.locale `string` default: `null`	A patch to apply to the default localization table for UI strings, e.g. control tooltips. The `locale` object maps namespaced UI string IDs to translated strings in the target language; see `src/ui/default_locale.js` for an example with all supported string IDs. The object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).

Example

var map = new goongjs.Map({
    container: 'map',
    center: [-122.420679, 37.772537],
    zoom: 13,
    style: style_object,
    hash: true,
    transformRequest: (url, resourceType)=> {
        if(resourceType === 'Source' && url.startsWith('http://myHost'))  {
        return {
        url: url.replace('http', 'https'),
        headers: { 'my-custom-header': true},
        credentials: 'include'  // Include cookies for cross-origin requests
        }
       }
      }
    });

Instance Members

addControl(control,position?)

Adds an IControl to the map, calling control.onAdd(this).

Parameters

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

Returns

Map: this

Example

// Add zoom and rotation controls to the map.
map.addControl(new goongjs.NavigationControl()) ;

Display map navigation controls

addImage(id,image,options)

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 Map#error event will be fired if there is not enough space in the sprite to add this image.

Parameters

id (string) The ID of the image.

image ((HTMLImageElement| ImageBitmap | ImageData | {width:number, height: number, data: (Uint8Array |Uint8ClampedArray)} | StyleImageInterface)) The image as an HTMLImageElement , ImageData , ImageBitmap or object with width , height , and data properties with the same format as ImageData.

options ($Shape<StyleImageMetadata>)(default {})

Name	Description
options.pixelRatio `any` default: `1`	The ratio of pixels in the image to physical pixels on the screen
options.sdf `any` default: `false`	Whether the image should be interpreted as an SDF image
options.stretchX `any`	`[[x1, x2], ...]` If `icon-text-fit` is used in a layer with this image, this option defines the part(s) of the image that can be stretched horizontally.
options.stretchY `any`	`[[y1, y2], ...]` If `icon-text-fit` is used in a layer with this image, this option defines the part(s) of the image that can be stretched vertically.
options.content `any`	`[x1, y1, x2, y2]` If `icon-text-fit` is used in a layer with this image, this option defines the part of the image that can be covered by the content in `text-field` .

Example

// If the style's sprite does not already contain an image with ID 'cat',
// add the image 'cat-icon.png' to the style's sprite with the ID 'cat'.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('cat'))  map.addImage('cat', image);
});


// Add a stretchable image that can be used with `icon-text-fit`
// In this example, the image is 600px wide by 400px high.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('border-image'))  {
     map.addImage('border-image', image, {
         content: [16, 16, 300, 384], // place text over left half of image, avoiding the 16px border
         stretchX: [[16, 584]], // stretch everything horizontally except the 16px border
         stretchY: [[16, 384]], // stretch everything vertically except the 16px border
     });
   }
});

Use HTMLImageElement : Add an icon to the map
Use ImageData : Add a generated icon to the map

addLayer(layer,beforeId)

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

A layer defines how data from a specified source will be styled. Read more about layer types and available paint and layout properties in the Mapbox Style Specification.

Parameters

layer ((Object|CustomLayerInterface)) The style layer to add, conforming to the Mapbox Style Specification's layer definition.

beforeId (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.

Returns

Map: this

Example

// Add a circle layer with a vector source.
map.addLayer({
  id: 'points-of-interest',
  source: {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-streets-v8'
  },
  'source-layer': 'poi_label',
  type: 'circle',
  paint: {
    // Mapbox Style Specification paint properties
  },
  layout: {
    // Mapbox Style Specification layout properties
  }
});

addSource(id,source)

Adds a source to the map's style.

Parameters

id (string) The ID of the source to add. Must not conflict with existing sources.

source (Object) The source object, conforming to the Mapbox Style Specification's source definition or CanvasSourceOptions .

Returns

Map: this

Example

map.addSource('my-data', {
  type: 'vector',
  url: 'mapbox://myusername.tilesetid'
  });

map.addSource('my-data', {
  "type": "geojson",
  "data": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.0323, 38.9131]
    },
    "properties": {
      "title": "Mapbox DC",
      "marker-symbol": "monument"
    }
  }
});

Vector source: Show and hide layers
GeoJSON source: Add live realtime data
Raster DEM source: Add hillshading

areTilesLoaded()

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

Returns

boolean: A Boolean indicating whether all tiles are loaded.

Example

var tilesLoaded = map.areTilesLoaded();

boxzoom

The map's BoxZoomHandler, which implements zooming using a drag gesture with the Shift key pressed. Find more details and examples using boxZoom in the BoxZoomHandler section.

cameraForBounds(bounds, options?)

Parameters

bounds (LatLngBoundsLike)Calculate the center for these bounds in the viewport and use the highest zoom level up to and including Map#getMaxZoom() that fits in the viewport. LatLngBounds represent a box that is always axis-aligned with bearing 0.

options (CameraOptions?)

Name	Description
options.padding `(number \| PaddingOptions)?`	The amount of padding in pixels to add to the given bounds.
options.offset `PointLike` default: `[0,0]`	The center of the given bounds relative to the map's center, measured in pixels.
options.maxZoom `number?`	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.

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

doubleClickZoom

The map's DoubleClickZoomHandler, which allows the user to zoom by double clicking. Find more details and examples using doubleClickZoom in the DoubleClickZoomHandler section.

dragPan

The map's DragPanHandler, which implements dragging the map with a mouse or touch gesture. Find more details and examples using dragPan in the DragPanHandler section.

dragRotate

The map's 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 DragRotateHandler section.

easeTo(options,eventData?)

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.

Note: The transition will happen instantly if the user has enabled the reduced motion accesibility feature enabled in their operating system, unless 'options' includes essential: true.

Parameters

options (any)Options describing the destination and animation of the transition. Accepts [CameraOptions](/tutorial-Properties-and-options.html) and AnimationOptions.

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map: this

Navigate the map with game-like controls

fitBounds(bounds,options?,eventData?)

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.

Parameters

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?) Options supports all properties from AnimationOptions and CameraOptions in addition to the fields below.

Name	Description
options.padding `(number \| PaddingOptions)?`	The amount of padding in pixels to add to the given bounds.
options.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.
options.easing `Function?`	An easing function for the animated transition. See AnimationOptions.
options.offset `PointLike` default: `[0,0]`	The center of the given bounds relative to the map's center, measured in pixels.
options.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.

Returns

Map:this

Example

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

Fit a map to a bounding box

fitscreenCoordinates(p0, p1, bearing, options, eventData?)

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.

Parameters

p0 (PointLike) First point on screen, in pixel coordinates

p1 (PointLike) Second point on screen, in pixel coordinates

bearing (number) Desired map bearing at end of animation, in degrees

options (any?)

Name	Description
options.padding `(number \| PaddingOptions)?`	The amount of padding in pixels to add to the given bounds.
options.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.
options.easing `Function?`	An easing function for the animated transition. See AnimationOptions .
options.offset `PointLike` default: `[0,0]`	The center of the given bounds relative to the map's center, measured in pixels.
options.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.

Returns

Map:this

Example

var p0 = [220, 400];
var p1 = [500, 900];
map.fitScreenCoordinates(p0, p1, map.getBearing(), {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});

Used by BoxZoomHandler

flyto(options, eventData?)

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.

Note: The animation will be skipped, and this will behave equivalently to jumpTo if the user has the reduced motion accesibility feature enabled in their operating system, unless 'options' includes essential: true.

Parameters

options (Object) Options describing the destination and animation of the transition. Accepts CameraOptions , AnimationOptions, and the following additional options.

Name	Description
options.curve `number` default: `1.42`	The zooming "curve" that will occur along the flight path. A high value maximizes zooming for an exaggerated animation, while a low value minimizes zooming for an effect closer to Map#easeTo . 1.42 is the average value selected by participants in the user study discussed invan Wijk (2003) . A value of`Math.pow(6, 0.25)` would be equivalent to the root mean squared average velocity. A value of 1 would produce a circular motion.
options.minZoom `number?`	The zero-based zoom level at the peak of the flight path. If`options.curve` is specified, this option is ignored.
options.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.
options.screenSpeed `number?`	The average speed of the animation measured in screenfuls per second, assuming a linear timing curve. If `options.speed` is specified, this option is ignored.
options.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.

Returns

Map:this

Example

// 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;
  }
});

getBearing()

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.

Returns

number: The map's current bearing.

Navigate the map with game-like controls

getBounds()

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.

Returns

LngLatBounds

Example

var bounds = map.getBounds();

getCanvas()

Returns the map's <canvas> element.

Returns

HTMLCanvasElement: The map's <canvas> element.

getCanvasContainer()

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.

Returns

HTMLElement: The container of the map's <canvas> .

getCenter()

Returns the map's geographical centerpoint.

Returns

LngLat: The map's geographical centerpoint.

getContainer()

Returns the map's containing HTML element.

Returns

HTMLElement: The map's container.

getFeatureState(feature)

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.

Parameters

feature (Object) Feature identifier. Feature objects returned from Map#queryRenderedFeatures or event handlers can be used as feature identifiers.

Name	Description
feature.id `(string \| number)`	Unique id of the feature.
feature.source `string`	The Id of the vector source or GeoJSON source for the feature.
feature.sourceLayer `string?`	(optional) For vector tile sources, the sourceLayer is required.

Returns

Object: The state of the feature.

getFilter(layerId)

Returns the filter applied to the specified style layer.

Parameters

layerId (string) The ID of the style layer whose filter to get.

Returns

Array: The layer's filter.

getLayer(id)

Returns the layer with the specified ID in the map's style.

Parameters

id (string) The ID of the layer to get.

Returns

Object?: The layer with the specified ID, or undefined if the ID corresponds to no existing layers.

Example

var stateDataLayer = map.getLayer('state-data');

getLayoutProperty(layerId, name)

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

Parameters

layerId (string) The ID of the layer to get the layout property from.

name (string) The name of the layout property to get.

Returns

any: The value of the specified layout property.

getLight()

Returns the value of the light object.

Returns

Object: light Light properties of the style.

getMaxbounds()

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

Returns

(LngLatBounds | null)

Example

var maxBounds = map.getMaxBounds();

getMaxPitch()

Returns the map's maximum allowable pitch.

Returns

number: maxPitch

getMaxZoom()

Returns the map's maximum allowable zoom level.

Returns

number: maxZoom

Example

var maxZoom = map.getMaxZoom();

getMinPitch()

Returns the map's minimum allowable pitch.

Returns

number: minPitch

getMinZoom()

Returns the map's minimum allowable zoom level.

Returns

number: minZoom

Example

var minZoom = map.getMinZoom();

getPaintProperty(layerId, name)

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

Parameters

layerId (string) The ID of the layer to get the paint property from.

name (string) The name of a paint property to get.

Returns

any: The value of the specified paint property.

getPitch()

Returns the map's current pitch (tilt).

Returns

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

getRenderWolrdCopies()

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:

When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude.
Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level.

Returns

boolean: renderWorldCopies

Example

var worldCopiesRendered = map.getRenderWorldCopies();

Render world copies

getSource(id)

Returns the source with the specified ID in the map's style.

Parameters

id (string) The ID of the source to get.

Returns

Object?: The style source with the specified ID, or undefined if the ID corresponds to no existing sources.

Example

var sourceObject = map.getSource('points');

getStyle()

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

Returns

Object: The map's style object.

Example

var styleJson = map.getStyle();

getZoom()

Returns the map's current zoom level.

Returns

number: The map's current zoom level.

hasImage(id)

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

Parameters

id (string) The ID of the image.

Returns

boolean: A Boolean indicating whether the image exists.

Example

// Check if an image with the ID 'cat' exists in
// the style's sprite.
var catIconExists = map.hasImage('cat');

isMoving()

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

Returns

boolean

Example

var isMoving = map.isMoving();

isRotating()

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

Returns

boolean

Example

map.isRotating();

isSourceLoaded(id)

Returns a Boolean indicating whether the source is loaded.

Parameters

id (string) The ID of the source to be checked.

Returns

boolean: A Boolean indicating whether the source is loaded.

Example

var sourceLoaded = map.isSourceLoaded('bathymetry-data');

isStyleLoaded()

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

Returns

boolean: A Boolean indicating whether the style is fully loaded.

Example

var styleLoadStatus = map.isStyleLoaded();

isZooming()

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

Returns

boolean

Example

var isZooming = map.isZooming();

jumpTo(options, eventData?)

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.

Parameters

options (CameraOptions)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

keyboard

The map's KeyboardHandler, which allows the user to zoom, rotate, and pan the map using keyboard shortcuts. Find more details and examples using keyboard in the KeyboardHandler section.

listImages()

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

Returns

Array<string>: An Array of strings containing the names of all sprites/images currently available in the map.

Example

var allImages = map.listImages();

loaded()

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.

Returns

boolean: A Boolean indicating whether the map is fully loaded.

loadImage(url, callback)

Load an image from an external URL to be used with Map#addImage. External domains must support CORS.

Parameters

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.

Example

// Load an image from an external URL.
map.loadImage('http://placekitten.com/50/50', function(error, image) {
if (error) throw error;
// Add the loaded image to the style's sprite with the ID 'kitten'.
map.addImage('kitten', image);
});

Add an icon to the map

moveLayer(id,beforeId)

Moves a layer to a different z-position.

Parameters

id (string) The ID of the layer to move.

beforeId (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.

Returns

Map:this

Example

// Move a layer with ID 'label' before the layer with ID 'waterways'.
map.moveLayer('label', 'waterways');

off(tye, listener)

Removes an event listener previously added with Map#on.

Parameters

type (string) The event type previously used to install the listener.

listener (Function) The function previously installed as a listener.

Returns

Map:this

off(tye,layerId, listener)

Removes an event listener for layer-specific events previously added with Map#on.

Parameters

type (string) The event type previously used to install the listener.

layerId (string) The layer ID previously used to install the listener.

listener (Function) The function previously installed as a listener.

Returns

Map:this

on(type, listener)

Adds a listener for events of a specified type.

Parameters

type (string) The event type to add a listen 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.

Returns

Map:this

on(type, layerId, listener)

Adds a listener for events of a specified type occurring on features in a specified style layer.

Parameters

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.

layerId (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.

Returns

Map:this

panBy(offset, options, eventData)

Pans the map by the specified offset.

Parameters

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.

Returns

Map:this

Navigate the map with game-like controls

panTo(lnglat, options?, eventData?)

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

Parameters

lnglat (LngLatLike) The location to pan the map to.

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

project(lnglat)

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

Parameters

lnglat (LngLatLike) The geographical location to project.

Returns

Point: The Point corresponding to lnglat , relative to the map's container.

Example

var coordinate = [-122.420679, 37.772537];
var point = map.project(coordinate);

queryRenderedFeatures(geometry?, options?)

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

Parameters

geometry ((PointLike | Array``<PointLike>)?)The 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?)

Name	Description
options.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.
options.filter `Array?`	A filter to limit query results.
options.validate `boolean` default: `true`	Whether to check if the [options.filter] conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

Returns

Array<Object>: An array of GeoJSON Feature objects. 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 top-level layer, source, and sourceLayer properties. The layer property 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.

Only features that are currently rendered are included. Some features will not be included, like:

Features from layers whose visibility property is "none". Features from layers whose zoom range excludes the current zoom level. Symbol features that have been hidden due to text or icon collision. 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.

Example

// 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'] });

querySourceFeatures(sourceId, parameters?)

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

Parameters

sourceId (string) The ID of the vector tile or GeoJSON source to query.

parameters (Object?)

Name	Description
parameters.sourceLayer `string?`	The name of the source layer to query. For vector tile sources, this parameter is required. For GeoJSON sources, it is ignored.
parameters.filter `Array?`	A filter to limit query results.
parameters.validate `boolean` default: `true`	Whether to check if the [parameters.filter] conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

Returns

Array<Object>: 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.

Example

// Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});

Highlight features containing similar data

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.

removeControl(control)

Removes the control from the map.

Parameters

control (IControl) The IControl to remove.

Returns

Map:this

Example

// Define a new navigation control.
var navigation = new goongjs.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove zoom and rotation controls from the map.
map.removeControl(navigation);

removeFeatureState(target, key)

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.

Parameters

target (Object) Identifier of where to set state: can be a source, a feature, or a specific key of feature. Feature objects returned from Map#queryRenderedFeatures or event handlers can be used as feature identifiers.

Name	Description
target.id `(string \| number)`	(optional) Unique id of the feature. Optional if key is not specified.
target.source `string`	The Id of the vector source or GeoJSON source for the feature.
target.sourceLayer `string?`	(optional) For vector tile sources, the sourceLayer is required.

key(string)(optional) The key in the feature state to reset.

removeImage(id)

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

Parameters

id (string) The ID of the image.

Example

// If an image with the ID 'cat' exists in
// the style's sprite, remove it.
if (map.hasImage('cat'))  map.removeImage('cat');

removeLayer(id)

Removes the layer with the given ID from the map's style.

If no such layer exists, an error event is fired.

Parameters

id (string) id of the layer to remove

Example

// If a layer with ID 'state-data' exists, remove it.
if (map.getLayer('state-data'))  map.removeLayer('state-data');

removeSource(id)

Removes a source from the map's style.

Parameters

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

Returns

Map:this

Example

map.removeSource('bathymetry-data');

repaint

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

resetNorth(options?, eventData?)

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

Parameters

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

resetNorthPitch(options?, eventData?)

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

Parameters

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

resize(eventData?)

Resizes the map according to the dimensions of its container element.

Checks if the map container size changed and updates the map if it has changed. This method must be called after the map's container is resized programmatically or when the map is shown after being initially hidden with CSS.

Parameters

eventData (Object?) Additional properties to be passed to movestart , move , resize , and moveend events that get triggered as a result of resize. This can be useful for differentiating the source of an event (for example, user-initiated or programmatically-triggered events).

Returns

Map:this

Example

// Resize the map when the map container is shown
// after being initially hidden with CSS.
var mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();

rotateTo(bearing, options?, eventData? )

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.

Parameters

bearing (number) The desired bearing.

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

scrollZoom

The map's ScrollZoomHandler, which implements zooming in and out with a scroll wheel or trackpad. Find more details and examples using scrollZoom in the ScrollZoomHandler section.

setBearing(bearing, eventData?)

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

Parameters

bearing (number) The desired bearing.

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

Example

// rotate the map to 90 degrees
map.setBearing(90);

setCenter(center, eventData?)

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

Parameters

center (LngLatLike) The centerpoint to set. eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

Example

map.setCenter([-74, 38]);

setFeatureState(feature, state)

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.

Parameters

feature (Object) Feature identifier. Feature objects returned from Map#queryRenderedFeatures or event handlers can be used as feature identifiers.

Name	Description
feature.id `(string \| number)`	Unique id of the feature.
feature.source `string`	The Id of the vector source or GeoJSON source for the feature.
feature.sourceLayer `string?`	(optional) For vector tile sources, the sourceLayer is required.

state (Object) A set of key-value pairs. The values should be valid JSON types. This method requires the feature.id attribute on data sets. For GeoJSON sources without feature ids, set the generateId option in the GeoJSONSourceSpecification to auto-assign them. This option assigns ids based on a feature's index in the source data. If you change feature data using map.getSource('some id').setData(..), you may need to re-apply state taking into account updated id values.

setFilter(layerId, filter, options={})

Sets the filter for the specified style layer.

Parameters

layerId (string) The ID of the layer to which the filter will be applied.

filter ((Array | null | undefined))The filter, conforming to the Goong Style Specification's filter definition . If null or undefined is provided, the function removes any existing filter from the layer.

options (Object?) (default {})

Name	Description
options.validate `boolean` default: `true`	Whether to check if the filter conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

Returns

Map:this

Example

map.setFilter('my-layer', ['==', 'name', 'USA']);

setLayerZoomRange(layerId, minzoom, maxzoom)

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.

Note: For style layers using vector sources, style layers cannot be rendered at zoom levels lower than the minimum zoom level of the source layer because the data does not exist at those zoom levels. If the minimum zoom level of the source layer is higher than the minimum zoom level defined in the style layer, the style layer will not be rendered at all zoom levels in the zoom range.

Parameters

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

Returns

Map:this

Example

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

setLayoutProperty(layerId, name, value, options = {})

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

Parameters

layerId (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 property. Must be of a type appropriate for the property, as defined in the Mapbox Style Specification.

options (Object?) (default {})

Name	Description
options.validate `boolean` default: `true`	Whether to check if `value` conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

Returns

Map:this

Example

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

setLight(light, options = {})

Sets the any combination of light values.

Parameters

light (LightSpecification)Light properties to set. Must conform to the Mapbox Style Specification.

options (Object?) (default {})

Name	Description
options.validate `boolean` default: `true`	Whether to check if the filter conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

Returns

Map:this

setMaxBounds(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.

Parameters

bounds ((LngLatBoundsLike | null | undefined)) The maximum bounds to set. If null or undefined is provided, the function removes the map's maximum bounds.

Returns

Map:this

Example

// Define bounds that conform to the `LngLatBoundsLike` object.
var bounds = [
  [-74.04728, 40.68392], // [west, south]
  [-73.91058, 40.87764]  // [east, north]
];
// Set the map's max bounds.
map.setMaxBounds(bounds);

setMaxPitch(maxPitch)

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.

Parameters

maxPitch ((number | null | undefined))The maximum pitch to set. If null or undefined is provided, the function removes the current maximum pitch (sets it to 60).

Returns

Map:this

setMaxZoom(maxZoom)

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.

Parameters

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

Returns

Map:this

Example

map.setMaxZoom(18.75);

setMinPitch(minPitch)

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.

Parameters

minPitch ((number | null | undefined))The minimum pitch to set (0-60). If null or undefined is provided, the function removes the current minimum pitch (i.e. sets it to 0).

Returns

Map:this

setMinZoom(minZoom)

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.

It is not always possible to zoom out and reach the set minZoom. Other factors such as map height may restrict zooming. For example, if the map is 512px tall it will not be possible to zoom below zoom 0 no matter what the minZoom is set to.

Parameters

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

Returns

Map:this

Example

map.setMinZoom(12.25);

setPaintProperty(layerId, name, value, options = {})

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

Parameters

layerId (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 property to set. Must be of a type appropriate for the property, as defined in the Goong Style Specification.

options (Object?) (default {})

Name	Description
options.validate `boolean` default: `true`	Whether to check if `value` conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

Returns

Map:this

Example

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

setPitch(pitch, eventData?)

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

Parameters

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.

Returns

Map:this

setRenderWolrdCopies(renderWolrdCopies)

Sets the state of renderWorldCopies.

Parameters

renderWorldCopies (boolean) If true , multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to false:

When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude.
Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level.

undefined is treated as true, null is treated as false.

Returns

Map:this

Example

map.setRenderWorldCopies(true);

Render world copies

setStyle(style, options?)

Updates the map's Mapbox style object with a new value.

If a style is already set when this is used and options.diff is set to true, the map renderer will attempt to compare the given style against the map's current state and perform only the changes necessary to make the map style match the desired state. Changes in sprites (images used for icons and patterns) and glyphs (fonts for label text) cannot be diffed. If the sprites or fonts used in the current style and the given style are different in any way, the map renderer will force a full update, removing the current style and building the given one from scratch.

Parameters

style ((StyleSpecification | string | null))A JSON object conforming to the schema described in the Goong Style Specification , or a URL to such JSON.

options (Object?)

Name	Description
options.diff `boolean` default: `true`	If false, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
options.localIdeographFontFamily `string` default: `'sans-serif'`	Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana' and 'Hangul Syllables' ranges. In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). Set to `false` , to enable font settings from the map's style for these glyph ranges. Forces a full update.

Returns

Map:this

Example

map.setStyle("mapbox://styles/mapbox/streets-v11");

Change a map's style

setZoom(zoom, eventData?)

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

Parameters

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.

Returns

Map:this

Example

// zoom the map to 5
map.setZoom(5);

showCollisionBoxes

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.

showTileBoundaries

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.

The uncompressed file size of the first vector source is drawn in the top left corner of each tile, next to the tile ID.

snapToNorth(options?, eventData?)

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

Parameters

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

stop()

Stops any animated transition underway.

Returns

Map:this

touchZoomRotate

The map's TouchZoomRotateHandler, which allows the user to zoom or rotate the map with touch gestures. Find more details and examples using touchZoomRotate in the TouchZoomRotateHandler section.

triggerRepaint()

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)

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

Parameters

point (PointLike) The pixel coordinates to unproject.

Returns

LngLat: The LngLat corresponding to point .

Example

map.on('click', function(e) {
  // When the map is clicked, get the geographic coordinate.
  var coordinate = map.unproject(e.point);
  });

updateImage(id, image)

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.

Parameters

id (string) The ID of the image.

image ((HTMLImageElement| ImageBitmap | ImageData | {width:number, height: number, data: ``(Uint8Array |Uint8ClampedArray)} | StyleImageInterface)) The image as an HTMLImageElement , ImageData , ImageBitmap or object with width , height , and data properties with the same format as ImageData.

Example

// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat'))  map.updateImage('cat', './other-cat-icon.png');

version

The version of Goong GL JS in use as specified in package.json, CHANGELOG.md, and the GitHub release.

zoomIn(options?, eventData?)

Increases the map's zoom level by 1.

Parameters

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

zoomOut(options?, eventData?)

Decreases the map's zoom level by 1.

Parameters

options (AnimationOptions?)

eventData (Object?) Additional properties to be added to event objects of events triggered by this method.

Returns

Map:this

zoomTo(options?, eventData?)

Zooms the map to the specified zoom level, with an animated transition.

Parameters

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.

Returns

Map:this

Events

Display a map

Parameters

Example

Instance Members

Parameters

Returns

Example

Related

Parameters

Example

Related

Parameters

Returns

Example

Related

Parameters

Returns

Example

Related

Returns

Example

Parameters

Returns

Parameters

Returns

Related

Parameters

Returns

Example

Related

Parameters

Returns

Example

Related

Parameters

Returns

Example

Related

Returns

Related

Returns

Example

Returns

Related

Returns

Related

Returns

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Example

Related

Parameters

Returns

Returns

Returns

Example

Returns

Returns

Example

Returns

Returns

Example

Parameters

Returns

Returns

Returns

Example

Related

Parameters

Returns

Example