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

http://umap.openstreetmap.fr/en/map/chiang-mai_18602#6/18.719/99.657

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

<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>

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

You need to add to the url

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

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

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

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

One thought on “Zoom Level on Embedded umap OpenStreetMaps

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg