I just embedded the HTML provided by the Export function into a web page, and when it displays on my site, the map is zoomed out to the max: it shows the whole world instead of the area I selected.

How can I make it display like it used to a week or so ago, zoomed exactly to the area I selected, just as it was when I exported it.

asked 27 Feb '13, 10:17

frisket's gravatar image

frisket
31113
accept rate: 0%

edited 28 Feb '13, 21:57

aseerel4c26's gravatar image

aseerel4c26 ♦
31.9k16236548


You should find that you can adjust your view of the map on the OpenStreetMap website, to make adjustments to the resulting generated HTML (fiddle with your view, e.g. to zoom in/out a bit, and then re-do the copy and paste of the HTML into your website)

But you may well find the zoom you see on the website (in a wide window) is higher than the zoom level in the resulting embedded map (narrow iframe), so if you specifically want a higher zoom level, simply zoom in a bit more to compensate.

What you actually need to pay attention to, is what extents of the map can you see on screen, to the left and right and sides. These will still be visible within the narrower embedded view. It's designed to preserve the extents of what you can see, rather than preserve the centre and zoom level of what you can see.

If you are interested in parameters, you can see that generated HTML is an iframe with a 'src' parameter. This points to embed.html with the parameter 'bbox'. It is this parameter which represents the bounding box coordinates of this extent of what's visible on the screen. This is telling it indirectly what the zoom level will be.

Another interesting consequence of this approach is that you would get a higher zoom level if you made your iframe bigger (change the width and height parameters in the generated HTML)

But as for specifying a zoom level parameter more directly in the URL, that is currently not supported. The embed.html javascript is relatively simple, and only supports the bbox parameter as generated by the share feature.

