3

I have a custom popup that is acting as a disclaimer/splash screen when is first loaded. At the moment, the popup is removed when the user hits the close button or clicks outside of the popup. However, is the mouse wheel is scrolled, or the user uses the zoom tools, the map zooms in, however the pop up remains. How do I disable all map functions until the popup is removed.

popup

var popup = L.popup({
    closeButton: true,
    autoClose: true
    })
    .setLatLng(map.getBounds().getCenter())
    .setContent('<p>Some Disclaimer Text.</p>')
    .openOn(map);
1

Disable dragging and zooming in the map definition:

var map = L.map('map', {
    center: [0, 0], // your center here
    zoom: 1,        // your zoom here
    zoomControl: false,
    dragging: false,
    touchZoom: false,
    doubleClickZoom: false,
    scrollWheelZoom: false,
    boxZoom: false,
    keyboard: false,
    tap: false
});

Then, re-enable them when the user closes the popup (or clicks on the map, because autoClose: true in the popup properties):

var popup = L.popup({
        closeButton: true,
        autoClose: true
    })
    .setLatLng(map.getBounds().getCenter())
    .setContent('<p>Some Disclaimer Text.</p>')
    .openOn(map);

map.once('popupclose', function(e) {   
    // add the zoom control
    L.control.zoom().addTo(map);
    // enable drag and zoom handlers
    map.zoomControl.enable();
    map.dragging.enable();
    map.touchZoom.enable();
    map.doubleClickZoom.enable();
    map.scrollWheelZoom.enable();
    map.boxZoom.enable();
    map.keyboard.enable();
    if (map.tap) map.tap.enable();
});

Here's a Codepen showing the code in action.

  • When the popup is removed/closed, none of the functions are enabled. I cant use the zoom functions. – MacroZED Nov 7 '17 at 16:10
  • However i managed to get it to work by removing the else statement. I know this isn't best practice though, so would need some guidance on this. – MacroZED Nov 7 '17 at 16:17
  • You're right... I've updated the answer with a real working solution this time tested against Leaflet 1.2.0. – Antonio Falciano Nov 8 '17 at 18:30

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.