vue-mapbox

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Markers and Popups | 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/23.87f4c25b.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/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/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="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="active sidebar-link">Markers and popups</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/markers&popups.html#marker" class="sidebar-link">Marker</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/markers&popups.html#popup" class="sidebar-link">Popup</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/markers&popups.html#markers-popups-together" class="sidebar-link">Markers & Popups together</a></li></ul></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="markers-and-popups"><a href="#markers-and-popups" aria-hidden="true" class="header-anchor">#</a> Markers and Popups</h1> <h2 id="marker"><a href="#marker" aria-hidden="true" class="header-anchor">#</a> Marker</h2> The Marker component is a wrapper around the <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker" target="_blank" rel="noopener noreferrer">Mapbox GL Marker API<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 class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="mapboxAccessToken" :mapStyle.sync="mapStyle" :center="coordinates" > <MglMarker :coordinates="coordinates" color="blue" /> </MglMap> </template> <script> import { MglMap, MglMarker } from "vue-mapbox"; export default { components: { MglMap, MglMarker }, data() { return { mapStyle: "mapbox://styles/mapbox/basic-v10", coordinates: [-111.549668, 39.014] }; } }; </script> </code></pre></div><h3 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h3> <ul><li><code>color {String}</code> Set the color of the default marker (not applicable when using the <code>marker</code> slot)</li> <li><code>coordinates {Array}</code> The GeoJSON coordinates for marker placement on the map</li> <li><code>offset {Object, Array}</code> Display the marker at an offset distance from the coordinates</li></ul> Full list of props you cab see on <a href="/vue-mapbox/api/marker.html#props">API page</a> <h3 id="slots"><a href="#slots" aria-hidden="true" class="header-anchor">#</a> Slots</h3> The Marker component has two slots: the <code>marker</code> slot and default slot used for popup. <h4 id="the-marker-slot"><a href="#the-marker-slot" aria-hidden="true" class="header-anchor">#</a> The <code>marker</code> slot</h4> The <code>marker</code> slot allows you to customize the look of the marker. Here is an example of using the <a href="https://vuetifyjs.com/en/components/icons" target="_blank" rel="noopener noreferrer">Vuetify <code>v-icon</code> component<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> instead of the default marker icon: <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="mapboxAccessToken" :mapStyle.sync="mapStyle" :center="coordinates" > <MglMarker :coordinates="coordinates"> <v-icon slot="marker">mdi-map-marker</v-icon> </MglMarker> </MglMap> </template> <script> import { MglMap, MglMarker } from "vue-mapbox"; export default { components: { MglMap, MglMarker }, data() { return { mapStyle: "mapbox://styles/mapbox/basic-v10", coordinates: [-111.549668, 39.014] }; } }; </script> </code></pre></div><h3 id="default-slot"><a href="#default-slot" aria-hidden="true" class="header-anchor">#</a> Default slot</h3> Default slot allows you to specify content to display in a Mapbox popup when the marker is clicked. See <a href="#markers-popups-together">below</a> <h2 id="popup"><a href="#popup" aria-hidden="true" class="header-anchor">#</a> Popup</h2> The Popup component is wrapper around the <a href="https://docs.mapbox.com/mapbox-gl-js/api/#popup" target="_blank" rel="noopener noreferrer">Mapbox GL Popup API<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>. You can specify content inside popup in default slot. It can be HTML or Vue component. In this example <a href="https://vuetifyjs.com/en/components/cards" target="_blank" rel="noopener noreferrer">Vuetify card component<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> used as a content for popup: <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="mapboxAccessToken" :mapStyle.sync="mapStyle" :center="coordinates" > <MglPopup :coordinates="coordinates" anchor="top"> <VCard> <div>Hello, I'm popup!</div> </VCard> </MglPopup> </MglMap> </template> <script> import { MglMap, MglPopup } from "vue-mapbox"; export default { components: { MglMap, MglPopup }, data() { return { mapStyle: "mapbox://styles/mapbox/basic-v10", coordinates: [-111.549668, 39.014] }; } }; </script> </code></pre></div>If you set <code>onlyText</code> prop to <code>true</code> content in Popup default slot will be treated as plain text. It can be useful if you loading popup content from external untrusted source. Popups added to the map is hidden by default. If you want to show the popup immediately you need to set the prop <code>showed</code> to <code>true</code> <h3 id="props-2"><a href="#props-2" aria-hidden="true" class="header-anchor">#</a> Props</h3> <ul><li><code>showed {Boolean}</code> If <code>true</code>, the popup shows immediately after component is created.</li> <li><code>closeButton {Boolean}</code> If <code>true</code>, a close button will appear in the top right corner of the popup.</li> <li><code>closeOnClick {Boolean}</code> If true, the popup will closed when the map is clicked.</li> <li><code>coordinates {Array}</code> The GeoJSON coordinates for popup placement on the map. If popup used inside marker this prop will be ignored.</li> <li><code>anchor {string}</code> prop specifies the part of the Popup that should be positioned closest to the coordinates point.</li></ul> Full list of props you can see on <a href="/vue-mapbox/api/popup.html#props">API page</a> <h2 id="markers-popups-together"><a href="#markers-popups-together" aria-hidden="true" class="header-anchor">#</a> Markers & Popups together</h2> Popup often used inside of map markers. You can achive this by passing Popup inside Marker in default slot: <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="mapboxAccessToken" :mapStyle.sync="mapStyle" :center="coordinates" > <MglMarker :coordinates="coordinates"> <MglPopup> <VCard> <div>Hello, I'm popup!</div> </VCard> </MglPopup> </MglMarker> </MglMap> </template> <script> import { MglMap, MglPopup, MglMarker } from "vue-mapbox"; export default { components: { MglMap, MglMarker, MglPopup }, data() { return { mapStyle: "mapbox://styles/mapbox/basic-v10", coordinates: [-111.549668, 39.014] }; } }; </script> </code></pre></div>In this case, Popup will be automatically bound to Marker. You can use <code>togglePopup</code> Marker method to toggle visibility of bound Popup. Take note that Popup <code>coordinates</code> prop will be ignored.</div> <footer class="page-edit"> </footer> <div class="page-nav"> ← <a href="/vue-mapbox/guide/controls.html" class="prev"> Controls </a> <a href="/vue-mapbox/guide/layers&sources.html"> Layers and sources </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/23.87f4c25b.js" defer></script> </body> </html>