I'm not sure how to get the following behavior to work. I want to render an iframe embed in a modal and show the map when a modal comes up. Whenever I try to add the iframe to a div that is Any ideas on how to fix that? Thanks for this awesome resource. Truly awesome. asked 02 Mar '14, 23:33  cyro |
One Answer:
My "next attempt" (see my previous comment) was successful. I created the iframe inside a div with position: absolute and left and top both set to -9999 but with display: block. So it's technically "visible" but you can't see it. A button click event switches it to relative and auto (putting it back into its normal place on the page - one can style this to simulate a modal bootstrap element). Works well. The tiling engine seems to have issues with being initialised inside a display: none container. answered 18 Mar '15, 03:28  macgirvin 1 Yes, Leaflet (the map display library used by osm.org) doesn't like being initialised on a hidden div. See for example https://github.com/tombatossals/angular-leaflet-directive/issues/168 . (18 Mar '15, 12:29) Richard ♦ |
Is this related to OpenStreetMap in some way?
Most people render some tiles from somewhere using a Javascript library such as Leaflet or Openlayers - are you trying to do that, or something else?
Here is an example of what I'm trying to embed
<iframe frameborder="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-122.480427%2C37.745703%2C-122.472427%2C37.753703&layer=mapnik&marker=37.749703%2C-122.476427" style="border: 1px solid black"></iframe>I experienced the same, trying to put the map in a Bootstrap 3 modal dialog. The map is loaded, but fully zoomed out.
Placed outside of the modal, the map is rendered correctly.
Subscribing to follow this thread. Same issue here. Manually reloading the frame fixes it (as does leaving the map visible to begin with). Neither of these is acceptable in my application. I've attempted to reload the iframe automatically from the parent on open but this isn't working out well. My next attempt will be to create the iframe visible but off the page and move it back onscreen when "opened". If that doesn't work I'll try a lightbox or something but that really messes up the UI I'm trying to achieve.