I am playing with leaflet plugin active-area (https://github.com/Mappy/Leaflet-active-area), but I am having an issue with autopan, specifically regarding autopan when popups are opened.

Desired Behavior:

When a popup is opened, the map should pan to contain that popup within the active area div. This is what a leaflet map does automatically, but I want it to apply only to the active area div. But it's not doing that. Someone had put an issue in (https://github.com/Mappy/Leaflet-active-area/issues/13), but there's not a lot of detail there, and I'm still having the same issue described.

I have a codeblock which generates random markers, and opens the popup of the most recently generated popup. Here's my code:

// Make empty array to recieve randomly generated markers
randomMarkerArray = [];

// Useful random number function
function randomNumber(min, max){
   return ( Math.random() * (max - min) ) + min

// Define buttons
var randomMarkerButton = document.querySelector('#randomMarker');
var clearMarkersButton = document.querySelector('#clearRandomMarkers');

// Empty variable to recieve the layergroup which is created when a the button is pressed
var randomMarkerGroup;

// When the button is pressed:
randomMarkerButton.addEventListener("click", function(){
   // Get map bounds:
   let mapBoundLeft = leafletMap.getBounds()._southWest.lng;
   let mapBoundRight = leafletMap.getBounds()._northEast.lng;
   let mapBoundTop = leafletMap.getBounds()._northEast.lat;
   let mapBoundBottom = leafletMap.getBounds()._southWest.lat;

   // Make random number within bounds
   let randomLng = randomNumber(mapBoundLeft, mapBoundRight);
   let randomLat = randomNumber(mapBoundTop, mapBoundBottom);

   let position = [randomLat, randomLng];

   // Create a random marker
   let randomMarker = L.marker( position )
  .bindPopup(`This is a randomly placed marker<br>
     Latitude: ${randomLat}<br>
     Longitude: ${randomLng}<br>`);

   // Give each random marker its own name with its index for easy reference
   randomMarker._name = `Random Marker ${randomMarkerArray.length + 1}`;
   // Push it into the array

   // Create layerGroup using the array
   randomMarkerGroup = L.layerGroup( randomMarkerArray )
   // Open popup on most recently added marker
   randomMarkerArray[randomMarkerArray.length - 1].openPopup();


// Code to clear the random markers you've generated so far
clearMarkersButton.addEventListener("click", function(){
   // Remove the layergroup of random markers
   // Empty the array to truly refresh the random marker layer
   randomMarkerArray = [];
}, false);

See my codepen:


Behavior I'm seeing

When the first marker is generated, it is properly generated within the active area, but then the map pans away from the marker. Every marker generated after that is then generated in the active area, but the map does not pan to contain the popup within the active area bounds. Even more frustrating is when you pan the map, then hit the 'Add Random Marker' button. The map attempts to pan back to where it was before. But it is not at all consistent. I am not sure if my problem is in my code, but I dont think so, as it works just fine without active area. I put in an issue with the gitHub, but no one responding. I am somewhat new to coding.

  • Fact is that your CodePen example does not work as it should, even zooming is wrong, but when I tried your code on my local server and on JSFiddle, it works OK. See jsfiddle.net/TomazicM/p84o0dz3/3
    – TomazicM
    Commented Sep 29, 2019 at 13:58
  • I agree the zoom in codepen is wierd, I'm not getting that on my own browser. But that's not my issue. For some reason the JSfiddle is working. Did you change any code? why would the JS fiddle work, but the codepen doesnt, and my own code doesn't? Commented Sep 30, 2019 at 1:46
  • One thing I just tried is when I copy in the code from leaflet active-area directly in my code, like I did in the codepen, it seems to work well, similar to your jsfiddle. But in my original code, I don't have it that way. I have the active-area.js sourced in in my html head, and my personal script (containing the random marker function) is sourced in after that. Does this mean something else in my personal code is interfering with the active area? Commented Sep 30, 2019 at 1:55
  • As for CodePen I suppose there must be some CodePen CSS setting that is causing strange behaviour. I haven't changed anything when copying your code from CodePen to JSFiddle, except that I took Leaflet.active-area code from GitHub.
    – TomazicM
    Commented Sep 30, 2019 at 6:25
  • It's hard to say whay it doesn't work in your original code. Three possible reasons: (a) active-area.js is included before leaflet.js, (b) active-area.js is some older version (c) something in your code inetrferes with active-area plugin.
    – TomazicM
    Commented Sep 30, 2019 at 6:49

1 Answer 1


I'll put this into answer since it took me some time to find the reason for strange behaviour of your code, but content wise it really should be only comment.

You are using some old version of Leaflet.active-area plugin. Download the latest one from https://github.com/Mappy/Leaflet-active-area and your code will work as it should.

  • wow. this has driving me nuts for weeks and the solution was so simple. thank you! how did you realize this? Commented Oct 3, 2019 at 22:38
  • Tried everything & long pgramming experience (45+). If answer helped you, it seems appropriate to accept it or at least upvote it.
    – TomazicM
    Commented Oct 4, 2019 at 5:24
  • I accepted it but I can't upvote it, as I don't have enough reputation yet. Trying to get there.! Commented Oct 4, 2019 at 17:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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