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/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="">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();
});

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/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap/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();
});

• javascript
• leaflet
• popup

• Hi. You want the x icon not to be visible in the maker popup? Is that correct? – kboul Commented Aug 4, 2018 at 12:54
• Yes right I want to hide it. – Avinash Kadam Commented Aug 4, 2018 at 13:43
• You can use css to do that. I posted an answer. Let me know if it helped you. – kboul Commented Aug 4, 2018 at 14:10

2 Answers 2

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/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap/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./[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg./[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<div id="mapid"></div>