Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set various option in Leaflet openPopup?

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: '&copy; <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();
});
like image 225
Avinash Kadam Avatar asked Mar 06 '23 16:03

Avinash Kadam


2 Answers

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
});
like image 94
ghybs Avatar answered Mar 09 '23 06:03

ghybs


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: '&copy; <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>
like image 45
kboul Avatar answered Mar 09 '23 05:03

kboul