How to add OSM undercoat to website?

General talk
1

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.

2

Umap - see https://umap.openstreetmap.fr/en/ and https://wiki.openstreetmap.org/wiki/UMap might do what you want. Also see https://leafletjs.com/ - OSM uses that to display map tiles and you can use that yourself to display map tiles and things on top of them.

3

You can use LeafLetJS with the TileLayer url “https://tile.openstreetmap.org/{z}/{x}/{y}.png”

But you’ll have to follow the policy found at https://operations.osmfoundation.org/policies/tiles/ and credit OpenStreetMap contributors.

4

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?


L.tileLayer(
        "https://api.mapbox.com/geocoding/v5/mapbox.places/Los%20Angeles.json?access_token=pk.eyJ1Ijo......",
        {
          zoom: 16,
 
          id: "mapbox.streets",
        }
      ).addTo(map);

This idea worked with the previous code

 https://api.tiles.mapbox.com/v4/{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.

5

https://api.mapbox.com/geocoding/v5/mapbox.places/Los%20Angeles.json?access_token= … 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: https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token= …

6

But why this code isn’t working if I only changed the token itself

https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=ONLY THIS PART HERE AFTER EQUAL SIGN
7

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.

8

Issue solved. THANK YOU ALL.

9

So what was the problem in the end?

10

@SomeoneElse:

he was using a deprecated version of an old classic mapbox mapbox style. See: https://forum.openstreetmap.org/viewtopic.php?id=71764