I have an web application, written using Angular.js and angular-leaflet-directive, that displays a selection of roads on a map. I have included some bookmarks for easy navigation to certain areas and so was basing map extent navigation on using the center and zoom attributes.
I am now also including functionality to determine whether a road is visible in the current map extent, using:
map.getBounds().contains([roadLatA, roadLngA]) || map.getBounds().contains([roadLatB, roadLngB]), where A and B refer to the end points of a road.
This works perfectly on page load but after any sort of interaction (e.g. drag, zoom events) when getBounds() is called again, it returns the same LatLng for each corner of the bounding box, which are the values that are set as the default center coordinates. After a lot of refactoring I cannot find a way to incorporate both center and getBounds() successfully.
Is it possible or is there a limitation within either angular-leaflet-directive or leaflet.js that means the two methods of setting map extent conflict with each other?
I have now resolved the problem, the issue was in calling leafletData.getMap() without passing in the id of the map element.
This behaviour was throwing me as the initial getMap() call (without an id) was returning the correct map object, but on subsequent calls (after user interaction) the $promise was not being resolved and so I wasn't getting undefined or any other errors. I guess the getBounds() function was then being called on the wrong map object.