Making button clickable to perform function in Leaflet?

Question

I am trying to create buttons that will initiate a flyTo. I can click the buttons on the page but they do nothing

action functions:

<script>
      function Action(){
      map.flyto([43.372000,-80.987697], 13);
      }
</script>
<script>
      function Action1(){
      map.flyto([43.370627,-80.998735], 13);
      }
</script>
<script>
      function Action2(){
      map.flyto([43.377328,-80.963505], 13);
      }
</script>
<script>
      function Action3(){
      map.flyto([43.388931,-80.972062], 13);
      }
</script>

Buttons

<div class = "leaflet-bottom leaflet-left" style="pointer-events: auto">
 <button onClick="Action()" block>Douglas Flood Risk Area</button>
 <button onClick="Action1()" block>Avondale Flood Risk Area</button>
 <button onClick="Action2()" block>Millenium Park Flood Risk Area</button>
 <button onClick="Action3()" block>Mornington Flood Risk Area</button>
</div>

I have added 4 buttons into my leaflet map and none of them can actually be clicked.

Is there a way to make them clickable?

Answer 1

I think the method "flyTo" is case-sensitive. Try it with a capital T.

 map.flyTo([43.372000,-80.987697], 13);

Here is an example to demonstrate that it works with a capital T but not with a lowercase "t":

https://jsbin.com/sasojat/7/edit?html,console,output

Answer 2

If you look at the definition of leaflet-bottom style:

.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    }

you'll see it has pointer-events: none property. That's the reason why click on the button has no effect.

Just put:

<div class="leaflet-bottom leaflet-left" style="pointer-events: auto">

and buttons will be clickable.