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

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

maptilersdk.config.apiKey = "E1Kr8md4Q6CeWrPeQLgB";

const map = new maptilersdk.Map({
  container: "map",
  style: maptilersdk.MapStyle.STREETS,
  center: [139.7586677640881, 35.67369269880291],
  zoom: 16
});

map.on("load", () => {
  map.addSource("geojson_source", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            coordinates: [
              [
                [139.75715452555397, 35.67501088740674],
                [139.75715452555397, 35.672275911172164],
                [139.7609465361483, 35.672275911172164],
                [139.7609465361483, 35.67501088740674],
                [139.75715452555397, 35.67501088740674]
              ]
            ],
            type: "Polygon"
          }
        }
      ]
    }
  });

  map.addLayer(
    {
      id: "polygon_layer",
      type: "fill",
      source: "geojson_source",
      paint: {
        "fill-color": "#000088"
      }
    },
    "building"
  );
});