1

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 want 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 belongs 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 load webpage again I saw map load perfect but together Leaflet control! Whereas I didn't write any code in page it want run Leaflet!

  • You included openstreetmap.org/export/embed.html which in turn includes Leaflet. – scai Nov 12 '19 at 9:48
  • Ok, what should I do, if I want see osm without leaflet? – Predator X Nov 12 '19 at 9:52
  • 1
    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 '19 at 10:20
  • 2
    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 '19 at 11:30
2

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.

| improve this answer | |
  • 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? – Predator X Nov 12 '19 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 '19 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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