Menu
I want to add a button to top right corner (20px from top and 20px from right) of my Leaflet map. Problem is I am not sure how to do this properly. The problem is when I use that leaflet class "leaflet-top leaflet-right", my button is not clickable, and when I hover over it, nothing happens. It just remains as a part of the map.
Here is my html code:
<div id="mainContainer">
<div id="mapDiv">
<div id="map">
<div class="leaflet-top leaflet-right">
<div id="refreshButton"><div id="refreshButtonPictogram"><img src="pictograms/refresh.png" height="30px"></div></div>
</div>>
</div>
</div>
<div id="bars"></div>
</div>
Here is my css:
#mainContainer{
position: relative;
width: 100%;
height: calc(100% - 80px);
display: flex;
}
#bars{
z-index: 0;
width: 500px;
overflow-x: auto;
border-left: 1px solid rgb(214, 49, 65);
}
::-webkit-scrollbar {
display: none;
}
#mapDiv {
flex: 1;
}
#map {
width: 100%;
height: 100%;
z-index: 0;
}
#refreshButton{
display: flex;
align-items: center;
position: relative;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: white;
border-radius: 5px;
border-color: gray;
border-style: solid;
border-width: 1px 1px 1px 1px;
opacity: 0.6;
text-align: center;
}
#refreshButton:hover{
opacity: 0.8;
cursor: pointer;
}
#refreshButtonPictogram{
margin: auto;
}
@media screen and (max-width: 500px) {
#mainContainer {
flex-direction: column;
}
#mapDiv,
#bars {
flex: 1;
}
}
345
The following worked for me:
HTML
<body>
<div id="map"></div>
<button id="refreshButton">Refresh Button</button>
</body>
CSS
#refreshButton {
position: absolute;
top: 20px;
right: 20px;
padding: 10px;
z-index: 400;
}
And here is a JSBin with the above code.
Screenshot taken from the JSBin linked above.
I also came across this resource on creating a custom control button in leaflet.
I changed your HTML to the following:
<div id="mainContainer">
<div id="mapDiv">
<div id="map">
<button id="refreshButton">
Button
</button>
</div>
</div>
<div id="bars"></div>
</div>
I also changed the #refreshButton position rule to absolute and gave it a z-index of 500.
In addition to that I added
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Take a look at the updated solution in this JSBin.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
