3

I am trying to add a clickable button on Leaflet map. Right now using this:

<ion-content padding scrollbar-y-auto>   
  <div id="map" style="width: 100%; height: 100%"></div>
  <div class="leaflet-bottom leaflet-right">
    <button ion-button class="button-action" (click)="Action()"  block>Action!>/button>
  </div>
</ion-content>

CSS:

page-map {
  @font-face {
    font-family: 'Minecraft';
    src: url('../assets/Minecraft.ttf')
    }   
    .button-action{
      height: 40px;
      width: 200px;
      text-decoration: none;
      text-align: center;
      color: white;
      background: url('https://i.hizliresim.com/QpVGbg.png') no-repeat;
      font-family: Minecraft;
      line-height: 26px;
      padding-top: 6px;
  }   
  .button-action:hover{
      background: url('https://i.hizliresim.com/a1zraR.png') no-repeat;
  }    
}

This is what I got:

map

I can't click the button it's like a picture also hover option is not working too.

class="leaflet-bottom leaflet-right"> killing the button, or somehow button goes behind map so I can't click

1

I have tried to reproduce a working version, although I have not included the ionic framework. I see a couple of problems with your code prior to bringing that library into the mix.

First off, you cannot nest vanilla CSS like you are currently doing. You have to use less or sass in order to have nested CSS. That being said, I removed the nesting and got the on hover to work. Here is the code I used,

<!DOCTYPE HTML>
<html>
<head>
    <style>
    .button-action{
        height: 40px;
        width: 200px;
        text-decoration: none;
        text-align: center;
        color: white;
        background: url('https://i.hizliresim.com/QpVGbg.png') no-repeat;
        font-family: Minecraft;
        line-height: 26px;
        padding-top: 6px;
    }

    .button-action:hover{
        background: url('https://i.hizliresim.com/a1zraR.png') no-repeat;
    }

    </style>
    <script>
        function Action() {
            alert('HELLO');
        }
    </script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100%"></div>
    <div class="leaflet-bottom leaflet-right">
        <button ion-button class="button-action" onclick="Action()"  block>Action!</button>
    </div>
</body>

You should be able to add the @font-face as well within the style block, although I did not have the files locally on my computer, so you will have to try adding that yourself. Essentially just remove the higher level wrapper

page-map {}

The css should then be functioning properly.

In regards to the click action, you should be using

onclick="Action()"

instead of

click="Action()"

If the element is hidden behind some background layer, you can use z-index to move it to the foreground, but you need to use a position other than static, as explained here https://stackoverflow.com/questions/9191803/why-does-z-index-not-work

0

Try setting z-index: 5; in your CSS.

  • thanks for the answer but it didnt work – rektandpepper Nov 1 '17 at 14:34
  • z index in leaflet are kinda high. control panels are at 800, try that or higher – geomajor56 Nov 3 '17 at 18:53
0

Have you tried L.EasyButton? It's quick and easy, although the buttons can contain only icons out of the box. There's plenty of useful examples and demos on site.

If that doesn't suit your needs, you'll have to extend Leaflets L.control class. Let me know and I'll try to work up an example using L.Control

  • because im using ionic 3 using external js is not my preferable option :/ – rektandpepper Nov 1 '17 at 19:48
  • 1
    If you put the button outside the map div, it should work, inside/on the map you will need a custom control for the button. – Bill Chappell Nov 1 '17 at 19:52
  • yea outside map div it works but how to make it on map not just below it – rektandpepper Nov 3 '17 at 15:37

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.