Mapbox GL JS - Simple Map

[Gist] https://gist.github.com/Hirosaji/b5345387ac5bf0eb5df64f400be3a1fb

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    #mapid { height: 700px; }
  </style>
</head>

// set bounds to Japan, Japan
      var bounds = [
        [100.0, 15],    // Southwest coordinates
        [175.0, 52]     // Northeast coordinates
      ];

// load data
      var p1 = d3.json("japan_ver81.geojson");

Promise.all([p1]).then(function (dataList) {

// set mapbox object
        mapboxgl.accessToken = "pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2szOWlqZWNzMDJueTNjcWhyNjhqdXBnOSJ9._6mJT202QqpnMuK-jvMr3g";
        var map = new mapboxgl.Map({
          container: "mapid",
          style: "mapbox://styles/hirosaji/ck489nuw400wb1cnsbshpaah5",  // 2 values
          center: [136.5, 38.5],
          minZoom: (isSp) ? 3.5 : 4.5,
          maxZoom: 9.5,
          zoom: (isSp) ? 3.5 : 4.5,
          maxBounds: bounds,
        });

// set data
        var cityData = dataList[0];

// fix data
        cityData.features.forEach(function (feature) {
          var placeName = (feature.properties.SIKUCHOSON) ? feature.properties.SIKUCHOSON : feature.properties.SEIREI;
          if (feature.properties.KEN === "福岡県" && placeName === "那珂川町") {
            feature.properties.SIKUCHOSON = "那珂川市";
            feature.properties.JCODE = "40231";
          }
        });

map.on("load", function () {
          // draw layer
          map.addSource("city", {
            "type": "geojson",
            "data": cityData,
          });
          map.addLayer({
            "id": "cityFill",
            "type": "fill",
            "source": "city",
            "paint": {
              "fill-color": "#ffffff",
              "fill-opacity": 1,
            }
          });
          map.addLayer({
            "id": "cityLine",
            "type": "line",
            "source": "city",
            "paint": {
              "line-color": "rgba(200, 200, 200, 1)",
              "line-opacity": 0.5,
              "line-width": 0.5,
            }
          });
        });
      });
  </script>
</body>

https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js

https://d3js.org/d3.v5.min.js