javascript - How to put buttons on the leaflet map

ID : 274336

viewed : 37

Tags : javascripthtmlcssleafletjavascript





Top 4 Answer for javascript - How to put buttons on the leaflet map

vote vote

93

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> 
vote vote

87

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

vote vote

75

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

vote vote

68

Top 3 video Explaining javascript - How to put buttons on the leaflet map







Related QUESTION?