Add a toggle control to your Mapbox GL Map that has the look and feel of other Mapbox GL controls. When clicked, the given HTMLElement will appear or disappear.
npm install mapbox-gl-toggle-control
var mapbox = require('mapbox-gl')
var ToggleControl = require('mapbox-gl-toggle-control')
var map = new mapboxgl.Map({
container: 'map', // container id
zoom: 5.5, // starting zoom
maxBounds: [-87, -9, -70, 6]
})
var toggle = new ToggleControl(document.querySelector('#my-legend'))
map.addControl(toggle, 'top-left')
<style>
.mapboxgl-ctrl-toggle {
background-image: url(/icons/my-toggle-button.svg);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
</style>
<div id="map"></div>
<div id="my-legend">
<ul>
<li><img src="/icons/fairy.png"> Fairy</li>
<li><img src="/icons/centaur.png"> Centaur</li>
</ul>
</div>
This will create a control button on the map. The contents of the button can be changed via the CSS class mapboxgl-ctrl-toggle
.
Create the toggle control. The control can be added to the map using map.addControl(ctrl, 'top-left')
.
el
: (required) HTMLElement. When the control is clicked ortoggle
is called, the element will be shown or hidden.contents
: (optional) The innerHTML contents of the button.
Hide the element.
Show the element.
Toggle showing or hiding the element.
Returns true
if the element is visible.
MIT