2

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!

Improve this question
5
  • You included openstreetmap.org/export/embed.html which in turn includes Leaflet.
    – scai
    Nov 12, 2019 at 9:48
  • Ok, what should I do, if I want see osm without leaflet?
    – Navid
    Nov 12, 2019 at 9:52
  • 2
    If you want some sort of interactive map view, then it is necessary to use some code to load tiles, zooming, etc. You can write this code itself, or use some 3rd party libraries, like leaflet, which is much easier and reliable...
    – DavidP
    Nov 12, 2019 at 10:20
  • 3
    In order to make a Leaflet-like viewer without Leaflet, you need to rewrite Leaflet, from scratch. This may be a significant level of effort.
    – Vince
    Nov 12, 2019 at 11:30
  • Are you asking how you could just see a static map, with no interaction?
    – alphabetasoup
    Apr 19, 2022 at 3:34

1 Answer 1

Reset to default
3

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

OMS's standard tile layer uses TMS and uses the following URL scheme: https://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://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.

Improve this answer
2
  • Thank you I tried this method but didn't get result "I got too many request" error message! I'll try again in other ways, but do you know how I can solve this kind of restriction?
    – Navid
    Nov 12, 2019 at 10:53
  • Sure it has since it costs money to run these servers. See the tile usage policy for more information.
    – scai
    Nov 12, 2019 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.