0

On a personal site, I use leaflet to display a map.

var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: 'abcd',
    minZoom: 6,
    maxZoom: 13
  });

So with leaflet I can use a cartoDb tile without any problem, without any limitation.

On another site, I used to use Mapbox for their story telling feature (moving the map according to the scroll). As Mapbox is not free beyond a certain limit, I looked for an alternative and found MaplibreGl.

However, when I call my map in the following way, no map is displayed :

  var map = new maplibregl.Map({
      container: 'mapHome',
      style: {
     'version': 8,
     'sources': {
     'raster-tiles': {
     'type': 'raster',
     'tiles': [
       'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
      ],
      'tileSize': 256,
      'attribution':
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
    }
   },
   'layers': [
    {
     'id': 'simple-tiles',
     'type': 'raster',
     'source': 'raster-tiles',
     'minzoom': 0,
     'maxzoom': 16
    }
   ]
  },

My question is how to use the tile https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png with MaplibreGl?

The problem comes from the shape of the url, but even using another url like : https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png it doesn't work.

If I go to the cartodb site, I see that it is also paid for beyond a certain limit, but with leaflet I can use it without restriction. Is there a way to use it for free with MapLibreGl?

With help from @Ziggy's answer, it is now working, see the below example :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
 let mapConfig = {    
      'container': 'map',
      'hash': true,
      'style': {
        'version': 8,
        'sources': {
          'carto-light': {
            'type': 'raster',
            'tiles': [
              "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
              "https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
              "https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
              "https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
            ]
          }
        },
        'layers': [{      
          'id': 'carto-light-layer',
          'source': 'carto-light',          
          'type': 'raster',
          'minzoom': 0,
          'maxzoom': 22
        }]
      },
      'center': [-73.9021,40.786],
      'zoom': 9,
      'pitch': 20        
  };
  map = new maplibregl.Map(mapConfig);
</script>
 
</body>
</html>

My only remark is that the visual rendering of the card is not quite the same, the labels on the card are bigger, and if we use the pitch and bearing functions, the labels do not get back into the axis, unlike the version used on leaflet.

A map with leaflet enter image description here

same map with maplibre enter image description here

Is this difference normal?

As we see it is much less detailed

Improve this question
1
  • Please don’t ask follow on questions in your original question. They should be asked as new questions using a link to this one to help provide background, if it is relevant.
    – PolyGeo ♦
    Feb 11 at 21:06

2 Answers 2

Reset to default
1

this is copy paste of my working web map

  let mapConfig = {    
      'container': 'map',
      'hash': true,
      'style': {
        'version': 8,
        'sources': {
          'carto-light': {
            'type': 'raster',
            'tiles': [
              "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
              "https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
              "https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
              "https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
            ]
          }
        },
        'layers': [{      
          'id': 'carto-light-layer',
          'source': 'carto-light',          
          'type': 'raster',
          'minzoom': 0,
          'maxzoom': 22
        }]
      },
      'center': [-73.9021,40.786],
      'zoom': 9,
      'pitch': 20        
  };
  map = new maplibregl.Map(mapConfig);
Improve this answer
0
0

Ok finally I got it working as expected, with better rendering. No the map has more details ! I use the code provided in the mapLibreGl example page, but using the url of Ziggy's example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new maplibregl.Map({
container: 'map', // container id
style: {
'version': 8,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': [
'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'
],
'tileSize': 256,
'attribution':
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
}
},
'layers': [
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles',
'minzoom': 0,
'maxzoom': 22
}
]
},
center: [-74.5, 40], // starting position
zoom: 2 // starting zoom
});
</script>
 
</body>
</html>
Improve this answer

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