I want to remove close button in popup of marker. How to set option in openPopup() method. My code is:
var mymap = L.map('map1').setView([lat, lng], 13);
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);
var marker = L.marker([lat, lng]).addTo(mymap);
marker.bindPopup(loc_address);
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});
The .openPopup
method does not expect any option.
It is within the .bindPopup
method that you can specify options for your Leaflet Popup.
In particular, you should be interested in the closeButton
option:
Controls the presence of a close button in the popup.
marker.bindPopup(loc_address, {
closeButton: false
});
In order to hide the x icon on the marker, you can set the display
property of the relevant class to none
. Try using the following code in your css file:
.leaflet-popup-close-button {
display: none;
}
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
#mapid {
height: 100vh;
}
body {
margin: 0px;
}
.leaflet-popup-close-button {
display: none;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<div id="mapid"></div>
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