JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css">
<div id="map">
</div>

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

const map = new mapboxgl.Map({
  container: 'map',
  style: {
    'version': 8,
    'sources': {
      'dem': {
        'type': 'raster',
        'maxzoom': 14,
        'minzoom': 0,
        'tileSize': 256,
        'tiles': [
          'https://a.tiles.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.png',
          'https://b.tiles.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.png'
        ]
      }
    },
    'layers': [{
      'id': 'dem',
      'type': 'raster',
      'source': 'dem',
      'minzoom': 0,
      'maxzoom': 22
    }]
  }
});