# GlMap
# Props
# mapbox-gl
- Type:
Object
- Default:
null
- Description:
mapbox-gl
implementation. Useful for lazy-loading. If omitted, VMapbox imports mapbox-gl js dynamically.
- Description:
# map-style
- Type:
String
,Object
- Default:
undefined
- Required
- Synced
- Description: The map's Mapbox style. This must be an a JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON.
- See:
options.style
in Map (opens new window)
# access-token
- Type:
String
- Default:
undefined
- Non-Synced
- Description: Token required to access the tiles provided by Mapbox
- See: accessToken (opens new window)
# container
- Type:
String
,HTMLElement
- Default:
#map-{random number}
- Non-Synced
- Description: The HTML element in which Mapbox GL JS will render the map
- See:
options.container
in Map (opens new window)
# min-zoom
- Type:
Number
- Default:
0
- Synced
- Description: Minimum zoom level of the map (0-24)
- See:
options.minZoom
in Map (opens new window)
# max-zoom
- Type:
Number
- Default:
22
- Synced
- Description: Maximum zoom level of the map (0-24)
- See:
options.maxZoom
in Map (opens new window)
# min-pitch
- Type:
Number
- Default:
0
- Synced
- Description: The minimum pitch of the map (0-60)
- See:
options.minPitch
in Map (opens new window)
# max-pitch
- Type:
Number
- Default:
0
- Synced
- Description: The maximum pitch of the map (0-60)
- See:
options.maxPitch
in Map (opens new window)
# hash
- Type:
Boolean
,String
- Default:
false
- Synced
- Description: 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. If it's a string, it will be the name of the param in a parameter-styled hash.
- See:
options.hash
in Map (opens new window)
# interactive
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If false, no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to interaction
- See:
options.interactive
in Map (opens new window)
# bearing-snap
- Type:
Number
- Default:
7
- Non-Synced
- Description: The threshold, measured in degrees, that determines when the map's bearing will snap to north
- See:
options.bearingSnap
in Map (opens new window)
# pitch-with-rotate
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If false , the map's pitch (tilt) control with "drag to rotate" interaction will be disabled
- See:
options.pitchWithRotate
in Map (opens new window)
# click-tolerance
- Type:
Number
- Default:
3
- Non-Synced
- Description: 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)
- See:
options.clickTolerance
in Map (opens new window)
# attribution-control
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If true, an AttributionControl will be added to the map
- See:
options.attributionControl
in Map (opens new window)
# custom-attribution
- Type:
String
,Array
- Default:
null
- Non-Synced
- Description: String or strings to show in an AttributionControl. Only applicable if
options.attributionControl
istrue
- See:
options.customAttribution
in Map (opens new window)
# logo-position
- Type:
String
,top-left
,top-right
,bottom-right
,bottom-left
- Default:
bottom-left
- Non-Synced
- Description: A string representing the position of the Mapbox wordmark on the map
- See:
options.logoPosition
in Map (opens new window)
# fail-if-major-performance-caveat
- Type:
Boolean
- Default:
false
- Non-Synced
- Description: If true, map creation will fail if the performance of Mapbox GL JS would be dramatically worse than expected (i.e. a software renderer would be used)
- See:
options.failIfMajorPerformanceCaveat
in Map (opens new window)
# preserve-drawing-buffer
- Type:
Boolean
- Default:
false
- Non-Synced
- Description: If
true
, the map's canvas can be exported to a PNG usingmap.getCanvas().toDataURL()
. This isfalse
by default as a performance optimization - See:
options.preserveDrawingBuffer
in Map (opens new window)
# antialias
- Type:
Boolean
- Default:
false
- Non-Synced
- Description: If
true
, the gl context will be created with MSAA antialiasing, which can be useful for antialiasing custom layers. This isfalse
by default as a performance optimization - See:
options.antialias
in Map (opens new window)
# refresh-expired-tiles
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If true, the map won't attempt to re-request tiles once they expire per their HTTP cacheControl / expires headers.
- See:
options.refreshExpiredTiles
in Map (opens new window)
# max-bounds
- Type:
Array
,LngLatBoundsLike object
- Default:
undefined
- Synced
- Description: If set, the map will be constrained to the given bounds
- See:
options.maxBounds
in Map (opens new window)
# scroll-zoom
- Type:
Boolean
,Object
- Default:
true
- Non-Synced
- Description: If true, the "scroll to zoom" interaction is enabled. An Object value is passed as options to ScrollZoomHandler#enable
- See:
options.scrollZoom
in Map (opens new window)
# box-zoom
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If true, the "box zoom" interaction is enabled
- See:
options.boxZoom
in Map (opens new window)
# drag-rotate
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If true, the "drag to rotate" interaction is enabled
- See:
options.dragRotate
in Map (opens new window)
# drag-pan
- Type:
Boolean
,Object
- Default:
true
- Non-Synced
- Description: If
true
, the "drag to pan" interaction is enabled. An Object value is passed as options to DragPanHandler#enable (opens new window). - See:
options.dragRotate
in Map (opens new window)
# keyboard
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If true, keyboard shortcuts are enabled
- See:
options.keyboard
in Map (opens new window)
# double-click-zoom
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If true, the "double click to zoom" interaction is enabled
- See:
options.doubleClickZoom
in Map (opens new window)
# touch-zoom-rotate
- Type:
Boolean
,Object
- Default:
true
- Non-Synced
- Description: If true, the "pinch to rotate and zoom" interaction is enabled. An Object value is passed as options to TouchZoomRotateHandler#enable (opens new window)
- See:
options.touchZoomRotate
in Map (opens new window)
# touch-pitch
- Type:
Boolean
,Object
- Default:
true
- Non-Synced
- Description: If
true
, the "drag to pitch" interaction is enabled. An Object value is passed as options to TouchPitchHandler#enable (opens new window) - See:
options.touchPitch
in Map (opens new window)
# track-resize
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If
true
, the map will automatically resize when the browser window resizes - See:
options.trackResize
in Map (opens new window)
# center
- Type:
Array, LngLatLike Object
- Default:
undefined
- Synced
- Description: Geographical centerpoint of the map. If center is not specified in the constructor options, Mapbox 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]
- See:
options.center
in Map (opens new window)
# zoom
- Type:
Number
- Default:
undefined
- Synced
- Description: Zoom level of the map. If zoom is not specified in the constructor options, Mapbox 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
- See:
options.zoom
in Map (opens new window)
# bearing
- Type:
Number
- Default:
undefined
- Synced
- Description: Bearing (rotation) of the map, measured in degrees counter-clockwise from north. If bearing is not specified in the constructor options, Mapbox 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
- See:
options.bearing
in Map (opens new window)
# pitch
- Type:
Number
- Default:
undefined
- Synced
- Description: 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, Mapbox 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
- See:
options.pitch
in Map (opens new window)
# bounds
- Type:
Array
,LngLatBoundsLike object
- Default:
undefined
- Description: The initial bounds of the map. If set, it overrides
center
andzoom
construction options - See:
options.bounds
in Map (opens new window)
# fit-bounds-options
- Type:
fitBounds object
- Default:
undefined
- Description: A
fitBounds
(opens new window) object to use only when fitting the initialbounds
provided above - See:
options.fitBoundsOptions
in Map (opens new window)
# render-world-copies
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: If
true
, multiple copies of the world will be rendered, when zoomed out - See:
options.renderWorldCopies
in Map (opens new window)
# max-tile-cache-size
- Type:
Number
- Default:
null
- Non-Synced
- Description: 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.
- See:
options.renderWorldCopies
in Map (opens new window)
# local-ideograph-font-family
- Type:
String
- Default:
'sans-serif'
- Non-Synced
- Description: If specified, defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs' 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). The purpose of this option is to avoid bandwidth-intensive glyph server requests.
- See:
options.localIdeographFontFamily
in Map (opens new window)
# transform-request
- Type:
Function
- Default:
null
- Non-Synced
- Description: 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 optionallyheaders
andcredentials
properties. - See:
options.transformRequest
in Map (opens new window)
# collect-resource-timing
- Type:
Boolean
- Default:
false
- Non-Synced
- Description: 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 aresourceTiming
property of relevant data events - See:
options.collectResourceTiming
in Map (opens new window)
# fade-duration
- Type:
Number
- Default:
300
- Non-Synced
- Description: 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.
- See:
options.fadeDuration
in Map (opens new window)
# cross-source-collisions
- Type:
Boolean
- Default:
true
- Non-Synced
- Description: 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.
- See:
options.crossSourceCollisions
in Map (opens new window)
# locale
- Type:
Object
- Default:
undefined
- Non-Synced
- Description: 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; seesrc/ui/default_locale.js
(opens new window) 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). - See:
options.locale
in Map (opens new window)
# r-t-l-text-plugin-url
- Type:
String
- Default:
undefined
- Synced
- Description: Sets the map's RTL text plugin (opens new window). Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Mapbox Studio loads this plugin by default.
- See: See setrtltextplugin (opens new window) Map method and an example (opens new window)
# light
- Type:
Object
- Default:
undefined
- Synced
- Description: Light properties. Must conform to the Mapbox Style Specification
- See: See setLight (opens new window) Map method
# tile-boundaries
- Type:
Boolean
- Default:
false
- Synced
- Description: A Boolean indicating whether the map will render an outline around each tile. These tile boundaries are useful for debugging
- See: See showTileBoundaries (opens new window) Map property
# collision-boxes
- Type:
Boolean
- Default:
false
- Synced
- Description: 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
- See: See showCollisionBoxes (opens new window) Map property
# repaint
- Type:
Boolean
- Default:
false
- Synced
- Description: A Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance.
- See: See repaint (opens new window) Map property
# Actions
Asynchronous actions exposed via GlMap.actions
TIP
Map-promisified (opens new window) is used as wrapper around Mapbox GL JS methods. That library can be used independently from VueMapbox.
# .stop(eventData?)
- Arguments:
eventData
{Object}
Custom data passed to corresponfing event.
- Description: Stops all animations on the map
- Returns:
{Promise<{ pitch, zoom, bearing, center }>}
Promise that resolves object with map parameters on the moment of callstop()
# .panBy(offset, options?, eventData?)
- Arguments:
offset
{Point | number[]}
x and y coordinates by which to pan the mapoptions
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: Pans the map by the specified offest
- Returns:
{Promise<{ eventData, center }>}
Promise that resolves object with event data and new center of the map when animation ends - See: panBy (opens new window) Map method
# .panTo(coordinates, options?, eventData?)
- Arguments:
coordinates
{LngLat | number[][]}
The location to pan the map to. See also: LngLat (opens new window)options
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: Pans the map to the specified location, with an animated transition
- Returns:
{Promise<{ eventData, center }>}
Promise that resolves object with event data and new center of the map when animation ends - See: panTo (opens new window) Map method
# .zoomTo(zoom, options?, eventData?)
- Arguments:
zoom
{number}
The zoom level to transition tooptions
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: Zooms the map to the specified zoom level, with an animated transition
- Returns:
{Promise<{ eventData, zoom }>}
Promise that resolves object with event data and new zoom level of the map when animation ends - See: zoomTo (opens new window) Map method
# .zoomIn(options?, eventData?)
- Arguments:
options
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: Increases the map's zoom level by 1
- Returns:
{Promise<{ eventData, zoom }>}
Promise that resolves object with event data and new zoom level of the map when animation ends - See: zoomIn (opens new window) Map method
# .zoomOut(options?, eventData?)
- Arguments:
options
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: Decreases the map's zoom level by 1
- Returns:
{Promise<{ eventData, zoom }>}
Promise that resolves object with event data and new zoom level of the map when animation ends - See: zoomOut (opens new window) Map method
# .rotateTo(bearing, options?, eventData?)
- Arguments:
bearing
{number}
The desired bearingoptions
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: 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.
- Returns:
{Promise<{ eventData, bearing }>}
Promise that resolves object with event data and new bearing of the map when animation ends - See: rotateTo (opens new window) Map method
# .resetNorth(options?, eventData?)
- Arguments:
options
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)
- Description: Rotates the map so that north is up (0° bearing), with an animated transition
- Returns:
{Promise<{ eventData, bearing }>}
Promise that resolves object with event data and new bearing of the map when animation ends - See: resetNorth (opens new window) Map method
# .snapToNorth(options?, eventData?)
- Arguments:
options
{AnimationOptions object}
animation options. See AnimationOptions (opens new window)eventData
{Object}
Custom data passed to corresponfing event.
- Description: Snaps the map so that north is up (0° bearing), if the current bearing is close enough to it (i.e. within the
bearingSnap
prop threshold). - Returns:
{Promise<{ eventData, bearing }>}
Promise that resolves object with event data and new bearing of the map when animation ends - See: snapToNorth (opens new window) Map method
# .fitBounds(bounds, options?, eventData?)
- Arguments:
bounds
{ number[][] | LngLatBounds }
Center these bounds in the viewport and use the highest zoom level up to and includingmaxZoom
that fits them in the viewportoptions
{Object}
options.padding?
{number}
The amount of padding in pixels to add to the given boundsoptions.linear
{boolean}
default:false
If true , the map transitions usingMap#easeTo
. If false , the map transitions usingMap#flyTo
. See those functions and AnimationOptions for information about options available.options.easing?
An easing function for the animated transition. See AnimationOptions (opens new window)options.offset
{ number[] | Point }
default:[0, 0]
The center of the given bounds relative to the map's center, measured in pixelsoptions.maxZoom?
{number}
The maximum zoom level to allow when the map view transitions to the specified bounds
eventData
{Object}
Custom data passed to corresponfing event.
- Description: 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
- Returns:
{Promise<{ eventData, bounds }>}
Promise that resolves object with event data and new bounds of the map when animation ends - See: fitBounds (opens new window) Map method
# .jumpTo(options, eventData?)
- Arguments:
options
{Object}
See CameraOptions (opens new window)options.pitch?
{number}
The desired pitch, in degreesoptions.zoom?
{number}
The desired zoom leveloptions.center?
{number[] | LngLat}
The desired centeroptions.bearing?
{number}
The desired bearing, in degreesoptions.around?
{number[] | LngLat}
Ifzoom
is specified,around
determines the point around which the zoom is centered.
eventData
{Object}
Custom data passed to corresponfing event.
- Description: 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
- Returns:
{Promise<{ eventData, pitch, zoom, center, bearing }>}
Promise that resolves object with event data and new pitch, zoom, center and bearing of the map - See: jumpTo (opens new window) Map method
# .easeTo(options, eventData?)
Arguments:
options
{Object}
Combination of CameraOptions (opens new window) and AnimationOptions (opens new window)options.pitch?
{number}
The desired pitch, in degreesoptions.zoom?
{number}
The desired zoom leveloptions.center?
{number[] | LngLat}
The desired centeroptions.bearing?
{number}
The desired bearing, in degreesoptions.around?
{number[] | LngLat}
Ifzoom
is specified,around
determines the point around which the zoom is centered.options.duration?
{number}
The animation's duration, measured in milliseconds.options.easing?
{Function}
A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state.options.offset?
{number[] | Point}
of the target center relative to real map container center at the end of animation.options.animate?
{boolean}
: Iffalse
, no animation will occur
eventData
{Object}
Custom data passed to corresponfing event.
Description: 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
Returns:
{Promise<{ eventData, pitch, zoom, center, bearing }>}
Promise that resolves object with event data and new pitch, zoom, center and bearing of the map when animations endsSee: easeTo (opens new window) Map method
# .flyTo(options, eventData?)
- Arguments:
options
{Object}
options.curve?
{number}
default1.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 in van 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 motionoptions.minZoom?
{number}
The zero-based zoom level at the peak of the flight path. Ifoptions.curve
is specified, this option is ignoredoptions.speed?
{number}
default1.2
The average speed of the animation defined in relation tooptions.curve
. A speed of 1.2 means that the map appears to move along the flight path by 1.2 timesoptions.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 leveloptions.screenSpeed?
{number}
The average speed of the animation measured in screenfuls per second, assuming a linear timing curve. Ifoptions.speed
is specified, this option is ignoredoptions.maxDuration?
{number}
The animation's maximum duration, measured in milliseconds. If duration exceeds maximum duration, it resets to 0
eventData
{Object}
Custom data passed to corresponfing event.
- Description: 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
- Returns:
{Promise<{ eventData, pitch, zoom, center, bearing }>}
Promise that resolves object with event data and new pitch, zoom, center and bearing of the map when animations ends - See: flyTo (opens new window) Map method
# Events
Payload of events contains object with properties:
mapboxEvent
Original Mapbox GL JS eventmap
Current map objectcomponent
Component that emits event
# @load
- Description: Fires after map fully loaded
- Payload
{ map, component }
map
is Mapbox Gl JS Map object,component
is instance of GlMap component
GlMap passes all Mapbox GL JS Map events. Full list of map events see here (opens new window)