JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">
<style>
  body {
    margin: 0;
    padding: 0;
  }

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

</style>
<div id="map"></div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

const style = {
    "version": 8,
    "name": "Test",
    "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": "hsl(35, 32%, 91%)"
            }
        },
        {
            "id": "water",
            "type": "fill",
            "source": "composite",
            "source-layer": "water",
            "paint": {
                "fill-color": "hsl(196, 80%, 70%)",
                "fill-pattern": [
                  "match",
                  ["get", "landuse"],
                  ["military"],
                  "bakery-11",
                  "american-football-11"
                ]
            }
        }
    ]
}

new mapboxgl.Map({
	container: 'map',
	style: style,
	center: [0, 0],
	zoom: 3
});