open-surface-map/index.html at main · oklabflensburg/open-surface-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Bodenfläche nach Art der Nutzung in Deutschland</title>
    <meta content="Flächenstatistik 2019 der Bodenflächen nach Art der Nutzung in Deutschland" name="description">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet">
    <link href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="main.css" rel="stylesheet">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
</head>
<body>
    <div class="h-screen overflow-auto bg-gray-300">
        <div class="md:flex">
            <div class="w-full sm:w-8/12 md:w-7/12 lg:w-9/12 h-96 overflow-hidden" id="map"></div>
            <div class="w-full sm:w-4/12 md:w-5/12 lg:w-3/12 sm:overflow-scroll bg-gray-100" id="filter">
                <div class="py-2 px-3">
                    <h1 class="text-2xl md:text-3xl font-bold">Flächenstatistik 2019</h1>
                    <h2 class="text-xl md:text-2xl mb-2 md:mb-4">Bodenfläche nach Art der Nutzung</h2>
                </div>
                <div class="bg-green-300" id="details"></div>
                <div class="pb-2 px-3">
                    <h3 class="text-xl md:text-2xl mb-1 md:mb-3">Datenquelle</h3>
                    <p class="font-mono mb-4 md:mb-8">Die Daten Flächenstatistik der Bodenfläche nach Art der tatsächlichen Nutzung 2019 werden über die Statistischen Ämter des Bundes unter folgendem Link zum <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://service.destatis.de/DE/karten/flaechenatlas2019daten.xlsx" target="_blank">Download</a> angeboten. Die Daten der Verwaltungsgebiete (VG5000) vom Bundesamt für Kartographie und Geodäsie (BKG) werden unter folgendem Link zum <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://daten.gdz.bkg.bund.de/produkte/vg/vg5000_1231/2019/vg5000_12-31.utm32s.shape.kompakt.zip" target="_blank">Download</a></p>
                    <h3 class="text-xl md:text-2xl mb-1 md:mb-3">Haftungsausschluss</h3>
                    <p class="font-mono mb-4 md:mb-8">Das OK Lab Flensburg hostet die zum Download bereitgestellten Daten der Statistischen Ämter des Bundes und verknüpft diese mit Daten über den Amtlichen Gemeinde Schlüssel mit dem Datensatz der Verwaltungsgebiete (VG5000) vom Bundesamt für Kartographie und Geodäsie (BKG) ohne inhaltliche Änderung als Feature Service auf dieser Webseite und stellt diese auf der Karte für Analysen zur Verfügung. Alle Daten werden ungeprüft und ohne Gewähr auf deren Genauigkeit zur Verfügung gestellt. Das OK Lab Flensburg übernimmt hierfür keinerlei Haftung und Gewähr.</p>
                    <h3 class="text-xl md:text-2xl mb-1 md:mb-3">Interaktive Karte</h3>
                    <p class="font-mono mb-4 md:mb-8">Diese interaktive Karte zeigt die Verteilung der verschiedenen Flächennutzungsarten beim klick auf die entsprechende Gemeinde an. So lässt sich in Kürze herausfinden in welchen Regionen der Waldflächenanteil besonders hoch ist. Dies ist ein erster Prototyp, welcher mit mehr Filter Möglichkeiten ausgebaut werden soll. Zudem wollen wir auch die Daten der Kreisfreien Städte und Stadtstaaten mit aufnehmen.</p>
                    <h3 class="text-xl md:text-2xl mb-1 md:mb-3">Quellcode</h3>
                    <p class="font-mono"><a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://github.com/oklabflensburg/open-surface-map" target="_blank">GitHub</a></p>
                </div>
            </div>
        </div>
        <footer class="flex justify-center items-center h-[6vh] md:h-[4vh] text-sm">
            <a class="inline-block text-gray-600 hover:text-gray-900 focus:text-gray-900" href="impressum.html">Impressum</a> <span class="inline-block text-gray-600 px-3">|</span> <a class="inline-block text-gray-600 hover:text-gray-900 focus:text-gray-900" href="impressum.html#privacypolicy">Datenschutzerklärung</a> <span class="inline-block text-gray-600 px-3">|</span> <a class="inline-block text-gray-600 hover:text-gray-900 focus:text-gray-900" href="lizenz.html">Lizenz</a>
        </footer>
    </div>
    <script src="main.js"></script>
</body>
</html>