-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
106 lines (106 loc) · 7.97 KB
/
index.html
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Unfallkarte - Stadt Flensburg</title>
<meta content="Geographische Darstellung der Unfälle in Flensburg Schleswig-Holstein" name="description">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</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">Unfallkarte 2023</h1>
<h2 class="text-xl md:text-2xl mb-2 md:mb-4">Stadtplan für Flensburg</h2>
</div>
<div id="details"></div>
<form id="form" enctype="application/x-www-form-urlencoded">
<div id="districtWrapper" class="m-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="district">Stadtteil auswählen</label>
<select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline cursor-pointer" id="district" name="district">
<option value="0">Alle Stadtteile</option>
<option value="1">Altstadt</option>
<option value="2">Neustadt</option>
<option value="3">Nordstadt</option>
<option value="4">Westliche Höhe</option>
<option value="5">Friesischer Berg</option>
<option value="6">Weiche</option>
<option value="7">Südstadt</option>
<option value="8">Sandberg</option>
<option value="9">Jürgensby</option>
<option value="10">Fruerlund</option>
<option value="11">Mürwik</option>
<option value="12">Engelsby</option>
<option value="13">Tarup</option>
</select>
</div>
<hr>
<div id="utyp1Wrapper" class="m-4"></div>
<hr>
<div id="uartWrapper" class="m-4"></div>
<hr>
<div class="m-4">
<span class="font-bold text-gray-500">Jahre</span>
</div>
<div class="m-4 flex flex-wrap">
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2016" type="checkbox">
<span class="text-sm">2016</span>
</label>
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2017" type="checkbox">
<span class="text-sm">2017</span>
</label>
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2018" type="checkbox">
<span class="text-sm">2018</span>
</label>
</div>
<div class="m-4 flex flex-wrap">
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2019" type="checkbox">
<span class="text-sm">2019</span>
</label>
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2020" type="checkbox">
<span class="text-sm">2020</span>
</label>
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2021" type="checkbox">
<span class="text-sm">2021</span>
</label>
</div>
<div class="m-4 flex flex-wrap">
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2022" type="checkbox">
<span class="text-sm">2022</span>
</label>
<label class="md:w-1/3 block text-gray-500 font-bold cursor-pointer">
<input class="mr-2 leading-tight" name="year" multiple="multiple" value="2023" type="checkbox">
<span class="text-sm">2023</span>
</label>
</div>
</form>
<div class="pb-2 px-3">
<h3 class="text-xl md:text-2xl mb-1 md:mb-3">Verkehrslenkung</h3>
<p class="font-mono mb-4 md:mb-8">Während einer kleinen Brainstorming Session ist diese interaktive webbasierte Karte mit den Daten des Bundesamtes für Kartographie und Geodäsie entstanden. Nach einigen Stunden der maschinellen Aufarbeitung und Betrachtung der Datensätze haben wir uns entschlossen, die Daten in eine Postgis Postgres Datenbank einzupflegen und zu indexieren. Unser Ziel ist es Entscheidungsträgern in Kommunen, Verwaltungen und auch privaten Unternehmen eine Datenbasierte Entscheidung anhand von Daten und Ereignissen zu treffen.</p>
<h3 class="text-xl md:text-2xl mb-1 md:mb-3">Überlegungen</h3>
<p class="font-mono mb-4 md:mb-8">Wir haben uns mit folgenden Fragestellungen auseinandergesetzt, welche Straßen oder Kreuzungen sind besonders häufig von Unfällen betroffen? An welchen Orten häufen sich Verkehrsunfälle mit Todesfolge oder Schwerstverletzen? Welche Informationen werden der Allgemeinheit über <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://overpass-turbo.eu" target="_blank">Openstreetmap</a> angeboten?</p>
<h3 class="text-xl md:text-2xl mb-1 md:mb-3">Quellcode</h3>
<p class="font-mono">Der aktuelle Entwicklungsstand kann auf <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://github.com/oklabflensburg/open-accident-map" target="_blank">GitHub</a> eingesehen werden und von jeder Kommune, Stadt oder Land kostenfrei und lizenzfrei genutzt und redeployed werden.</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>