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) • 23.4 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Map control components | 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/15.40b3c4ef.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/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-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="active sidebar-link">Controls</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/api/controls.html#attributioncontrol" class="sidebar-link">AttributionControl</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/controls.html#fullscreencontrol" class="sidebar-link">FullscreenControl</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/controls.html#geolocatecontrol" class="sidebar-link">GeolocateControl</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/controls.html#navigationcontrol" class="sidebar-link">NavigationControl</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/api/controls.html#scalecontrol" class="sidebar-link">ScaleControl</a></li></ul></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="map-control-components"><a href="#map-control-components" aria-hidden="true" class="header-anchor">#</a> Map control components</h1> <h2 id="attributioncontrol"><a href="#attributioncontrol" aria-hidden="true" class="header-anchor">#</a> AttributionControl</h2> <p>An AttributionControl control presents the map's attribution information.</p> <h3 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h3> <h3 id="compact"><a href="#compact" aria-hidden="true" class="header-anchor">#</a> <code>compact</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 force a compact attribution</li> <li><strong>See:</strong> <code>options.compact</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol" target="_blank" rel="noopener noreferrer">AttributionControl<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="customattribution"><a href="#customattribution" aria-hidden="true" class="header-anchor">#</a> <code>customAttribution</code></h3> <ul><li><strong>Type:</strong> <code>string, Array<string>?</code></li> <li><strong>Default:</strong> <code>true</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> String or strings to show in addition to any other attributions.</li> <li><strong>See:</strong> <code>options.customAttribution</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol" target="_blank" rel="noopener noreferrer">AttributionControl<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="fullscreencontrol"><a href="#fullscreencontrol" aria-hidden="true" class="header-anchor">#</a> FullscreenControl</h2> <p>Creates a button on the map to toggle fulscreen mode.</p> <h3 id="props-2"><a href="#props-2" aria-hidden="true" class="header-anchor">#</a> Props</h3> <h3 id="container"><a href="#container" aria-hidden="true" class="header-anchor">#</a> <code>container</code></h3> <ul><li><strong>Type:</strong> <code>HTMLElement</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> DOM element which should be made full screen. By default, the map container element will be made full screen.</li> <li><strong>See:</strong> <code>options.container</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" target="_blank" rel="noopener noreferrer">FullscreenControl<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="geolocatecontrol"><a href="#geolocatecontrol" aria-hidden="true" class="header-anchor">#</a> GeolocateControl</h2> <p>Provides a button that uses the browser's geolocation API to locate the user on the map.</p> <h3 id="props-3"><a href="#props-3" aria-hidden="true" class="header-anchor">#</a> Props</h3> <h3 id="positionoptions"><a href="#positionoptions" aria-hidden="true" class="header-anchor">#</a> <code>positionOptions</code></h3> <ul><li><strong>Type:</strong> <code>Object</code></li> <li><strong>Default:</strong> <code>{ enableHighAccuracy: false, timeout: 6000}</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> A Geolocation API PositionOptions object.</li> <li><strong>See:</strong> <code>options.positionOptions</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" target="_blank" rel="noopener noreferrer">GeolocateControl<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="fitboundsoptions"><a href="#fitboundsoptions" aria-hidden="true" class="header-anchor">#</a> <code>fitBoundsOptions</code></h3> <ul><li><strong>Type:</strong> <code>Object</code></li> <li><strong>Default:</strong> <code>{ maxZoom:15 }</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> A fitBounds options object to use when the map is panned and zoomed to the user's location.</li> <li><strong>See:</strong> <code>options.fitBoundsOptions</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" target="_blank" rel="noopener noreferrer">GeolocateControl<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="trackuserlocation"><a href="#trackuserlocation" aria-hidden="true" class="header-anchor">#</a> <code>trackUserLocation</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 Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.to the user's location.</li> <li><strong>See:</strong> <code>options.trackUserLocation</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" target="_blank" rel="noopener noreferrer">GeolocateControl<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="showuserlocation"><a href="#showuserlocation" aria-hidden="true" class="header-anchor">#</a> <code>showUserLocation</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> By default a dot will be shown on the map at the user's location. Set to false to disable.</li> <li><strong>See:</strong> <code>options.showUserLocation</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" target="_blank" rel="noopener noreferrer">GeolocateControl<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="methods"><a href="#methods" aria-hidden="true" class="header-anchor">#</a> Methods</h3> <h3 id="trigger"><a href="#trigger" aria-hidden="true" class="header-anchor">#</a> <code>.trigger()</code></h3> <ul><li><strong>Description:</strong> Trigger a geolocation</li> <li><strong>Returns:</strong> <code>boolean</code></li> <li><strong>See:</strong> <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol#trigger" target="_blank" rel="noopener noreferrer">trigger<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> GeolocateControl method</li></ul> <h2 id="navigationcontrol"><a href="#navigationcontrol" aria-hidden="true" class="header-anchor">#</a> NavigationControl</h2> <h3 id="props-4"><a href="#props-4" aria-hidden="true" class="header-anchor">#</a> Props</h3> <h3 id="showcompass"><a href="#showcompass" aria-hidden="true" class="header-anchor">#</a> <code>showCompass</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 compass button is included.</li> <li><strong>See:</strong> <code>options.showCompass</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" target="_blank" rel="noopener noreferrer">NavigationControl<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="showzoom"><a href="#showzoom" aria-hidden="true" class="header-anchor">#</a> <code>showZoom</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 zoom-in and zoom-out buttons are included.</li> <li><strong>See:</strong> <code>options.showZoom</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" target="_blank" rel="noopener noreferrer">NavigationControl<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="scalecontrol"><a href="#scalecontrol" aria-hidden="true" class="header-anchor">#</a> ScaleControl</h2> <h3 id="props-5"><a href="#props-5" aria-hidden="true" class="header-anchor">#</a> Props</h3> <h3 id="maxwidth"><a href="#maxwidth" aria-hidden="true" class="header-anchor">#</a> <code>maxWidth</code></h3> <ul><li><strong>Type:</strong> <code>Number</code></li> <li><strong>Default:</strong> <code>100</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> The maximum length of the scale control in pixels.</li> <li><strong>See:</strong> <code>options.maxWidth</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" target="_blank" rel="noopener noreferrer">ScaleControl<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="unit"><a href="#unit" aria-hidden="true" class="header-anchor">#</a> <code>unit</code></h3> <ul><li><strong>Type:</strong> <code>String, "imperial" | "metric" | "nautical"</code></li> <li><strong>Default:</strong> <code>metric</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> Unit of the distance</li> <li><strong>See:</strong> <code>options.unit</code> in <a href="https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" target="_blank" rel="noopener noreferrer">ScaleControl<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> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-mapbox/api/" class="prev router-link-active">
GlMap
</a></span> <span class="next"><a href="/vue-mapbox/api/marker.html">
MapMarker
</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/15.40b3c4ef.js" defer></script>
</body>
</html>