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 display: none and then brought into view the map is all the way zoomed out. I have no problem if I use the same code and remove the display: none div from around it.

Any ideas on how to fix that?

Thanks for this awesome resource. Truly awesome.

asked 02 Mar '14, 23:33

cyro's gravatar image

accept rate: 0%

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?

(02 Mar '14, 23:57) SomeoneElse ♦

Here is an example of what I'm trying to embed <iframe frameborder="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-122.480427%2C37.745703%2C-122.472427%2C37.753703&amp;layer=mapnik&amp;marker=37.749703%2C-122.476427" style="border: 1px solid black"></iframe>

(03 Mar '14, 00:12) cyro

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.

(13 May '14, 11:54) travellersam

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.

(18 Mar '15, 00:56) macgirvin

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.

permanent link

answered 18 Mar '15, 03:28

macgirvin's gravatar image

accept rate: 0%


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 ♦
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:


question asked: 02 Mar '14, 23:33

question was seen: 7,223 times

last updated: 18 Mar '15, 12:29

powered by OSQA