Popup(options, options.closeButton, options.closeOnClick)
Creates a popup component
| parameter | type | description |
|---|---|---|
| options | Object |
|
| options.closeButton | Boolean |
|
| options.closeOnClick | Boolean |
var tooltip = new mapboxgl.Popup()
.setLatLng(map.unproject(e.point))
.setHTML("<h1>Hello World!</h1>")
.addTo(map);
setText(text)
Popuplate a popup element with text only content
| parameter | type | description |
|---|---|---|
| text | string |
Popupthis
setHTML(html)
Popuplate a popup element with HTML content
| parameter | type | description |
|---|---|---|
| html | string |
Popupthis
setLatLng(latlng)
Set the coordinates of a popup element to a map
| parameter | type | description |
|---|---|---|
| latlng | LatLng |
Popupthis
remove
Removes the popup from the map
Popupthis
var popup = new mapboxgl.Popup().addTo(map);
popup.remove();
addTo(map)
Attaches the popup to a map
| parameter | type | description |
|---|---|---|
| map | Map |
Popupthis
Map(options, options.container)
Creates a map instance.
| parameter | type | description |
|---|---|---|
| options | Object |
|
| options.container | String |
HTML element to initialize the map in (or element id as string) |
zoomTo(zoom, animOptions)
Zooms to a certain zoom level with easing.
| parameter | type | description |
|---|---|---|
| zoom | Number |
|
| animOptions |
this
zoomOut(animOptions)
Zoom out by 1 level
| parameter | type | description |
|---|---|---|
| animOptions |
this
zoomIn(animOptions)
Zoom in by 1 level
| parameter | type | description |
|---|---|---|
| animOptions |
this
update(updateStyle)
Update this map's style and re-render the map.
| parameter | type | description |
|---|---|---|
| updateStyle | Object |
new style |
Mapthis
stop
Stop current animation
this
setView(center, zoom, bearing, pitch)
Sets a map position
| parameter | type | description |
|---|---|---|
| center | Array |
Latitude and longitude (passed as |
| zoom | number |
Map zoom level |
| bearing | number |
Map rotation bearing in degrees counter-clockwise from north |
| pitch | number |
The angle at which the camera is looking at the ground |
Mapthis
setZoom(zoom)
Sets a map zoom
| parameter | type | description |
|---|---|---|
| zoom | number |
Map zoom level |
Mapthis
unproject(point)
Get geographical coordinates given pixel coordinates
| parameter | type | description |
|---|---|---|
| point | Array<number> |
[x, y] pixel coordinates |
LatLng
setLayoutProperty(layer, name, value)
Set the value of a layout property in a given style layer.
| parameter | type | description |
|---|---|---|
| layer | string |
ID of a layer |
| name | string |
name of a layout property |
| value | Any | value for the layout propery; must have the type appropriate for the property as defined in the Style Specification |
Mapthis
setBearing(bearing)
Sets a map rotation
| parameter | type | description |
|---|---|---|
| bearing | number |
Map rotation bearing in degrees counter-clockwise from north |
Mapthis
setPaintProperty(layer, name, value, [klass])
Set the value of a paint property in a given style layer.
| parameter | type | description |
|---|---|---|
| layer | string |
ID of a layer |
| name | string |
name of a paint property |
| value | Any | value for the paint propery; must have the type appropriate for the property as defined in the Style Specification |
| klass | [ |
optional class specifier for the property |
Mapthis
setCenter(center)
Sets a map location
| parameter | type | description |
|---|---|---|
| center | Array |
Latitude and longitude (passed as |
Mapthis
setFilter(layer, filter)
Set the filter for a given style layer.
| parameter | type | description |
|---|---|---|
| layer | string |
ID of a layer |
| filter | Array |
filter specification, as defined in the Style Specification |
Mapthis
setClasses(klasses, options)
Helper method to add more than one class
| parameter | type | description |
|---|---|---|
| klasses | Array<string> |
An array of class names |
| options | styleOptions |
Mapthis
rotateTo(bearing, animOptions)
Rotate bearing by a certain number of degrees with easing
| parameter | type | description |
|---|---|---|
| bearing | Number |
|
| animOptions |
this
setStyle(style)
Replaces the map's style object
| parameter | type | description |
|---|---|---|
| style | Object |
A style object formatted as JSON |
Mapthis
removeSource(id)
Remove an existing source from the map style.
| parameter | type | description |
|---|---|---|
| id | string |
ID of the source to remove |
Mapthis
getSource(id)
Return the style source object with the given id.
| parameter | type | description |
|---|---|---|
| id | string |
source ID |
Object
project(latlng)
Get pixel coordinates (relative to map container) given a geographical location
| parameter | type | description |
|---|---|---|
| latlng | LatLng |
Objectx and y coordinates
hasClass(klass)
Check whether a style class is active
| parameter | type | description |
|---|---|---|
| klass | string |
Name of style class |
boolean
removeLayer(id)
Remove the layer with the given id from the map. Any layers which refer to the
specified layer via a ref property are also removed.
| parameter | type | description |
|---|---|---|
| id | string |
Mapthis
removeClass(klass, options)
Removes a style class from a map
| parameter | type | description |
|---|---|---|
| klass | string |
name of style class |
| options | styleOptions |
Mapthis
getPaintProperty(layer, name, [klass])
Get the value of a paint property in a given style layer.
| parameter | type | description |
|---|---|---|
| layer | string |
ID of a layer |
| name | string |
name of a paint property |
| klass | [ |
optional class specifier for the property |
Any
:
value for the paint propery
panBy(offset, animOptions)
Pan by a certain number of pixels
| parameter | type | description |
|---|---|---|
| offset | Array |
[x, y] |
| animOptions |
this
loaded
Is this map fully loaded? If the style isn't loaded or it has a change to the sources or style that isn't propagated to its style, return false.
booleanwhether the map is loaded
render
Call when a (re-)render of the map is required, e.g. when the user panned or zoomed,f or new data is available.
Mapthis
panTo(latlng, animOptions)
Pan to a certain location with easing
| parameter | type | description |
|---|---|---|
| latlng | Object |
a |
| animOptions |
this
resetNorth(animOptions)
Sets map bearing to 0 (north) with easing
| parameter | type | description |
|---|---|---|
| animOptions |
this
fitBounds(bounds, options)
Zoom to contain certain geographical bounds
| parameter | type | description |
|---|---|---|
| bounds | Array |
[[minLat, minLng], [maxLat, maxLng]] |
| options | Object |
easeTo(latlng, zoom, bearing, pitch, animOptions)
Easing animation to a specified location/zoom/bearing
| parameter | type | description |
|---|---|---|
| latlng | Object |
a |
| zoom | Number |
|
| bearing | Number |
|
| pitch | Number |
|
| animOptions |
this
flyTo(latlng, zoom, bearing, options)
Flying animation to a specified location/zoom/bearing with automatic curve
| parameter | type | description |
|---|---|---|
| latlng | Object |
a |
| zoom | Number |
|
| bearing | Number |
|
| options | Object |
getBearing
Get the current bearing in degrees
number
getClasses
Return an array of the current active style classes
boolean
getBounds
Get the map's geographical bounds
LatLngBounds
featuresAt(point, params)
Get all features at a point ([x, y])
| parameter | type | description |
|---|---|---|
| point | Array<number> |
[x, y] pixel coordinates |
| params | Object |
getFilter(layer)
Get the filter for a given style layer.
| parameter | type | description |
|---|---|---|
| layer | string |
ID of a layer |
Arrayfilter specification, as defined in the Style Specification
getLayoutProperty(layer, name, [klass])
Get the value of a layout property in a given style layer.
| parameter | type | description |
|---|---|---|
| layer | string |
ID of a layer |
| name | string |
name of a layout property |
| klass | [ |
optional class specifier for the property |
Any
:
value for the layout propery
getContainer
Get the Map's container as an HTML element
HTMLElementcontainer
getCanvas
Get the Map's canvas as an HTML canvas
HTMLElementcanvas
setPitch(pitch)
Sets a map angle
| parameter | type | description |
|---|---|---|
| pitch | number |
The angle at which the camera is looking at the ground |
Mapthis
addClass(klass, options)
Adds a style class to a map
| parameter | type | description |
|---|---|---|
| klass | string |
name of style class |
| options | styleOptions |
Mapthis
addSource(id, source)
Add a source to the map style.
| parameter | type | description |
|---|---|---|
| id | string |
ID of the source. Must not be used by any existing source. |
| source | Object |
source specification, following the Mapbox GL Style Reference |
Mapthis
addLayer(layer, [before])
Add a layer to the map style. The layer will be inserted before the layer with
ID before, or appended if before is omitted.
| parameter | type | description |
|---|---|---|
| layer | Layer |
|
| before | [ |
ID of an existing layer to insert before |
Mapthis
GeoJSONSource
Create a GeoJSON data source instance given an options object
setData(data)
Update source geojson data and rerender map
| parameter | type | description |
|---|---|---|
| data | Object or String |
A GeoJSON data object or URL to it. The latter is preferable in case of large GeoJSON files. |
Control
A base class for map-related interface elements.
addTo(map)
Add this control to the map, returning the control itself
for chaining. This will insert the control's DOM element into
the map's DOM element if the control has a position specified.
| parameter | type | description |
|---|---|---|
| map | Map |
Controlthis
js/ui/control/attribution.js
Attribution
Creates an attribution control
map.addControl(new mapboxgl.Attribution());
LatLng(lat, lng)
Create a latitude, longitude object from a given latitude and longitude pair in degrees.
| parameter | type | description |
|---|---|---|
| lat | number |
latitude |
| lng | number |
longitude |
var latlng = new mapboxgl.LatLng(37.76, -122.44);
wrap
Return a new LatLng object whose longitude is wrapped to the range (-180, 180).
LatLngwrapped LatLng object
convert(input)
Convert an array to a LatLng object, or return an existing LatLng object
unchanged.
| parameter | type | description |
|---|---|---|
| input | Array<number> or LatLng |
|
LatLngLatLng object or original input
Evented
Methods mixed in to other classes for event capabilities.
listens
Check if an event is registered to a type
BooleanReturns true if the object listens to an event of a particular type
once(type, listener)
Call a function once when an event has fired
| parameter | type | description |
|---|---|---|
| type | String |
Event type. |
| listener | Function |
Function to be called once when the event is fired |
off
Remove a event listener
on(type, listener)
Subscribe to a specified event with a listener function the latter gets the data object that was passed to fire and additionally target and type properties
| parameter | type | description |
|---|---|---|
| type | String |
Event type |
| listener | Function |
Function to be called when the event is fired |
fire(type)
Fire event of a given string type with the given data object
| parameter | type | description |
|---|---|---|
| type | String |
The event name |
LatLngBounds(sw, ne)
Creates a bounding box from the given pair of points. If parameteres are omitted, a null bounding box is created.
| parameter | type | description |
|---|---|---|
| sw | LatLng |
southwest |
| ne | LatLng |
northeast |
var sw = new mapboxgl.LatLng(0, 0);
var ne = new mapboxgl.LatLng(10, -10);
var bounds = new mapboxgl.LatLngBounds(sw, ne);
getSouthWest
Get southwest corner
LatLngsouthwest
getNorthEast
Get northeast corner
LatLngnortheast
getNorthWest
Get northwest corner
LatLngnorthwest
getSouthEast
Get southeast corner
LatLngsoutheast
extend(obj)
Extend the bounds to include a given LatLng or LatLngBounds.
| parameter | type | description |
|---|---|---|
| obj | LatLng or LatLngBounds |
object to extend to |
LatLngBoundsthis
VideoSource
Create a Video data source instance given an options object
extend
latY(lat)
latitude to absolute y coord
| parameter | type | description |
|---|---|---|
| lat | Number |
supported(options)
Test whether the basic JavaScript and DOM features required for Mapbox GL are present.
| parameter | type | description |
|---|---|---|
| options | Object |
window
mapboxgl is a A WebGL JavaScript interactive maps library that can render Mapbox vector tiles.
lngX(lon)
lat/lon <-> absolute pixel coords conversion
| parameter | type | description |
|---|---|---|
| lon | Number |