vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
52 lines (50 loc) • 20.5 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Marker | 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/16.7de1d511.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/4.79bc4f3c.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/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/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-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-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="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="active sidebar-link">MapMarker</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/api/marker.html#props" class="sidebar-link">Props</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/marker.html#slots" class="sidebar-link">Slots</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/marker.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/marker.html#events" class="sidebar-link">Events</a></li></ul></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="marker"><a href="#marker" aria-hidden="true" class="header-anchor">#</a> Marker</h1> <h2 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h2> <h3 id="offset"><a href="#offset" aria-hidden="true" class="header-anchor">#</a> <code>offset</code></h3> <ul><li><strong>Type</strong>: <code>Array<number></code></li> <li><strong>Description:</strong> The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.</li> <li><strong>See:</strong> <code>offset</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker" target="_blank" rel="noopener noreferrer">Marker<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="coordinates"><a href="#coordinates" aria-hidden="true" class="header-anchor">#</a> <code>coordinates</code></h3> <ul><li><strong>Type</strong>: <code>Array<number></code></li> <li><strong>Required</strong></li> <li><strong>Synced</strong></li> <li><strong>Description:</strong> Marker coordinates in format <code>[longitude, latitude]</code></li></ul> <h3 id="color"><a href="#color" aria-hidden="true" class="header-anchor">#</a> <code>color</code></h3> <ul><li><strong>Type</strong>: <code>string</code></li> <li><strong>Description:</strong> The color to use for the default marker if custom marker is not provided. The default is light blue.</li></ul> <h3 id="anchor"><a href="#anchor" aria-hidden="true" class="header-anchor">#</a> <code>anchor</code></h3> <ul><li><strong>Type</strong>: <code>string</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Default</strong> <code>center</code></li> <li><strong>Description:</strong> A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . The default is 'center'.</li> <li><strong>See</strong> <code>options.anchor</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker" target="_blank" rel="noopener noreferrer">Marker<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="draggable"><a href="#draggable" aria-hidden="true" class="header-anchor">#</a> <code>draggable</code></h3> <ul><li><strong>Type</strong>: <code>boolean</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Default</strong> <code>false</code></li> <li><strong>Description:</strong> A boolean indicating whether or not a marker is able to be dragged to a new position on the map.</li> <li><strong>See</strong> <code>options.draggable</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker" target="_blank" rel="noopener noreferrer">Marker<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="slots"><a href="#slots" aria-hidden="true" class="header-anchor">#</a> Slots</h2> <h3 id="marker-2"><a href="#marker-2" aria-hidden="true" class="header-anchor">#</a> <code>marker</code></h3> <ul><li><strong>Description:</strong> Slot for custom marker. Can be HTML element or Vue component.</li></ul> <h3 id="default"><a href="#default" aria-hidden="true" class="header-anchor">#</a> <code>default</code></h3> <ul><li><strong>Description:</strong> Slot for popup component. When popup put inside marker, popup automaticaly mounted to marker, similiar as <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker#setpopup" target="_blank" rel="noopener noreferrer">setPopup<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="methods"><a href="#methods" aria-hidden="true" class="header-anchor">#</a> Methods</h2> <h3 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> <code>.remove()</code></h3> <ul><li><strong>Description:</strong> Removes marker from the map.</li> <li><strong>Returns</strong> <code>Marker</code> MapboxGL marker.</li> <li><strong>See</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker#remove" target="_blank" rel="noopener noreferrer">Marker.remove<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="togglepopup"><a href="#togglepopup" aria-hidden="true" class="header-anchor">#</a> <code>.togglePopup()</code></h3> <ul><li><strong>Description:</strong> Opens or closes the bound popup, depending on the current state.</li> <li><strong>Returns</strong> <code>Marker</code> MapboxGL marker.</li> <li><strong>See</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#marker#togglepopup" target="_blank" rel="noopener noreferrer">Marker.togglePopup<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="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h2> <h3 id="added"><a href="#added" aria-hidden="true" class="header-anchor">#</a> <code>@added</code></h3> <ul><li><strong>Description:</strong> Fires when marker added on the map.</li> <li><strong>Payload</strong> <code>{ component: MarkerComponent, map: Map, marker: Marker }</code> Object with <code>Marker</code> component, parent map and MapboxGl <code>Marker</code> object</li></ul> <h3 id="removed"><a href="#removed" aria-hidden="true" class="header-anchor">#</a> <code>@removed</code></h3> <ul><li><strong>Description:</strong> Fires when marker removed the map.</li> <li><strong>Payload</strong> <code>{ component: MarkerComponent, map: Map, marker: Marker }</code> Object with <code>Marker</code> component, parent map and MapboxGl <code>Marker</code> object</li></ul> <h3 id="drag"><a href="#drag" aria-hidden="true" class="header-anchor">#</a> <code>@drag</code></h3> <ul><li><strong>Description:</strong> Fires when marker dragged if marker <code>draggable</code> prop is <code>true</code></li> <li><strong>Payload</strong> <code>{ component: MarkerComponent, map: Map, mapboxEvent: Event }</code> Object with <code>Marker</code> component, parent map and original MapboxGl event</li></ul> <h3 id="dragstart"><a href="#dragstart" aria-hidden="true" class="header-anchor">#</a> <code>@dragstart</code></h3> <ul><li><strong>Description:</strong> Fires when marker dragging starts if marker <code>draggable</code> prop is <code>true</code></li> <li><strong>Payload</strong> <code>{ component: MarkerComponent, map: Map, mapboxEvent: Event }</code> Object with <code>Marker</code> component, parent map and original MapboxGl event</li></ul> <h3 id="dragend"><a href="#dragend" aria-hidden="true" class="header-anchor">#</a> <code>@dragend</code></h3> <ul><li><strong>Description:</strong> Fires when marker dragging ends if marker <code>draggable</code> prop is <code>true</code></li> <li><strong>Payload</strong> <code>{ component: MarkerComponent, map: Map, mapboxEvent: Event }</code> Object with <code>Marker</code> component, parent map and original MapboxGl event</li></ul> <h3 id="click"><a href="#click" aria-hidden="true" class="header-anchor">#</a> <code>@click</code> <span class="badge warn top" data-v-efceadb8>experimental</span></h3> <ul><li><strong>Description:</strong> Fires marker is clicked.</li> <li><strong>Payload</strong></li></ul> <div class="language- extra-class"><pre class="language-text"><code> {
component: MarkerComponent,
map: Map,
mapboxEvent: DOMEvent,
marker: Marker
}
</code></pre></div><p>Object with <code>Marker</code> component, parent map and original MapboxGl event</p> <h3 id="mouseenter"><a href="#mouseenter" aria-hidden="true" class="header-anchor">#</a> <code>@mouseenter</code> <span class="badge warn top" data-v-efceadb8>experimental</span></h3> <ul><li><strong>Description:</strong> Fires when mouse cursor enters marker area.</li> <li><strong>Payload</strong></li></ul> <div class="language- extra-class"><pre class="language-text"><code> {
component: MarkerComponent,
map: Map,
mapboxEvent: DOMEvent,
marker: Marker
}
</code></pre></div><p>Object with <code>Marker</code> component, parent map and original MapboxGl event</p> <h3 id="mouseleave"><a href="#mouseleave" aria-hidden="true" class="header-anchor">#</a> <code>@mouseleave</code> <span class="badge warn top" data-v-efceadb8>experimental</span></h3> <ul><li><strong>Description:</strong> Fires when mouse cursor leaves marker area.</li> <li><strong>Payload</strong></li></ul> <div class="language- extra-class"><pre class="language-text"><code> {
component: MarkerComponent,
map: Map,
mapboxEvent: DOMEvent,
marker: Marker
}
</code></pre></div><p>Object with <code>Marker</code> component, parent map and original MapboxGl event</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-mapbox/api/controls.html" class="prev">
Controls
</a></span> <span class="next"><a href="/vue-mapbox/api/popup.html">
Popup
</a>
→
</span></p></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/16.7de1d511.js" defer></script><script src="/vue-mapbox/assets/js/4.79bc4f3c.js" defer></script>
</body>
</html>