{% extends 'base.html' %}

{% block head %}
<link rel="stylesheet" href="/static/leaflet-1.6.0/leaflet.css">
{% endblock %}

{% block header %}
<h1 class="display-1">Wetter</h1>
{% endblock %}

{% block content %}
<section>
  <div class="card ">
    <div class="embed-responsive embed-responsive-16by9">
      <div class="clickoverlay embed-responsive-item">
        <p class="text-center">Klicken um die Karte freizuschalten</p>
      </div>
      <div id="mapid" class="embed-responsive-item"></div>
    </div>
  </div>
</section>
<section>
  <p>Der Deutsche Wetterdienst betreibt hunderte Wetter-Messstationen in ganz Deutschland. Diese Daten werden regelmäßig frei für alle zugänglich als OpenData veröffentlicht. Hier werden diese Daten importiert, aufbereitet und visualisiert. Außerdem besteht die Möglichkeit diese in anderen Formaten zu exportieren.</p>
</section>
<section>
  <a href="/station/" class="btn btn-outline-primary btn-block">Liste aller Stationen</a>
</section>
{% endblock %}

{% block foot %}
<script src="/static/leaflet-1.6.0/leaflet.js"></script>
<script>
  var mymap = L.map('mapid').setView([52, 10], 6);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(mymap);
</script>
<script src="/dyn/stations.js"></script>
{% endblock %}