<div id="map" style="height: 400px;">

</div>

<script>
    let map = L.map('map').setView([47.689749, 9.187857], 16);
    L.tileLayer('https://sgx.geodatenzentrum.de/wmts_basemapde/tile/1.0.0/de_basemapde_web_raster_grau/default/GLOBAL_WEBMERCATOR/{z}/{y}/{x}.png', {
      minZoom: 0,
      maxZoom: 20,
      attribution: 'Map data: &copy; <a href="http://www.govdata.de/dl-de/by-2-0">dl-de/by-2-0</a>',
      ext: 'png'
    }).addTo(map);

    let geojson = await fetch('/geojson/freiraum/uni_konstanz.geojson', {
      method: 'GET',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => res.json());
    
    let geoLayer = L.geoJson(geojson, {
      style:  { fillColor: 'rgba(18, 174, 225, .2)', fillOpacity: 1, stroke: true, color: 'rgba(18, 174, 225, .6)' },
    }).addTo(map);
</script>
