vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
34 lines (32 loc) • 22.6 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Layers common | 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/7.e6ed37a7.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/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/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="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="active sidebar-link">Layer commons</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/api/Layers/#props" class="sidebar-link">Props</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/Layers/#computed-properties" class="sidebar-link">Computed properties</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/Layers/#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/Layers/#events" class="sidebar-link">Events</a></li></ul></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="layers-common"><a href="#layers-common" aria-hidden="true" class="header-anchor">#</a> Layers common</h1> <h2 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h2> <h4 id="props-for-mapbox-gl-source"><a href="#props-for-mapbox-gl-source" aria-hidden="true" class="header-anchor">#</a> Props for Mapbox GL source</h4> <h3 id="sourceid"><a href="#sourceid" aria-hidden="true" class="header-anchor">#</a> <code>sourceId</code></h3> <ul><li><strong>Type:</strong> <code>String</code></li> <li><strong>Required</strong></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> ID of the source to add. Must not conflict with existing sources.</li> <li><strong>See:</strong> <code>.addSource()</code> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource" target="_blank" rel="noopener noreferrer">Map method<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="source"><a href="#source" aria-hidden="true" class="header-anchor">#</a> <code>source</code></h3> <ul><li><strong>Type:</strong> <code>Object | String</code></li> <li><strong>Non-Synced</strong> A source for layer or URL to it.</li> <li><strong>Description:</strong></li> <li><strong>See:</strong> <code>sources</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources" target="_blank" rel="noopener noreferrer">Mapbox Style Spec<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> <h4 id="props-for-mapbox-gl-layer"><a href="#props-for-mapbox-gl-layer" aria-hidden="true" class="header-anchor">#</a> Props for Mapbox GL layer</h4> <h3 id="layerid"><a href="#layerid" aria-hidden="true" class="header-anchor">#</a> <code>layerId</code></h3> <ul><li><strong>Type</strong> <code>String</code></li> <li><strong>Description:</strong> ID of the layer to add. Must not conflict with existing layers.</li> <li><strong>Required</strong></li> <li><strong>Non-Synced</strong></li> <li><strong>See:</strong> <code>id</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layer-id" target="_blank" rel="noopener noreferrer">Mapbox Layer Style Spec<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="layer"><a href="#layer" aria-hidden="true" class="header-anchor">#</a> <code>layer</code></h3> <ul><li><strong>Type</strong> <code>String</code></li> <li><strong>Description:</strong> Layer configuration object.</li> <li><strong>Required</strong></li> <li><strong>Non-Synced</strong></li> <li><strong>See:</strong> <code>layers</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" target="_blank" rel="noopener noreferrer">Mapbox Layer Style Spec<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> <div class="tip custom-block"><p class="custom-block-title">Reactivity</p> <p><code>minzoom</code>, <code>maxzoom</code>, <code>paint</code>, <code>layout</code> and <code>filter</code> fields of <code>layer</code> prop are reactive. If you change their value, changes automatically applied to the map.</p></div> <h3 id="before"><a href="#before" aria-hidden="true" class="header-anchor">#</a> <code>before</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> The ID of an existing layer to insert the new layer before.</li> <li><strong>See:</strong> <code>metadata</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layer-metadata" target="_blank" rel="noopener noreferrer">Mapbox Layer Style Spec<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> <h4 id="props-for-vue-mapbox-component"><a href="#props-for-vue-mapbox-component" aria-hidden="true" class="header-anchor">#</a> Props for Vue-Mapbox component</h4> <h3 id="clearsource"><a href="#clearsource" aria-hidden="true" class="header-anchor">#</a> <code>clearSource</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 <code>true</code>, component will remove layer source from map on component destruction.</li></ul> <h3 id="replacesource"><a href="#replacesource" aria-hidden="true" class="header-anchor">#</a> <code>replaceSource</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 source passed to <code>source</code> prop of layer component already added ot the map, it will be ignored and existed <code>source</code> will be used. If <code>replaceSource</code> is <code>true</code> source will be replaced with new instead.</li></ul> <h3 id="replace"><a href="#replace" aria-hidden="true" class="header-anchor">#</a> <code>replace</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 <code>true</code>, replaces existing layer with same id. Otherwise, error returns.</li></ul> <h2 id="computed-properties"><a href="#computed-properties" aria-hidden="true" class="header-anchor">#</a> Computed properties</h2> <h3 id="sourceloaded"><a href="#sourceloaded" aria-hidden="true" class="header-anchor">#</a> <code>sourceLoaded</code></h3> <ul><li><strong>Type</strong> <code>Boolean</code></li> <li><strong>Description</strong> Flag that indicated if layer source already loaded.</li></ul> <h3 id="maplayer"><a href="#maplayer" aria-hidden="true" class="header-anchor">#</a> <code>mapLayer</code></h3> <ul><li><strong>Type</strong> <code>Object</code></li> <li><strong>Description</strong> Mapbox GL layer object.</li> <li><strong>See</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#getlayer" target="_blank" rel="noopener noreferrer"><code>.getLayer()</code><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="mapsource"><a href="#mapsource" aria-hidden="true" class="header-anchor">#</a> <code>mapSource</code></h3> <ul><li><strong>Type</strong> <code>Object</code></li> <li><strong>Description</strong> Source for this layer.</li> <li><strong>See</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#sources" target="_blank" rel="noopener noreferrer"><code>Mapbox GL source</code><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="move-beforeid"><a href="#move-beforeid" aria-hidden="true" class="header-anchor">#</a> <code>.move(beforeId?)</code></h3> <ul><li><strong>Arguments:</strong></li> <li><code>beforeId</code> <code>String</code> The ID of an existing layer to insert the new layer before. If this argument is omitted, the layer will be appended to the end of the layers array.</li> <li><strong>Description</strong> Moves a layer to a different z-position.</li> <li><strong>See</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#movelayer" target="_blank" rel="noopener noreferrer"><code>.moveLayer()</code><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="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> <code>.remove()</code></h3> <ul><li><strong>Description</strong> Removes the layer with and source assosiated with it.</li> <li><strong>See</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#removelayer" target="_blank" rel="noopener noreferrer"><code>.removeLayer()</code><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> <h2 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h2> <p>Payload of events contains object with properties:</p> <ul><li><code>mapboxEvent</code> Original Mapbox GL JS event</li> <li><code>layerId</code> ID of current layer</li> <li><code>map</code> Current map object</li> <li><code>component</code> Component that emits event</li></ul> <h3 id="mousedown"><a href="#mousedown" aria-hidden="true" class="header-anchor">#</a> <code>@mousedown</code></h3> <h3 id="mouseup"><a href="#mouseup" aria-hidden="true" class="header-anchor">#</a> <code>@mouseup</code></h3> <h3 id="click"><a href="#click" aria-hidden="true" class="header-anchor">#</a> <code>@click</code></h3> <h3 id="dblclick"><a href="#dblclick" aria-hidden="true" class="header-anchor">#</a> <code>@dblclick</code></h3> <h3 id="mousemove"><a href="#mousemove" aria-hidden="true" class="header-anchor">#</a> <code>@mousemove</code></h3> <h3 id="mouseenter"><a href="#mouseenter" aria-hidden="true" class="header-anchor">#</a> <code>@mouseenter</code></h3> <h3 id="mouseleave"><a href="#mouseleave" aria-hidden="true" class="header-anchor">#</a> <code>@mouseleave</code></h3> <h3 id="mouseover"><a href="#mouseover" aria-hidden="true" class="header-anchor">#</a> <code>@mouseover</code></h3> <h3 id="mouseout"><a href="#mouseout" aria-hidden="true" class="header-anchor">#</a> <code>@mouseout</code></h3> <h3 id="contextmenu"><a href="#contextmenu" aria-hidden="true" class="header-anchor">#</a> <code>@contextmenu</code></h3> <h3 id="touchstart"><a href="#touchstart" aria-hidden="true" class="header-anchor">#</a> <code>@touchstart</code></h3> <h3 id="touchend"><a href="#touchend" aria-hidden="true" class="header-anchor">#</a> <code>@touchend</code></h3> <h3 id="touchcancel"><a href="#touchcancel" aria-hidden="true" class="header-anchor">#</a> <code>@touchcancel</code></h3></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-mapbox/api/popup.html" class="prev">
Popup
</a></span> <span class="next"><a href="/vue-mapbox/api/Layers/geojsonlayer.html">
GeojsonLayer
</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/7.e6ed37a7.js" defer></script>
</body>
</html>