Add a raster tile source

Add a third-party raster source to the map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/map-tiles/

by Trufi

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css">
<script src="http://stamen.com"></script>
<script src="http://creativecommons.org/licenses/by/3.0"></script>
<script src="http://openstreetmap.org"></script>
<script src="http://creativecommons.org/licenses/by-sa/3.0"></script>
<div id="map"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJ1ZmkiLCJhIjoiY2lrcW1pdzU4MDEyanUwbTIwZzJ1bmY4dSJ9.5qW-pRcgah2nQIWpGKwHRg';

const map = new mapboxgl.Map({
  container: 'map',
  style: {
    'version': 8,
    'sources': {
      'raster-tiles': {
        'type': 'raster',
        'tiles': [
          'https://tile0-cdn.maps.2gis.com/tiles?x={x}&y={y}&z={z}&v=1.0&ts=online_hd',
          'https://tile1-cdn.maps.2gis.com/tiles?x={x}&y={y}&z={z}&v=1.0&ts=online_hd',
          'https://tile2-cdn.maps.2gis.com/tiles?x={x}&y={y}&z={z}&v=1.0&ts=online_hd',
          'https://tile3-cdn.maps.2gis.com/tiles?x={x}&y={y}&z={z}&v=1.0&ts=online_hd'
        ],
        'tileSize': 256,
        'attribution': '<a href="http://api.2gis.ru/?utm_source=copyright&amp;utm_medium=map&amp;utm_campaign=partners" target="_blank" dir="ltr">Работает на API 2ГИС</a>'
      }
    },
    'layers': [{
      'id': 'simple-tiles',
      'type': 'raster',
      'source': 'raster-tiles',
      'minzoom': 0,
      'maxzoom': 22
    }]
  },
  center: [37.63229, 55.75097],
  zoom: 10
});