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

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

const map = new atlas.Map("map", {
  center: [13.3741708, 52.5253397],
  zoom: 16,

  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: "JT_y66nzr4xRmDNwtrvbCeB8R3Q2Y2pCXEp7u0DZsKo"
  }
});

map.events.add("ready", () => {
  const datasource = new atlas.source.DataSource();
  datasource.add({
    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"
        }
      }
    ]
  });
  map.sources.add(datasource);

  const layer = new atlas.layer.PolygonLayer(
    datasource,
    'polygon_layer',
    {
      fillColor: '#000088',
      fillOpacity: 1,
    });
  map.layers.add(layer, 'buildings');
});