vue-mapbox

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Base map | 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/19.38617f97.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/14.3affa2b5.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/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"> VueMapbox</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 router-link-active">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link">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 router-link-active">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link">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">Guide  <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="active sidebar-link">Base map</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/basemap.html#adding-map-component" class="sidebar-link">Adding map component</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/basemap.html#map-loading" class="sidebar-link">Map loading</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/basemap.html#map-actions" class="sidebar-link">Map actions</a></li></ul></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">API  <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/api/" class="sidebar-link">GlMap</a></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">Plugin components  <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="base-map"><a href="#base-map" aria-hidden="true" class="header-anchor">#</a> Base map</h1> <h2 id="adding-map-component"><a href="#adding-map-component" aria-hidden="true" class="header-anchor">#</a> Adding map component</h2> For using maps with Mapbox GL JS you need a <a href="https://mapbox.com/mapbox-gl-js/style-spec" target="_blank" rel="noopener noreferrer">map style<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>. If you using Mapbox-hosted maps, you need to set <code>access_token</code>. Look for details in Mapbox <a href="https://mapbox.com/help/define-access-token/" target="_blank" rel="noopener noreferrer">documentation<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>. If you using self-hosting maps on your own server you can omit this parameter. <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="accessToken" :mapStyle="mapStyle" /> </template> <script> import Mapbox from "mapbox-gl"; import { MglMap } from "vue-mapbox"; export default { components: { MglMap }, data() { return { accessToken: ACCESS_TOKEN, // your access token. Needed if you using Mapbox maps mapStyle: MAP_STYLE // your map style }; }, created() { // We need to set mapbox-gl library here in order to use it in template this.mapbox = Mapbox; } }; </script> </code></pre></div><div class="tip custom-block">TIP If you need, you can pass Mapbox-gl-js implementation as <code>mapboxGl</code> prop. May be useful for lazy-loading. Example: <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :mapboxGl="mapbox-gl" :accessToken="accessToken" :mapStyle.sync="mapStyle" @load="onMapLoaded" /> </template> </code></pre></div>If none is passed, VueMapbox imports Mapbox-gl internally.</div> <h3 id="interact-with-map-properties-as-glmap-props"><a href="#interact-with-map-properties-as-glmap-props" aria-hidden="true" class="header-anchor">#</a> Interact with map properties as GlMap props</h3> You can control map parameters like zoom, bearing, pitch etc. by changing props. If you set <code>.sync</code> modifier (<a href="https://vuejs.org/v2/guide/components.html#sync-Modifier" target="_blank" rel="noopener noreferrer">Vue docs<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>) to prop, it will updates when you use operations that takes time to proceed. For example, if you use <code>flyTo</code> method, props <code>zoom</code>, <code>center</code>, <code>bearing</code>, <code>pitch</code> will be updated when animation ends. Full list of props see in <a href="/vue-mapbox/api/#props">API docs</a>, note field 'Synced' in description <h2 id="map-loading"><a href="#map-loading" aria-hidden="true" class="header-anchor">#</a> Map loading</h2> When map loads, <code>MglMap</code> component emits <code>load</code> event. Payload of the event contains Mapbox GL JS <code>Map</code> object. All components placed under <code>MglMap</code> will be rendered only after map fully loaded. <div class="warning custom-block">Storing Map object Take note that it's generally bad idea to add to Vuex or component's <code>data</code> anything but primitive types and plain objects. Vue adds getters and setters to every property, so if you add <code>Map</code> object to Vuex store or component <code>data</code>, it may lead to weird bugs. If you want to store map object, store it as non-reactive property like in example below.</div> <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle" @load="onMapLoaded" /> </template> <script> export default { // …component code… created() { this.map = null; }, methods: { onMapLoaded(event) { // in component this.map = event.map; // or just to store if you want have access from other components this.$store.map = event.map; } } }; </script> </code></pre></div><h2 id="map-actions"><a href="#map-actions" aria-hidden="true" class="header-anchor">#</a> Map actions</h2> Asynchronous map methods exposed at MglMap component in <code>actions</code> property. They returns <code>Promise</code>, that resolves when action completed. Promise resolves with map properties that has been changed by used action. For example: <div class="language-vue extra-class"><pre class="language-vue"><code><script> export deafult { name: 'App', methods: { async onMapLoad(event) { // Here we cathing 'load' map event const asyncActions = event.component.actions const newParams = await asyncActions.flyTo({ center: [30, 30], zoom: 9, speed: 1 }) console.log(newParams) /* => { center: [30, 30], zoom: 9, bearing: 9, pitch: 7 } */ } } } </script> </code></pre></div>See full list of actions on <a href="/vue-mapbox/api/#actions">API</a> page. <h3 id="method-actions-stop"><a href="#method-actions-stop" aria-hidden="true" class="header-anchor">#</a> Method <code>actions.stop()</code></h3> Method <code>.stop()</code> just stops all animations on map, updates props with new positions and return Promise with map parameters at the moment when <code>.stop()</code> called. <h3 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h3> See list of events on <a href="/vue-mapbox/api/#events">API</a> page.</div> <footer class="page-edit"> </footer> <div class="page-nav"> ← <a href="/vue-mapbox/guide/" class="prev router-link-active"> Quickstart </a> <a href="/vue-mapbox/guide/composition.html"> Composition </a> → </div> </main></div><div class="global-ui"></div></div> <script src="/vue-mapbox/assets/js/app.1613afe0.js" defer></script><script src="/vue-mapbox/assets/js/2.1a36c030.js" defer></script><script src="/vue-mapbox/assets/js/19.38617f97.js" defer></script> </body> </html>