vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
24 lines (23 loc) • 77.3 kB
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GlMap | VueMapbox</title>
<meta name="description" content="Combine powers of Mapbox GL JS and Vue.js">
<link rel="icon" href="/vue-mapbox/favicon.ico">
<link rel="preload" href="/vue-mapbox/assets/css/0.styles.622f01af.css" as="style"><link rel="preload" href="/vue-mapbox/assets/js/app.1613afe0.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/2.1a36c030.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/14.3affa2b5.js" as="script"><link rel="prefetch" href="/vue-mapbox/assets/js/10.496a25ae.js"><link rel="prefetch" href="/vue-mapbox/assets/js/11.c30d5454.js"><link rel="prefetch" href="/vue-mapbox/assets/js/12.43a2535b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/13.0cb68667.js"><link rel="prefetch" href="/vue-mapbox/assets/js/15.40b3c4ef.js"><link rel="prefetch" href="/vue-mapbox/assets/js/16.7de1d511.js"><link rel="prefetch" href="/vue-mapbox/assets/js/17.95d02626.js"><link rel="prefetch" href="/vue-mapbox/assets/js/18.449ed0f5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/19.38617f97.js"><link rel="prefetch" href="/vue-mapbox/assets/js/20.f9650703.js"><link rel="prefetch" href="/vue-mapbox/assets/js/21.39c66c8d.js"><link rel="prefetch" href="/vue-mapbox/assets/js/22.276c6a9c.js"><link rel="prefetch" href="/vue-mapbox/assets/js/23.87f4c25b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/24.9d297e6b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/25.f1bf9c1c.js"><link rel="prefetch" href="/vue-mapbox/assets/js/3.02aa2be5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/4.79bc4f3c.js"><link rel="prefetch" href="/vue-mapbox/assets/js/5.d3d1578a.js"><link rel="prefetch" href="/vue-mapbox/assets/js/6.49edb5d4.js"><link rel="prefetch" href="/vue-mapbox/assets/js/7.e6ed37a7.js"><link rel="prefetch" href="/vue-mapbox/assets/js/8.3e4706bb.js"><link rel="prefetch" href="/vue-mapbox/assets/js/9.5e3d2dbf.js">
<link rel="stylesheet" href="/vue-mapbox/assets/css/0.styles.622f01af.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-mapbox/" class="home-link router-link-active"><!----> <span class="site-name">VueMapbox</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-mapbox/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link router-link-exact-active router-link-active">API</a></div><div class="nav-item"><a href="https://github.com/soal/vue-mapbox" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer" class="nav-link external">
map-promisified
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-mapbox/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link router-link-exact-active router-link-active">API</a></div><div class="nav-item"><a href="https://github.com/soal/vue-mapbox" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer" class="nav-link external">
map-promisified
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/guide/" class="sidebar-link">Quickstart</a></li><li><a href="/vue-mapbox/guide/basemap.html" class="sidebar-link">Base map</a></li><li><a href="/vue-mapbox/guide/composition.html" class="sidebar-link">Composition</a></li><li><a href="/vue-mapbox/guide/controls.html" class="sidebar-link">Controls</a></li><li><a href="/vue-mapbox/guide/markers&popups.html" class="sidebar-link">Markers and popups</a></li><li><a href="/vue-mapbox/guide/layers&sources.html" class="sidebar-link">Layers and sources</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/api/" class="active sidebar-link">GlMap</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/api/#props" class="sidebar-link">Props</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/#actions" class="sidebar-link">Actions</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/vue-mapbox/api/controls.html" class="sidebar-link">Controls</a></li><li><a href="/vue-mapbox/api/marker.html" class="sidebar-link">MapMarker</a></li><li><a href="/vue-mapbox/api/popup.html" class="sidebar-link">Popup</a></li><li><a href="/vue-mapbox/api/Layers/" class="sidebar-link">Layer commons</a></li><li><a href="/vue-mapbox/api/Layers/geojsonlayer.html" class="sidebar-link">GeojsonLayer</a></li><li><a href="/vue-mapbox/api/Layers/vectorlayer.html" class="sidebar-link">VectorLayer</a></li><li><a href="/vue-mapbox/api/Layers/rasterlayer.html" class="sidebar-link">RasterLayer</a></li><li><a href="/vue-mapbox/api/Layers/imagelayer.html" class="sidebar-link">ImageLayer</a></li><li><a href="/vue-mapbox/api/Layers/videolayer.html" class="sidebar-link">VideoLayer</a></li><li><a href="/vue-mapbox/api/Layers/canvaslayer.html" class="sidebar-link">CanvasLayer</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Plugin components</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/plugin_components/" class="sidebar-link">Using plugin components</a></li><li><a href="/vue-mapbox/plugin_components/plugin_components_development.html" class="sidebar-link">Create a plugin component</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="content default"><h1 id="glmap"><a href="#glmap" aria-hidden="true" class="header-anchor">#</a> GlMap</h1> <h2 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h2> <h3 id="mapboxgl"><a href="#mapboxgl" aria-hidden="true" class="header-anchor">#</a> <code>mapboxGl</code></h3> <ul><li><strong>Type</strong>: <code>Object</code></li> <li><strong>Default:</strong> <code>null</code></li> <li><ul><li><strong>Description:</strong> Mapboxgl-js implementation. Useful for lazy-loading. If omitted, VueMapbox imports Mapbox-gl-js dynamically.</li></ul></li></ul> <h3 id="mapstyle"><a href="#mapstyle" aria-hidden="true" class="header-anchor">#</a> <code>mapStyle</code></h3> <ul><li><strong>Type</strong>: <code>String</code>, <code>Object</code></li> <li><strong>Required</strong></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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.</li> <li><strong>See:</strong> <code>options.style</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="container"><a href="#container" aria-hidden="true" class="header-anchor">#</a> <code>container</code></h3> <ul><li><strong>Type:</strong> <code>String</code>, <code>HTMLElement</code></li> <li><strong>Default:</strong> <code>#map-{random number}</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> The HTML element in which Mapbox GL JS will render the map</li> <li><strong>See:</strong> <code>options.container</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="accesstoken"><a href="#accesstoken" aria-hidden="true" class="header-anchor">#</a> <code>accessToken</code></h3> <ul><li><strong>Type:</strong> <code>String</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> Token for access Mapbox map</li> <li><strong>See:</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#accesstoken" target="_blank" rel="noopener noreferrer">accessToken<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="minzoom"><a href="#minzoom" aria-hidden="true" class="header-anchor">#</a> <code>minZoom</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>0</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> Minimum zoom level of the map (0-24)</li> <li><strong>See:</strong> <code>options.minZoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="maxzoom"><a href="#maxzoom" aria-hidden="true" class="header-anchor">#</a> <code>maxZoom</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>22</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> Maximum zoom level of the map (0-24)</li> <li><strong>See:</strong> <code>options.maxZoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="hash"><a href="#hash" aria-hidden="true" class="header-anchor">#</a> <code>hash</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>false</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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</li> <li><strong>See:</strong> <code>options.hash</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="interactive"><a href="#interactive" aria-hidden="true" class="header-anchor">#</a> <code>interactive</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If false, no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to interaction</li> <li><strong>See:</strong> <code>options.interactive</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="bearingsnap"><a href="#bearingsnap" aria-hidden="true" class="header-anchor">#</a> <code>bearingSnap</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>7</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> The threshold, measured in degrees, that determines when the map's bearing will snap to north</li> <li><strong>See:</strong> <code>options.bearingSnap</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="attributioncontrol"><a href="#attributioncontrol" aria-hidden="true" class="header-anchor">#</a> <code>attributionControl</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, an AttributionControl will be added to the map</li> <li><strong>See:</strong> <code>options.attributionControl</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="logoposition"><a href="#logoposition" aria-hidden="true" class="header-anchor">#</a> <code>logoPosition</code></h3> <ul><li><strong>Type:</strong> <code>String</code>, <code>top-left</code>, <code>top-right</code>, <code>bottom-right</code>, <code>bottom-left</code></li> <li><strong>Default:</strong> <code>bottom-left</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> A string representing the position of the Mapbox wordmark on the map</li> <li><strong>See:</strong> <code>options.logoPosition</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="failifmajorperformancecaveat"><a href="#failifmajorperformancecaveat" aria-hidden="true" class="header-anchor">#</a> <code>failIfMajorPerformanceCaveat</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>false</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> 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)</li> <li><strong>See:</strong> <code>options.failIfMajorPerformanceCaveat</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="crosssourcecollisions"><a href="#crosssourcecollisions" aria-hidden="true" class="header-anchor">#</a> <code>crossSourceCollisions</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> 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.</li> <li><strong>See:</strong> <code>options.crossSourceCollisions</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="fadeduration"><a href="#fadeduration" aria-hidden="true" class="header-anchor">#</a> <code>fadeDuration</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>300</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> 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.</li> <li><strong>See:</strong> <code>options.fadeDuration</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="preservedrawingbuffer"><a href="#preservedrawingbuffer" aria-hidden="true" class="header-anchor">#</a> <code>preserveDrawingBuffer</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>false</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the map's canvas can be exported to a PNG using map.getCanvas().toDataURL()</li> <li><strong>See:</strong> <code>options.preserveDrawingBuffer</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="refreshexpiredtiles"><a href="#refreshexpiredtiles" aria-hidden="true" class="header-anchor">#</a> <code>refreshExpiredTiles</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the map won't attempt to re-request tiles once they expire per their HTTP cacheControl / expires headers.</li> <li><strong>See:</strong> <code>options.refreshExpiredTiles</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="maxbounds"><a href="#maxbounds" aria-hidden="true" class="header-anchor">#</a> <code>maxBounds</code></h3> <ul><li><strong>Type:</strong> <code>Array</code>, <code>LngLatBoundsLike object</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> If set, the map will be constrained to the given bounds</li> <li><strong>See:</strong> <code>options.maxBounds</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="scrollzoom"><a href="#scrollzoom" aria-hidden="true" class="header-anchor">#</a> <code>scrollZoom</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code>, <code>Object</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the "scroll to zoom" interaction is enabled. An Object value is passed as options to ScrollZoomHandler#enable</li> <li><strong>See:</strong> <code>options.scrollZoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="boxzoom"><a href="#boxzoom" aria-hidden="true" class="header-anchor">#</a> <code>boxZoom</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the "box zoom" interaction is enabled</li> <li><strong>See:</strong> <code>options.boxZoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="dragrotate"><a href="#dragrotate" aria-hidden="true" class="header-anchor">#</a> <code>dragRotate</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the "drag to rotate" interaction is enabled</li> <li><strong>See:</strong> <code>options.dragRotate</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="keyboard"><a href="#keyboard" aria-hidden="true" class="header-anchor">#</a> <code>keyboard</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, keyboard shortcuts are enabled</li> <li><strong>See:</strong> <code>options.keyboard</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="doubleclickzoom"><a href="#doubleclickzoom" aria-hidden="true" class="header-anchor">#</a> <code>doubleClickZoom</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the "double click to zoom" interaction is enabled</li> <li><strong>See:</strong> <code>options.doubleClickZoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="touchzoomrotate"><a href="#touchzoomrotate" aria-hidden="true" class="header-anchor">#</a> <code>touchZoomRotate</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code>, <code>Object</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the "pinch to rotate and zoom" interaction is enabled. An Object value is passed as options to TouchZoomRotateHandler#enable</li> <li><strong>See:</strong> <code>options.touchZoomRotate</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="trackresize"><a href="#trackresize" aria-hidden="true" class="header-anchor">#</a> <code>trackResize</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true, the map will automatically resize when the browser window resizes.</li> <li><strong>See:</strong> <code>options.trackResize</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="center"><a href="#center" aria-hidden="true" class="header-anchor">#</a> <code>center</code></h3> <ul><li><strong>Type:</strong> <code>Array, LngLatLike Object</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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 <code>[0, 0]</code></li> <li><strong>See:</strong> <code>options.center</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="zoom"><a href="#zoom" aria-hidden="true" class="header-anchor">#</a> <code>zoom</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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 <code>0</code></li> <li><strong>See:</strong> <code>options.zoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="bearing"><a href="#bearing" aria-hidden="true" class="header-anchor">#</a> <code>bearing</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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 <code>0</code></li> <li><strong>See:</strong> <code>options.bearing</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="pitch"><a href="#pitch" aria-hidden="true" class="header-anchor">#</a> <code>pitch</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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 <code>0</code></li> <li><strong>See:</strong> <code>options.pitch</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="renderworldcopies"><a href="#renderworldcopies" aria-hidden="true" class="header-anchor">#</a> <code>renderWorldCopies</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> If true , multiple copies of the world will be rendered, when zoomed out</li> <li><strong>See:</strong> <code>options.renderWorldCopies</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="light"><a href="#light" aria-hidden="true" class="header-anchor">#</a> <code>light</code></h3> <ul><li><strong>Type:</strong> <code>Object</code></li> <li><strong>Default:</strong> <code>undefined</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> Light properties. Must conform to the Mapbox Style Specification</li> <li><strong>See:</strong> See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#setlight" target="_blank" rel="noopener noreferrer">setLight<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Map method</li></ul> <h3 id="tileboundaries"><a href="#tileboundaries" aria-hidden="true" class="header-anchor">#</a> <code>tileBoundaries</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>false</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> A Boolean indicating whether the map will render an outline around each tile. These tile boundaries are useful for debugging</li> <li><strong>See:</strong> See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#showtileboundaries" target="_blank" rel="noopener noreferrer">showTileBoundaries<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Map property</li></ul> <h3 id="collisionboxes"><a href="#collisionboxes" aria-hidden="true" class="header-anchor">#</a> <code>collisionBoxes</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>false</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> 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</li> <li><strong>See:</strong> See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#showcollisionboxes" target="_blank" rel="noopener noreferrer">showCollisionBoxes<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Map property</li></ul> <h3 id="repaint"><a href="#repaint" aria-hidden="true" class="header-anchor">#</a> <code>repaint</code></h3> <ul><li><strong>Type:</strong> <code>Boolean</code></li> <li><strong>Default:</strong> <code>false</code></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> A Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance.</li> <li><strong>See:</strong> See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#repaint" target="_blank" rel="noopener noreferrer">repaint<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Map property</li></ul> <h3 id="transformrequest"><a href="#transformrequest" aria-hidden="true" class="header-anchor">#</a> <code>transformRequest</code></h3> <ul><li><strong>Type:</strong> <code>Function</code></li> <li><strong>Default:</strong> <code>null</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> 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 <code>url</code> property and optionally <code>headers</code> and <code>credentials</code> properties.</li> <li><strong>See:</strong> <code>options.transformRequest</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="localideographfontfamily"><a href="#localideographfontfamily" aria-hidden="true" class="header-anchor">#</a> <code>localIdeographFontFamily</code></h3> <ul><li><strong>Type:</strong> <code>String</code></li> <li><strong>Default:</strong> <code>null</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> 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.</li> <li><strong>See:</strong> <code>options.localIdeographFontFamily</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h2 id="actions"><a href="#actions" aria-hidden="true" class="header-anchor">#</a> Actions</h2> <p>Asynchronous actions exposed via <code>GlMap.actions</code></p> <div class="tip custom-block"><p class="custom-block-title">TIP</p> <p><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer">Map-promisified<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> is used as wrapper around Mapbox GL JS methods. That library can be used independently from VueMapbox.</p></div> <h3 id="stop-eventdata"><a href="#stop-eventdata" aria-hidden="true" class="header-anchor">#</a> <code>.stop(eventData?)</code></h3> <ul><li><strong>Arguments:</strong> <ul><li><code>eventData</code> <code>{Object}</code> Custom data passed to corresponfing event.</li></ul></li> <li><strong>Description:</strong> Stops all animations on the map</li> <li><strong>Returns:</strong> <code>{Promise<{ pitch, zoom, bearing, center }>}</code>
Promise that resolves object with map parameters on the moment of call <code>stop()</code></li></ul> <h3 id="panby-offset-options-eventdata"><a href="#panby-offset-options-eventdata" aria-hidden="true" class="header-anchor">#</a> <code>.panBy(offset, options?, eventData?)</code></h3> <ul><li><strong>Arguments:</strong> <ul><li><code>offset</code> <code>{Point | number[]}</code> x and y coordinates by which to pan the map</li> <li><code>options</code> <code>{AnimationOptions object}</code> animation options. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#animationoptions" target="_blank" rel="noopener noreferrer">AnimationOptions<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><code>eventData</code> <code>{Object}</code> Custom data passed to corresponfing event.</li></ul></li> <li><strong>Description:</strong> Pans the map by the specified offest</li> <li><strong>Returns:</strong> <code>{Promise<{ eventData, center }>}</code>
Promise that resolves object with event data and new center of the map when animation ends</li> <li><strong>See:</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#panby" target="_blank" rel="noopener noreferrer">panBy<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Map method</li></ul> <h3 id="panto-coordinates-options-eventdata"><a href="#panto-coordinates-options-eventdata" aria-hidden="true" class="header-anchor">#</a> <code>.panTo(coordinates, options?, eventData?)</code></h3> <ul><li><strong>Arguments:</strong> <ul><li><code>coordinates</code> <code>{LngLat | number[][]}</code> The location to pan the map to. See also: <a href="https://docs.mapbox.com/mapbox-gl-js/api/#lnglat" target="_blank" rel="noopener noreferrer">LngLat<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><code>options</code> <code>{AnimationOptions object}</code> animation options. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#animationoptions" targ