JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.0-beta.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.0-beta.2/mapbox-gl.js"></script>
<div id="map-a" class="absolute top bottom left w-1/2"></div>
<div id="map-b" class="absolute top bottom right w-1/2"></div>

JavaScript

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

const a = {
  "version": 8,
  "name": "Blank",
  "center": [-69.72163945724196, 13.810991101921203],
  "zoom": 1.35,
  "bearing": 0,
  "pitch": 0,
  "sources": {},
  "sprite": "mapbox://sprites/mapbox/streets-v11",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "projection": {
    "name": "globe"
  },
  "layers": [{
    "id": "bg",
    "type": "background",
    "paint": {
      "background-color": "#0F2127"
    }
  }]
};

const b = {
  version: 8,
  "center": [-69.72163945724196, 13.810991101921203],
  "zoom": 1.35,
  sources: {
    composite: {
      url: 'mapbox://mapbox.mapbox-streets-v8',
      type: 'vector'
    }
  },
  sprite: 'mapbox://sprites/mapbox/streets-v11',
  glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
  layers: [
    {
      id: 'land',
      type: 'background',
      paint: {
        'background-color': '#FFE01A'
      }
    },
    {
      id: 'water',
      type: 'fill',
      source: 'composite',
      'source-layer': 'water',
      paint: {
        'fill-color': '#fff'
      }
    }
  ]
};

const mapA = new mapboxgl.Map({
  container: 'map-a',
  style: a
});

const mapB = new mapboxgl.Map({
  container: 'map-b',
  style: b
});

mapB.setProjection('globe');