[英]How to add an overlay to an leaflet map?
I created a top nav bar and a leaflet map which is below the bar, image is here:我创建了一个顶部导航栏和一个位于栏下方的传单地图,图像在这里: and what I want is the blue nav bar gone but just the hamburger itself there as an overlay to the map.我想要的是蓝色导航栏消失了,但只有汉堡包本身作为地图的覆盖物。 I have the code below but cant seem to solve the issue, if i remove the navbar the hamburger is gone too.我有下面的代码,但似乎无法解决问题,如果我删除导航栏,汉堡包也不见了。 I want it such that only the map remains as in it has a height and width of 100% and the hamburger is an overlay there.我希望它只保留地图,因为它的高度和宽度为 100%,并且汉堡包在那里叠加。 Do let me know if there is a solution.如果有解决方案,请告诉我。
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<link rel="stylesheet" href="style.css">
<style>
html, body, #map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
z-index:0; /* allows other elements to be overlayed */
background-color: rgb(38, 38, 38); /* Change the color of the out of bounds regions */
}
</style>
<title>Map Testing</title>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#fff"
stroke-width="5"/>
<path d="M0,14 30,14" stroke="#fff"
stroke-width="5"/>
<path d="M0,23 30,23" stroke="#fff"
stroke-width="5"/>
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
<a href="#">Data</a>
<a href="#">Imports</a>
<a href="#">Exports</a>
<a href="#">Markers</a>
</div>
<div id="map">
<script src="myscripts.js"></script>
</div>
<script>
function openSlideMenu() {
document.getElementById('side-menu').style.width='300px';
document.getElementById('main').style.marginLeft='300px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width='0';
document.getElementById('main').style.marginLeft='0';
}
</script>
</body>
</html>
// CSS code
body{
font-family: "Arial", serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar{
background-color: #3b5998;
overflow:hidden;
height:63px;
}
.navbar a{
float:left;
display: block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}
.navbar ul{
margin:8px 0 0 0;
list-style:none;
}
.navbar a:hover{
background-color: #ddd;
color:#000;
}
.side-nav{
height:100%;
width:0;
position: fixed;
z-index:1;
top:0;
left:0;
background-color:#111;
opacity: 0.8;
overflow-x:hidden;
padding-top:60px;
transition: 0.5s;
}
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size:22px;
color:#ccc;
display:block;
transition:0.3s;
}
.side-nav a:hover{
color:#fff;
}
.side-nav .btn-close{
position: absolute;
top:0;
right:22px;
font-size:36px;
margin-left: 50px;
}
#main{
transition:margin-left 0.5s;
padding:20px;
overflow: hidden;
width:100%;
}
@media(min-width:568px){
/*.navbar-nav{display:none}*/
}
One option is to create a control and add them to the map一种选择是创建一个控件并将它们添加到地图
L.HamburgerControl = L.Control.extend({
options: {
position: 'topright'
//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control customcss');
var button = L.DomUtil.create('a', '', container);
button.innerHTML = '<svg width="30" height="30"> '+
'<path d="M0,5 30,5" stroke="#000" '+
'stroke-width="5"/>'+
'<path d="M0,14 30,14" stroke="#000" '+
'stroke-width="5"/>'+
'<path d="M0,23 30,23" stroke="#000" '+
'stroke-width="5"/> '+
'</svg>';
L.DomEvent.disableClickPropagation(button);
L.DomEvent.on(button, 'click', this._click);
container.title = "Open Menu";
return container;
},
_click : function () {
document.getElementById('side-menu').style.width='300px';
document.getElementById('main').style.marginLeft='300px';
}
});
new L.HamburgerControl().addTo(map);
But for your question add to the CSS following:但是对于您的问题,请添加以下 CSS:
.navbar{
position: absolute;
background-color: #3b5998;
overflow:hidden;
height:63px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.