What I have
I have a page with leaflet map whose script is available here.
Also in order to handle resizing of map on small screens, I have this just before the HTML <body> tag:
<script>
setInterval(function () {
map.invalidateSize();
}, 100);
</script>
Problem
On big screens, the map is within the bounds. On small screens, the map goes out of bound and shows the whole world.
How to reproduce this error ?
- Visit this link on a big screen device - note how the map looks like - it is bounded
- Now visit the same link in a small device (resolution <=360px)
- Try to see the map by clicking on 'Show map'
- If you are able to see that the map is still bounded, just refresh the page and then click on 'show map' again - the map goes unbounded - it shows the whole world