OpenStreetMap – How to Use OpenStreetMap in Webpage via OSM URL without Leaflet or OpenLayers

openstreetmapweb-mapping

I want to know how I can interact with OpenStreetMap in a webpage via (only HTML, CSS, JavaScript) without Leaflet, OpenLayers, MapBox or anything like them (in backend or frontend). I am going to use pure OpenStreetMap only through URL.

For example in below code it seems I didn't run Leaflet but when I went to inspect webpage by DevTools I got Leaflet is running! And zoom control panel was belong to Leaflet.

enter image description here
enter image description here

I learned and used this question "openstreetmap-embedding-map-in-webpage-like-google-maps" asked in stackoverflow already.

<iframe width="400" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=51.2016004294,35.6079433209,51.5569619459,35.7819296463&amp;layer=mapnik" style="border: 1px solid black"></iframe>

But when I changed code to different coordinate and webpage loaded again I saw map loaded perfect together with Leaflet control! Whereas I didn't write any code in page it will want to run Leaflet!

Best Answer

If you want to avoid any external libraries then you have to load the tiles directly.

OMS's standard tile layer uses TMS and consists of the following tile URLs:

https://a.tile.openstreetmap.org/${z}/${x}/${y}.png
https://b.tile.openstreetmap.org/${z}/${x}/${y}.png
https://c.tile.openstreetmap.org/${z}/${x}/${y}.png

To show a specific location you have to specify the zoom level z, longitude x and latitude y. How to do this is explained at slippy map tilenames, including example implementations in various languages.

Example: https://b.tile.openstreetmap.org/13/4409/2741.png

To implement panning you have to change x and y accordingly. To implement zooming you have to increase/decrease z and adapt x and y to match the new subtile.

Related Question