<div id="map"></div>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
mapboxgl.accessToken =
  "pk.eyJ1IjoieW9jaGkiLCJhIjoiY2xmd2k3MDFzMDB5bDNlcDZjazB1dHR1cSJ9.3bsAuOobDf15EVa4LfHmsQ";

const map = new mapboxgl.Map({
  container: "map",
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: "mapbox://styles/mapbox/light-v11",
  zoom: 12,
  center: [-122.4473, 37.7535]
});

map.on("load", () => {
  // Add the vector tileset as a source.
  map.addSource("ethnicity", {
    type: "vector",
    url: "mapbox://examples.8fgz4egr"
  });
  map.addLayer(
    {
      id: "population",
      type: "circle",
      source: "ethnicity",
      "source-layer": "sf2010",
      paint: {
        // Make circles larger as the user zooms from z12 to z22.
        "circle-radius": {
          base: 1.75,
          stops: [
            [12, 2],
            [22, 180]
          ]
        },
        // Color circles by ethnicity, using a `match` expression.
        "circle-color": [
          "match",
          ["get", "ethnicity"],
          "White",
          "#fbb03b",
          "Black",
          "#223b53",
          "Hispanic",
          "#e55e5e",
          "Asian",
          "#3bb2d0",
          /* other */ "#ccc"
        ]
      }
    },
    // Place polygons under labels, roads and buildings.
    "aeroway-polygon"
  );
});

External CSS

  1. https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css

External JavaScript

  1. https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js