The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads. If the content inside is bigger, scrollbars have to suffice. If you are going to debug it by pasting URL in browser, you won't see marker, unless you replace & in URL with &.Normally you set and width and height for iframes. In the example you have ready to use vsprintf function. 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.Īs the result of the function is an array, you can feed it to vsprintf() - array version of sprintf(). The algorithm is not ideal, but it should be ok for this use. 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. getCoordOffset is internal function, so I'm not explaining it, unless anybody wants it. It could be written better, but you have an idea. $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). $lat and $lon is latitude and longitude in decimal form (i.e. The function you'd use is getBBox function to get array. It makes iframe URL from input data: lat, lon and area. 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.
IFRAME ZOOM FULL
Use leafletJS or OpenLayers to host the javascript yourself with full control over, zoom and markers etc. 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) Use Static map images to generate a static image URL with all sorts of options.umap would be hosting the contents of your iframe. Use umap, to create a iframe embeddable map with all sorts of options.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) The embed.html javascript is relatively simple, and only supports the bbox parameter as generated by the share feature. This is telling it indirectly what the zoom level will be.Īnother 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)īut as for specifying a zoom level parameter more directly in the URL, that is currently not supported.
It is this parameter which represents the bounding box coordinates of this extent of what's visible on the screen. This points to embed.html with the parameter 'bbox'. If you are interested in parameters, you can see that generated HTML is an iframe with a 'src' parameter. 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. These will still be visible within the narrower embedded view. 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. to zoom in/out a bit, and then re-do the copy and paste of the HTML into your website)īut 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.
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.
0 kommentar(er)
