How to add OSM undercoat to website?

Hi everyone,

I would like to add undercoat - OSM map, on which I will place a few markers later on.

What is the link to this OSM map which I have to add in my www source code?

Thank you in advance.

Umap - see and might do what you want. Also see - OSM uses that to display map tiles and you can use that yourself to display map tiles and things on top of them.

You can use LeafLetJS with the TileLayer url “{z}/{x}/{y}.png

But you’ll have to follow the policy found at and credit OpenStreetMap contributors.

Thank you,

so far I’ve tried with mapbox and generated a token. Unfortunately it doesn’t work and all I get is only a grey background. Any idea how to fix it?

          zoom: 16,
          id: "mapbox.streets",

This idea worked with the previous code{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWF.......

but I had to generate a new one which doesn’t seem to work this time. … is not a tilelayer endpoint but a geocoding endpoint.

You would have to check mapboxes documentation on that places data and than could possibly use that one as a data overlay on a map. But for the basemap itself you would need a raster tilelayer endpoint in leaflet, e.g. the one you used before:{id}/{z}/{x}/{y}.png?access_token=

But why this code isn’t working if I only changed the token itself{id}/{z}/{x}/{y}.png?access_token=ONLY THIS PART HERE AFTER EQUAL SIGN

If you’re following Mapbox’s instructions about how to do something and you hit a problem, you’ll probably have to ask Mapbox about it.

Issue solved. THANK YOU ALL.

So what was the problem in the end?


he was using a deprecated version of an old classic mapbox mapbox style. See: