2

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?

  • If I remember your previous question correctly you were using mymap instead of map. – MrXsquared Feb 12 at 19:38
  • I actually changed it all to map after to make it easier – PVar Feb 12 at 19:39
5

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

4

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.

  • they are clickable now but the functions don't work – PVar Feb 12 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.