leaflet-simple-toolbar-demo

by ventralnet

HTML

<script src="https://cdn.jsdelivr.net/npm/leaflet"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/@ventralnet/leaflet-simple-toolbar"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ventralnet/leaflet-simple-toolbar/dist/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">
<div id="map-container">

</div>

CSS

#map-container {
  height: 100vh;
  width: 100%;
}

JavaScript

const map = L.map('map-container', {
  center: [51.505, -0.09],
  zoom: 10
});
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  noWrap: true,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    const classBasedAction = new L.Control.SimpleToolbar.Action({
      iconHtml: '<span><b>H</b></span>',
      tooltip: 'This will show when you hover',
      handler() {
        alert('class based action');
      },
    });

    const disabledAction = new L.Control.SimpleToolbar.Action({
      iconHtml: '<span><b>D</b></span>',
      tooltip: 'Disabled action example, you cant interact with this',
      handler() {
        alert('This alert won\'t show because i am disabled :(');
      },
    });

    new L.Control.SimpleToolbar({
      actions: [
        {
          iconHtml: '<i class="fa-solid fa-circle-info"></i>',
          tooltip: 'This will show when you hover',
          handler() {
            alert('leafet simple toolbar!');
          },
        },
        {
          iconHtml: '<i class="fas fa-question-circle"></i>',
          tooltip: 'Another action',
          handler() {
            alert('click');
          },
        },
        disabledAction,
        classBasedAction,
      ]
    }).addTo(map);

    disabledAction.disableControl();