Wie man Tasten auf der Broschüre Karte setzen

Question

Ich benutze Flugblatt Karte in meiner Anwendung & mit Bootstrap für Reaktionsfähigkeit. Ich habe einige Knöpfe unter dieser Karte. Es sieht ungefähr so ​​aus.

Aber ich will Tasten auf der Karte zu überlappen, wie diese

Hier ist mein 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> 

Meine CSS für Karte

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; 
} 

Answer 1

Ich hoffe, dass ich verstanden Sie rechts ab und es hilft. Hier ist die Geige: 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

Answer 2

Ich hoffe, ich habe Ihre Frage richtig verstanden. Sie möchten drei Schaltflächen innerhalb der Karte zeigen und Karte sollte abgerundete Ecken sowie die Schaltflächen sollten auch abgerundete Ecken haben. Hoffe, das hilft.

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

Answer 3

Leaflet.js bietet die folgenden Klassen:

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

Generisches HTML Beispiel:

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

den vorherigen HTML auf Ihre Frage Anpassung:

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