<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><div class="sidebar-group first"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="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></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>API</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-mapbox/api/" class="sidebar-link">VueMapbox</a></li><li><a href="/vue-mapbox/api/glmap.html" 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></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Plugins</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-mapbox/plugins/" class="sidebar-link">Using plugins</a></li><li><a href="/vue-mapbox/plugins/plugin_development.html" class="sidebar-link">Create a plugin</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content default"><h1 id="canvaslayer"><a href="#canvaslayer" aria-hidden="true" class="header-anchor">#</a> CanvasLayer</h1> <h2 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h2> <h3 id="canvas"><a href="#canvas" aria-hidden="true" class="header-anchor">#</a> <code>canvas</code></h3> <ul><li><strong>Type:</strong> <code>HTMLCanvasElement, String</code></li> <li><strong>Default</strong> <code>null</code></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> Canvas source from which to read pixels. Can be a string representing the ID of the canvas element. If omitted, Vue-Mapbox creates canvas element.</li> <li><strong>See:</strong> <code>canvas</code> in <a href="https://www.mapbox.com/mapbox-gl-js/api/#canvassource" target="_blank" rel="noopener noreferrer">Mapbox API CanvasSource<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</code></li> <li><strong>Required</strong></li> <li><strong>Non-Synced</strong></li> <li><strong>Description:</strong> Four geographical coordinates denoting where to place the corners of the canvas, specified in [longitude, latitude] pairs.</li> <li><strong>See:</strong> <code>coordinates</code> in <a href="https://www.mapbox.com/mapbox-gl-js/api/#canvassource" target="_blank" rel="noopener noreferrer">Mapbox API CanvasSource<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="animate"><a href="#animate" aria-hidden="true" class="header-anchor">#</a> <code>animate</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> Whether the canvas source is animated.</li> <li><strong>See:</strong> <code>animate</code> in <a href="https://www.mapbox.com/mapbox-gl-js/api/#canvassource" target="_blank" rel="noopener noreferrer">Mapbox API CanvasSource<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="width"><a href="#width" aria-hidden="true" class="header-anchor">#</a> <code>width</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> Width of canvas element. Can be omitted if existed canvas passed directly in <code>canvas</code> prop.</li></ul> <h3 id="height"><a href="#height" aria-hidden="true" class="header-anchor">#</a> <code>height</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> Height of canvas element. Can be omitted if existed canvas passed directly in <code>canvas</code> prop.</li></ul> <h2 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h2> <p>All common layer <a href="/vue-mapbox/api/Layers/#events">events</a></p></div> <div class="page-edit"><!----> <!----></div> <!----> </div></div><div class="global-ui"></div></div>
0 commit comments