How can I load a country specific map into OpenStreetMap?

Question

I want to load a country specific map (say https://openstreetmap.in). I'm using the following code snippet, but it loads the map from https://www.openstreetmap.org:

layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
]

Can anybody please tell me how I can load a country specific map?

Answer 1

You need to create a custom tile layer, either a so-called OSM layer or a XYZ layer. The OpenLayer examples Localized OpenStreetMap and XYZ explain how to specify a custom tile source.

The tile server URL for openstreetmap.in is https://{a-c}.tiles.mapbox.com/v4/openstreetmap.1b68f018/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiamluYWxmb2ZsaWEiLCJhIjoiY2psejFtZG8wMWhnMjNwcGFqdTNjaGF2MCJ9.ZQVAZAw8Xtg4H2YSuG4PlA.

Your code should then look roughly like this:

var osmIndia = new TileLayer({
  source: new OSM({
    attributions: [
      '© <a href="https://www.mapbox.com/">mapbox</a> and <a href="https://www.openstreetmap.org/">OpenStreetMap</a>'
    ],
    url: 'https://{a-c}.tiles.mapbox.com/v4/openstreetmap.1b68f018/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiamluYWxmb2ZsaWEiLCJhIjoiY2psejFtZG8wMWhnMjNwcGFqdTNjaGF2MCJ9.ZQVAZAw8Xtg4H2YSuG4PlA'
  })
});

[...]

layers: [
    osmIndia
]