20

I am using leaflet map in my application & using bootstrap for responsiveness. I have some buttons bellow that map. It looks something like this.

enter image description here

But I want to overlap buttons on map like this

enter image description here

Here is my HTML 

        <div class="span9" style="height:100%">
        <div id="map"></div>
        <div style="padding-left: 10px;padding-right: 10px">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
            <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
        </div>
    </div>

My css for map

html, body, #map, .row-fluid{
 height: 100%;
 }

 #map {
width: 100%;
}


.btnStyle {
background-color: #4D90FE; 
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
border: 1px solid #3079ED; 
color: #FFFFFF;
 padding: 4px;
 margin-top: 4px;
 margin-bottom: 4px;
 width:100%
}

.lblStyle {
color: red;
 padding: 4px;
 margin-top: 4px;
 margin-bottom: 4px;
width: 100%;
font-weight: bold;
}
vaibhav shah
  • 4,939
  • 19
  • 58
  • 96

4 Answers4

24

Leaflet.js provides the following classes:

leaflet-bottom
leaflet-top
leaflet-left
leaflet-right

Generic HTML example:

    <div id="divmap"> <!--leaflet map wrapper div -->
        <div id="map" > <!--leaflet map div -->
            <div class="leaflet-bottom leaflet-left">
                <div id="marker-legend">  <!-- here the legend -->
                </div>
            </div>          
        </div>
    </div>

Adapting the previous HTML to your particular question:

 <div class="span9" style="height:100%">
    <div id="map">
        <div class="leaflet-bottom leaflet-left">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
            <span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
        </div>
    </div>
</div>
Miklós Erik
  • 3
  • 3
Cellus - A.STEFANI
  • 241
  • 2
  • 2
  • 10
    The style is nice. However I can't click the button anymore. Any idea why ? – nha Jan 17 '15 at 01:05
  • @nha maybe z-value? – phil294 Sep 09 '17 at 00:16
  • 9
    @nha @Magda The problem is that `leaflet-bottom`, `-top`, `-right`, `-left` have the property `pointer-events: none;` which means that the element can not be a target of a mouse event anymore. You can overwrite it by adding `pointer-events: auto;` to your buttons. – elpunkt Dec 01 '18 at 15:46
16

I hope i understood you right and it helps. Here is the fiddle: http://jsfiddle.net/g3JrG/4/

HTML:

<div class="span9" style="height:100%">
    <div id="map-wrapper">
        <div id="map"></div>
        <div id="button-wrapper">
            <input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
         </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS:

#map-wrapper {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid black;
}

#map {
    width: 100%;
    height: 100%;
    background-color: green;
}

#button-wrapper {
    position: absolute;
    bottom: 10px;
    width: 100%;
    border: 1px solid red;
}

TJL

NinjaOnSafari
  • 998
  • 1
  • 8
  • 32
  • please see this jsfiddle.net/GbzR3 & click on get map. You will come to know what I am saying – vaibhav shah Jul 30 '13 at 09:47
  • 2
    add this to the container from the buttons `position: relative; z-index: 9999;` – NinjaOnSafari Jul 30 '13 at 09:56
  • How will this work if the underlying map implements a `click` event? In this case, when you click the button, the button click as well as map click will fire. I am seeing this in my case. – Chintan Pathak Jul 24 '18 at 18:47
  • 1
    @ChintanPathak you need to stop the event from bubbling up when you click on the button https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation – NinjaOnSafari Jul 25 '18 at 06:17
2

I hope i understood your question right. You want to show three buttons inside the map and map should have rounded corners as well as the buttons should also have rounded corners. Hope this helps.

Try this:

HTML:

<div class="span9" style="height:100%">
    <div id="map">
        <div style="padding-left: 10px;padding-right: 10px; position:absolute; bottom:-10px; width:100%;">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
        </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS:

html, body, #map, .row-fluid{
    height: 100%;
}

#map {
    width: 100%;
    border-radius: 15px;
    border:solid 1px black;
}


.btnStyle {
    cursor:pointer;
    background-color: #4D90FE; 
    border-radius: 15px;
    background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
    border: 1px solid #3079ED; 
    color: #FFFFFF;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width:28%
}

.lblStyle {
    color: red;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width: 100%;
    font-weight: bold;
}

Fiddle

Abhishek Jain
  • 2,597
  • 1
  • 18
  • 12
0

I had the same issue and I wanted to add some buttons on my map, I made this function to add custom floating action buttons on the map.

You can use this below function as it is in any leaflet map:

addFloatingButton(mapObject, textForButton, onClickFunction, elementID='mapButton1') {
        // Create the button element with basic dom manipulation
        let buttonElement = document.createElement(elementID);

        // Set the innertext and class of the button
        buttonElement.innerHTML = textForButton;
        buttonElement.className = 'leaflet-floating-button';
        
        // Add this leaflet control
        var buttonControl = L.Control.extend({
          options: {
            // if you wish to edit the position of the button, change the position here and also make the corresponding changes in the css attached below
            position: 'bottomright'
          },
      
          onAdd: function () {
            var container = L.DomUtil.create('div');
            container.appendChild(buttonElement);
            return container;
          }
        });
      
        // Add the control to the mapObject
        mapObject.addControl(new buttonControl());
      
        // The user defined on click action added to the button
        buttonElement.onclick = onClickFunction;
      }

Also don't forget to add the css for the button element.

.leaflet-floating-button{
  position : absolute;
  bottom : 20px;
  right : 20px;
  padding : 10px 20px;
  background-color : #f0efeb;
  color : #000000;
  border : 1px solid #000;
  border-radius : 5px;
  cursor : pointer;
}

Now you can simply call this function from your code as:

addFloatingButtonToMap(myMap, 'Navigate to Point', 
  ()=>{
  //place your on click action code here
  },
'navigateButton')

Please let me know if there are any issues.

Pranav Soni
  • 11
  • 3