We could enhance this to add more options, but the central OpenStreetMap website isn't really about hosting iframe contents for people, and if you have more sophisticated requirements as a web developer, you should do one of the following (in increasing order of complexity)

  • Use umap, to create a iframe embeddable map with all sorts of options. umap would be hosting the contents of your iframe.
  • Use Static map images to generate a static image URL with all sorts of options. Your chosen service would be hosting the static image (Note: Although static images might seem rather basic, they're also lean and elegant, and can be linkified to somewhere like the OpenStreetMap homepage to offer a more dynamic view)
  • Deploying your own slippy map. Use leafletJS or OpenLayers to host the javascript yourself with full control over, zoom and markers etc.
permanent link

answered 19 Feb '14, 14:29

Harry%20Wood's gravatar image

Harry Wood
9.2k2486126
accept rate: 13%

edited 19 Feb '14, 16:19

So I assume that you used the Export tab of openstreetmap.org site.

There it is documented that the exported HTML code is displaying the current map view ... so if this does not work for you, it may be a software bug at osm.org

Please try again, or show us the delivered HTML code you have embedded to your website via Pastebin or some similar service if it is too much text.

permanent link

answered 27 Feb '13, 18:56

stephan75's gravatar image

stephan75
12.4k353209
accept rate: 6%

1

Here is the code I pasted:

iframe src="http://www.openstreetmap.org/export/embed.html?bbox=-8.4973,51.89139,-8.48863,51.89476&layer=mapnik&marker=51.89297,-8.49417" width="425" height="350"></iframe>
View Larger Map

This is showing at http://www.ucc.ie/en/support/it/offices/ (click on the blue bar to reveal). There is a screenshot of what I see in FF or Chrome here: http://www.ucc.ie/zoomed-out-map.png

(28 Feb '13, 11:21) frisket

the live example works as expected for me (Firefox) - at least now.

(28 Feb '13, 21:56) aseerel4c26 ♦

the generated HTML code by the export panel on http://www.openstreetmap.org/ (I guess you mean that) includes a parameter "bbox" which defines the area which should be shown. I just tried an example export and the HTML code did not show the whole world but a much smaller area which I had in my current osm.org view.

Go to http://www.openstreetmap.org/?lat=50.1331&lon=8.6917&zoom=12&layers=M select export, select the HTML option. There you are:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=8.5628,50.0781,8.8217,50.1877&amp;layer=mapnik" style="border: 1px solid black"></iframe>

permanent link

answered 27 Feb '13, 22:27

aseerel4c26's gravatar image

aseerel4c26 ♦
31.9k16236548
accept rate: 18%

edited 27 Feb '13, 22:36

1

OK, thanks. Yes, that's exactly what I did. Some experimenting shows that this works fine in a plain hand-made HTML5 doc, so the problem is a conflict with our site style (CSS/JS): it works when I place it outside the unfolding menubar.

Strange that it worked fine last week...someone must have changed the CSS or JS in the meantime.

Thanks for the help.

(28 Feb '13, 11:27) frisket

BTW how do I mark this as Closed?

(28 Feb '13, 11:27) frisket

There's a tick / checkmark that you can select under the correct answer. Do that, and it'll appear as "answered".

(and no, it's not particularly obvious!).

(28 Feb '13, 11:32) SomeoneElse ♦
1

@frisket: thank you for your feedback, that's helpful for all others.

(28 Feb '13, 21:49) aseerel4c26 ♦

Hey, it's my first post here :) It's not ideal way, but here's rewritten method from my PHP's class to use as separate function. It makes iframe URL from input data: lat, lon and area.

The function you'd use is getBBox function to get array. $lat and $lon is latitude and longitude in decimal form (i.e. 54.3242342). $area is how much area do you want to see in meters (if you want to have map starting 500 meters above and ending 500 meters below, use 1000).

It could be written better, but you have an idea. getCoordOffset is internal function, so I'm not explaining it, unless anybody wants it. For easiness of use, I release it as public domain, wherever it's possible and CC-0 for other cases - if you actually want to use attribution, just use my nick or change it to website name coming from it.

The algorithm is not ideal, but it should be ok for this use. If you don't want marker, remove everything after layer=mapnik from sprintf template URL and remove 4 and 5 index from getBBox function array.

As the result of the function is an array, you can feed it to vsprintf() - array version of sprintf(). In the example you have ready to use vsprintf function. If you are going to debug it by pasting URL in browser, you won't see marker, unless you replace &amp; in URL with &.

function getCoordOffset($what, $lat, $lon, $offset) {
    $earthRadius = 6378137;
    $coord = [0 => $lat, 1 => $lon];

    $radOff = $what === 0 ? $offset / $earthRadius : $offset / ($earthRadius * cos(M_PI * $coord[0] / 180));
    return $coord[$what] + $radOff * 180 / M_PI;    
}

function getBBox($lat, $lon, $area) {
$offset = $area / 2;
return [
    0 => getCoordOffset(1, $lat, $lon, -$offset),
    1 => getCoordOffset(0, $lat, $lon, -$offset),
    2 => getCoordOffset(1, $lat, $lon, $offset),
    3 => getCoordOffset(0, $lat, $lon, $offset),
    4 => $lat,
    5 => $lon
]; // 0 = minlon, 1 = minlat, 2 = maxlon, 3 = maxlat, 4,5 = original val (marker)
}

If you want bounding box for area 1x1km, now you need to count it like that:

$bbox = getBBox(52.13543, 19.43434, 1000);
$url = vsprintf('http://www.openstreetmap.org/export/embed.html?bbox=%.15f%%2C%.15f%%2C%.15f%%2C%.15f&amp;layer=mapnik&amp;marker=%.15f%%2C%.15f', $bbox); // merge result array with template string - URL for iframe

By the way I had problems with map totally zoomed out, but it's rather OSM bug. I changed offset to smaller, then I got back to earlier offset and it worked. Maybe malformed cookies or so. It happened once.

permanent link

answered 10 Aug '16, 01:58

KrzysiuNet's gravatar image

KrzysiuNet
1
accept rate: 0%

Your answer
toggle preview

Follow this question

By Email:

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

By RSS:

Answers

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:

×273
×87
×85
×14
×6

question asked: 27 Feb '13, 10:17

question was seen: 13,749 times

last updated: 10 Aug '16, 01:58

powered by OSQA