<div id="map"></div>
<div id="menu">
  <input id="green" type="radio" name="rtoggle" value="green" checked="checked">
  <label for="green">green</label>
  <input id="yellow" type="radio" name="rtoggle" value="yellow">
  <label for="yellow">yellow</label>
  <input id="red" type="radio" name="rtoggle" value="red">
  <label for="red">red</label>
</div>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
#menu {
  position: absolute;
  background: #efefef;
  padding: 10px;
  font-family: "Open Sans", sans-serif;
}
mapboxgl.accessToken =
  "pk.eyJ1IjoieW9jaGkiLCJhIjoiY2xmd2k3MDFzMDB5bDNlcDZjazB1dHR1cSJ9.3bsAuOobDf15EVa4LfHmsQ";

const style1 = {
  version: 8,
  name: "Style1",
  sources: {
    streets: {
      type: "vector",
      url: "mapbox://mapbox.mapbox-streets-v8"
    }
  },
  layers: [
    {
      id: "road",
      type: "line",
      source: "streets",
      "source-layer": "road",
      paint: {
        "line-color": "#00aa00",
        "line-width": 3
      }
    },
    {
      id: "here",
      type: "slot"
    },
    {
      id: "building",
      type: "fill",
      source: "streets",
      "source-layer": "building",
      paint: {
        "fill-color": ["config", "buildingColor"]
      }
    }
  ],
  schema: {
    buildingColor: {
      default: "green",
      type: "boolean",
      values: ["green", "yellow", "red"]
    }
  }
};

const style2 = {
  version: 8,
  name: "Style2",
  imports: [{ id: "streets", data: style1, url: "" }],
  sources: {
    station: {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {},
            geometry: {
              coordinates: [
                [
                  [139.76584605332192, 35.682899183708585],
                  [139.76584605332192, 35.68007482189928],
                  [139.76849644030415, 35.68007482189928],
                  [139.76849644030415, 35.682899183708585],
                  [139.76584605332192, 35.682899183708585]
                ]
              ],
              type: "Polygon"
            }
          }
        ]
      }
    }
  },
  layers: [
    {
      id: "station",
      type: "fill",
      source: "station",
      paint: {
        "fill-color": "#0000aa"
      }
    }
  ]
};

mapboxgl.accessToken =
  "pk.eyJ1IjoieW9jaGkiLCJhIjoiY2xoa2w3OGRjMGVoZTNmb2Q2ZWV3aHhhNSJ9.2-v8eEgwYIW6MjuECDt8hA";
const map = new mapboxgl.Map({
  container: "map",
  style: style2,
  center: [139.7671943811552, 35.681109379463095],
  zoom: 15
});

map.on("load", () => {
  map.addSource("square", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            coordinates: [
              [
                [139.7664053092916, 35.68236592025427],
                [139.7664053092916, 35.679284772730554],
                [139.77036873202593, 35.679284772730554],
                [139.77036873202593, 35.68236592025427],
                [139.7664053092916, 35.68236592025427]
              ]
            ],
            type: "Polygon"
          }
        }
      ]
    }
  });

  map.addLayer({
    id: "square",
    type: "fill",
    slot: "here",
    source: "square",
    paint: {
      "fill-color": "#aa0000"
    }
  });
});

map.on("click", (e) => {
  map.setConfigProperty("streets", "buildingColor", "yellow");
});

const layerList = document.getElementById("menu");
const inputs = layerList.getElementsByTagName("input");

for (const input of inputs) {
  input.onclick = (e) => {
    const color = e.target.id;
    map.setConfigProperty("streets", "buildingColor", color);
  };
}

External CSS

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

External JavaScript

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