3

I have created a popup that opens when the map is loaded. This is being used as a splash screen. I have updated the CSS with the following so it looks the part:

.custom-popup, .leaflet-popup-content-wrapper {
    background:#2c3e50;
    color:#fff;
    font-size:12px;
    line-height:10px;
    border-radius: 10px;
    }

.custom-popup, .leaflet-popup-content-wrapper a {
    color:rgba(255,255,255,0.1);
    }

.custom-popup, .leaflet-popup-tip-container {
    width:30px;
    height:15px;
    }

.custom-popup, .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
    }

JS:

var startpopup = L.popup({
    closeButton: true,
    autoClose: true,
    keepInView: true
    })
    .setLatLng(map.getBounds().getCenter())
    .setContent('<p>DISCLAIMER TEXT.</p>')
    .openOn(map);

However this is applied to all my popups that I have created for my different layers. I only want the above CSS applied to my splash screen popup. How do I revert back to the original CSS for popups after the splash screen popup is removed?

3

You should assign a different classname and define the relative CSS style for each kind of popup:

var popup = L.popup({
    closeButton: true,
    autoClose: true,
    className: "custom-popup" // classname for the popup acting like a splash screen
})
  .setLatLng(map.getBounds().getCenter())
  .setContent('<p>Some Disclaimer Text.</p>')
  .openOn(map);

For instance, if we have a marker we can bind the popup with its options containing the popup classname:

var popupContent = "<b>Hello world!</b><br />I am a popup.";
var popupOptions =
    {
      'maxWidth': '500',
      'className' : 'another-popup' // classname for another popup
    }
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup(popupContent, popupOptions);

This could be the style for the another-popup classname:

/*another-popop style*/
.another-popup .leaflet-popup-content-wrapper {
  background: #2ce897;
  color: #eee;
  font-size: 12px;
  line-height: 24px;
  border-radius: 0px;
}
.another-popup .leaflet-popup-content-wrapper a {
  color: rgba(200, 200, 200, 0.1);
}
.another-popup .leaflet-popup-tip-container {
  width: 50px;
  height: 15px;
}
.another-popup .leaflet-popup-tip {
  background: transparent;
  border: none;
  box-shadow: none;
}

Codepen

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.