2 different Leaflet Popup styles
-
11-12-2019 - |
Frage
Is it possible to have 2 different styles for Popups in Leaflet? 2 different popups (in terms of style and content) will be triggered on user interaction, one on mouseover
and one on click
.
Problem: I tried overiding the CSS style for .leaflet-popup-content-wrapper'
in the stylesheets which works for one popup style, that was not able to switch the CSS styles at runtime to switch back and forth between 2 CSS styles, probably because the popup DOM elements were not loaded yet.
marker.on('mouseover', function() {
marker.bindPopup('<b>Hello world</b>');
marker.openPopup();
})
marker.on('click', function() {
marker.bindPopup('<b>Click click</b>');
marker.openPopup();
// Failed attempt to switch style
$('.leaflet-popup-content-wrapper').addClass('new-style');
})
Lösung
The bindPopup
method can be passed an "options"
parameter which can contain a "className"
attribute that will be added to the div for the popup:
marker.on('mouseover', function() {
marker.bindPopup('<b>Hello world</b>',{className: 'mouseover-popup'});
marker.openPopup();
})
marker.on('click', function() {
marker.bindPopup('<b>Hello world</b>',{className: 'click-popup'});
marker.openPopup();
})
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow