Question

88

How to put buttons on the leaflet map

rated 0 times [ 91] [ 3] / answers: 1 / hits: 40824 / 11 Years ago, tue, july 30, 2013, 12:00:00

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

But I want to overlap buttons on map like this

enter

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;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neildrews

Add To Favorites

Follow

Total Points: 166

Total Questions: 103

Total Answers: 85

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

answered 11 Years ago daja · Accepted Answer

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