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

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

const platform = new H.service.Platform({
  apikey: "VF3dECM64igOgk6k73EuS1pimnH_fZfGcC4Dh650gvQ"
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
  document.getElementById("map"),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 52.5253397, lng: 13.3741708 },
    zoom: 16
  }
);

const reader = new H.data.geojson.Reader(getUrl(), {
  style: (obj) => {
    obj.setStyle({
      fillColor: "rgba(0, 0, 128, 1.0)"
    });
  }
});
reader.parse();
map.addLayer(reader.getLayer());

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

function getUrl() {
  const jsonString = JSON.stringify({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {},
        geometry: {
          coordinates: [
            [
              [13.36734443824733, 52.52632030796306],
              [13.36734443824733, 52.52199517379691],
              [13.374232158425343, 52.52199517379691],
              [13.374232158425343, 52.52632030796306],
              [13.36734443824733, 52.52632030796306]
            ]
          ],
          type: "Polygon"
        }
      }
    ]
  });

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