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

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

import config from "https://js.arcgis.com/4.26/@arcgis/core/config.js";
import Map from "https://js.arcgis.com/4.26/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/4.26/@arcgis/core/views/MapView.js";
import VectorTileLayer from "https://js.arcgis.com/4.26/@arcgis/core/layers/VectorTileLayer.js";
import Basemap from "https://js.arcgis.com/4.26/@arcgis/core/Basemap.js";
import GeoJSONLayer from "https://js.arcgis.com/4.26/@arcgis/core/layers/GeoJSONLayer.js";

config.apiKey =
  "AAPK589f90fbc76c405a9dd882bcc9477ad7gxIaiKbsjK0xihd5_e5hzw2sG0pK48VVFiB4PbHMmelgU-UtZhxKvhFgoN-sQLvY";

const vectorTileLayer = new VectorTileLayer({
  portalItem: {
    id: "6d9a3c4768bc4090931e9ed3d94fd385"
  }
});

const vectorTileLayerRef = new VectorTileLayer({
  portalItem: {
    id: "ea59b79df5a24e4ebad9bb6db828a623"
  }
});

const basemap = new Basemap({
  baseLayers: [vectorTileLayer],
  referenceLayers: [vectorTileLayerRef]
});

const geojsonLayer = new GeoJSONLayer({
  url: getUrl(),
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-fill",
      color: "#000088"
    }
  }
});

const map = new Map({
  basemap,
  layers: [geojsonLayer]
});

const view = new MapView({
  container: "map",
  map: map,
  zoom: 16,
  center: [139.7586677640881, 35.67369269880291]
});

function getUrl() {
  const jsonString = JSON.stringify({
    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"
        }
      }
    ]
  });

  const blob = new Blob([jsonString], { type: "application/json" });
  return URL.createObjectURL(blob);
}