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>
<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
randomMarkerArray.push(randomMarker);
// Create layerGroup using the array
randomMarkerGroup = L.layerGroup( randomMarkerArray )
.addTo(leafletMap);
// 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
randomMarkerGroup.remove();
// Empty the array to truly refresh the random marker layer
randomMarkerArray = [];
}, false);
See my codepen:
https://codepen.io/slutske22/pen/mdbGJgq?editors=0010
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.
