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

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

mapboxgl.accessToken =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";

const map = new mapboxgl.Map({
  container: "map", // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: "mapbox://styles/mapbox/streets-v12", // style URL
  center: [30.0222, -1.9596], // starting position [lng, lat]
  zoom: 7 // starting zoom
});

map.on("load", () => {
  map.addSource("rwanda-provinces", {
    type: "geojson",
    data: "https://docs.mapbox.com/mapbox-gl-js/assets/rwanda-provinces.geojson"
  });
  map.addLayer(
    {
      id: "rwanda-provinces",
      type: "fill",
      source: "rwanda-provinces",
      layout: {},
      paint: {
        "fill-color": [
          "let",
          "density",
          ["/", ["get", "population"], ["get", "sq-km"]],
          [
            "interpolate",
            ["linear"],
            ["zoom"],
            8,
            [
              "interpolate",
              ["linear"],
              ["var", "density"],
              274,
              ["to-color", "#f5e5f3"],
              1551,
              ["to-color", "#8d00ac"]
            ],
            10,
            [
              "interpolate",
              ["linear"],
              ["var", "density"],
              274,
              ["to-color", "#eff3ff"],
              1551,
              ["to-color", "#08519c"]
            ]
          ]
        ],
        "fill-opacity": 0.7
      }
    },
    "road-label" // Place polygons under labels
  );
});