<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",
  style: {
    version: 8,
    name: "Simple Style",
    sources: {
      gsi: {
        type: "vector",
        tiles: [
          "https://cyberjapandata.gsi.go.jp/xyz/optimal_bvmap-v1/{z}/{x}/{y}.pbf"
        ]
      }
    },
    layers: [
      {
        id: "road",
        type: "line",
        source: "gsi",
        "source-layer": "RdCL",
        paint: {
          "line-color": "#00ff00",
          "line-width": 3
        }
      }
    ]
  },
  center: [139.768435, 35.681054],
  zoom: 14,
  customAttribution: '<a href="https://github.com/gsi-cyberjapan/optimal_bvmap">国土地理院最適化ベクトルタイル</a>'
});