[openstreetmap/openstreetmap-website] Embedded map refresh shows whole world in Chrome (#2531)

Archibald2 notifications at github.com
Wed Mar 17 13:05:12 UTC 2021


I find maps are loading correctly in Chrome when I use the [Leaflet JavaScript Library](https://leafletjs.com/) but not when I use an iframe.

Because my websites are responsive (Flexbox CSS), I am only using the iframe's 'src' attribute with URL obtained via OpenStreetMap's 'Share' button. However I do not think this is affecting the issue.

I too think the issue may be caused by a timing or "race condition". This has led me to trying this code which I find shows the correct map:
```
<iframe id="map1" class="Box_Map" src=""></iframe>
<script>document.getElementById("map1").src="https://www.openstreetmap.org/export/embed.html?bbox=0.09304046630859376%2C52.14381308981805%2C0.6663894653320314%2C52.32925493016711&layer=mapnik"</script>
```
_Note: my class "Box_Map" styles the iframe instead of attributes from the 'Share' button embed code._

If this is a timing issue, I cannot guarantee this solution will work on a very fast PC. An alternative approach would be to put the script in another file and embed it using the HTML '[defer](https://www.w3schools.com/tags/att_script_defer.asp)' attribute.

It is evident that the query string portion of the URL (bbox=......) is telling the OpenStreetMap server what area of the world the map should cover. So if the URL (with bbox query string) is obtained with a map displayed in a large browser window, at least the same area of the world will be displayed when displayed within a relatively small iframe. To do this, I expect JavaScript code within the web page from OpenStreetMap is getting the iframe's dimensions (in pixels) using window.clientWidth and window.clientHeight. This is where I guess there is a timing bug in Chrome.






-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2531#issuecomment-801064788
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210317/716acbef/attachment.htm>


More information about the rails-dev mailing list