Zoom Level on Embedded umap OpenStreetMaps

Curious Cat uses OpenStreetMaps and umap to create my own maps. Then I can embed them on my sites, for example here for Chiang Mai Thailand.

For some reason when you use umap and select the embed option it gives you code that leaves off the zooming altogether. It is an easy fix (and I imagine the code will be fixed making this simple advice obsolete). But for now this is all you need to do.

The url umap adjusts as you zoom the map in your browswer. For example, going to

http://umap.openstreetmap.fr/en/map/chiang-mai_18602

which the Curious Cat Chiang Mai map it will “redirect” to some really far out zoom level

Then you can zoom in a bunch to get the level you want to use to embed.

http://umap.openstreetmap.fr/en/map/chiang-mai_18602#14/18.7851/98.9907

The code created for you to paste into your page is

[code]<iframe width="100%" height="300px" frameBorder="0" src="http://umap.openstreetmap.fr/en/map/chiang-mai_18602?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&datalayersControl=true&onLoadPanel=undefined"></iframe><p><a href="http://umap.openstreetmap.fr/en/map/chiang-mai_18602">See full screen</a></p>[/code]

Which doesn’t include any zooming info so you get the super far our zoom default.

You need to add to the url

[code]src="http://umap.openstreetmap.fr/en/map/chiang-mai_18602[/code]

so that it includes the zooming info. So it would be

[code]src="http://umap.openstreetmap.fr/en/map/chiang-mai_18602#14/18.7851/98.9907[/code]

You can also see the link to “See full screen” isn’t using the zoom settings. If you wanted that link to a zoom setting of your choice you can set that also.

Note the view on your screen and the embedded map isn’t going to be identical. The map will likely cut off some of what you see (due to the sizing of the embedded map). You can also adjust the sizing of the embedded map by adjusting the height (they default to 300px, but you can make it 400px or whatever you want).

Related: Multiple WordPress Blog Networks on One Server โ€“ Overcoming ConflictsChecklist for Setting Up a New Domain on VPSLinux/Ubuntu File and Directory Permissions

2 thoughts on “Zoom Level on Embedded umap OpenStreetMaps

  1. Pingback: Curious Cat Travel Maps | Curious Cat Travel Destinations Blog

  2. Worked for me. Thanks!

    Also, I discovered if you zoom out a couple levels in the embedded map, you can get an embedded view (in my WordPress theme) that is similar to what displays when one follows the “See full screen” link.

Comments are closed.