-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (80 loc) · 5.75 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta property="og:image" content="https://tomekmatuszek.github.io/zielony-poznan/img/info.png" />
<title>Interaktywna Mapa Terenów Zielonych i Obszarów Chronionych w Poznaniu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="fontello/css/fontello.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="wektory/poznan.geojson" type="text/javascript"></script>
<script src="wektory/poznan_admin.geojson" type="text/javascript"></script>
<script src="wektory/poz_tereny-zielone.geojson" type="text/javascript"></script>
<script src="wektory/pomniki_przyrody.geojson" type="text/javascript"></script>
<script src="wektory/rezerwaty.geojson" type="text/javascript"></script>
<script src="wektory/natura2000.geojson" type="text/javascript"></script>
<script src="wektory/obszary_chkrajobrazu.geojson" type="text/javascript"></script>
<script src="wektory/uzytki_ekologiczne.geojson" type="text/javascript"></script>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="lib/Control.OSMGeocoder.js"></script>
<link rel="stylesheet" href="lib/Control.OSMGeocoder.css" />
</head>
<body>
<div id="container">
<div id="menu">
<div class="menu_side">
<a href="https://github.com/TomekMatuszek/zielony-poznan" target="_blank"><button class="menu_przycisk"><i class="icon-github-circled"></i></button></a>
<span class="tooltiptext">GitHub Repo</span>
</div>
<div class="menu_side">
<a href="https://www.facebook.com/tomekmapuje" target="_blank"><button class="menu_przycisk"><img src="img/TomGeo3.png" style="height:2.2vw;margin-top:0.1vw;"></button></a>
<span class="tooltiptext">Mój fanpage</span>
</div>
<div id="title">Interaktywna Mapa Terenów Zielonych i Obszarów Chronionych w Poznaniu</div>
<div class="menu_side"></div>
<div class="menu_side">
<button class="menu_przycisk" id="about_button"><img src="img/info.png" style="height:2.2vw"></button>
<span class="tooltiptextR">O mapie</span>
</div>
</div>
<div id="mapid"></div>
<div id="about">
<div id="shadow"></div>
<div id="about_content">
<div id="cofnij"><button class="krzyżyk" id="krzyżyk"><img src="img/cross.png" style="height:20px;width:20px;"></button></div>
<div id="tekst">
<p style="font-size:2vw;font-style:italic;font-weight:bold;text-align:center;margin:5px 0px 0px 0px;">O mapie</p>
<span style="font-size:0.9vw;text-align:justify;"><p>
Ta mapa interaktywna powstała jako projekt zaliczeniowy na przedmiot Kartografia Internetowa.
Została stworzona przez Tomasza Matuszka - studenta III roku geoinformacji na Wydziale Nauk Geograficznych i Geologicznych UAM. <br>
Użytkownik może przeglądnąć warstwy takie jak:
<ul>
<li>granica miasta Poznania, źródło: GUGiK</li>
<li>granice osiedli (jednostek pomocniczych m. Poznania), źródło: System Informacji Przestrzennej Poznania</li>
<li>tereny zielone w Poznaniu, źródło: SIP Poznania</li>
<li>formy ochrony przyrody w Poznaniu, źródło: GDOŚ</li>
<li>Mapa wysokości drzew w Poznaniu, źródło: SIP Poznania (WMS)</li>
</ul>
</p>
<p>
Po kliknięciu na wybrany teren zielony lub formę ochrony przyrody wyświetlą się podstawowe informacje na ich temat, takie jak nazwa i typ.
Po najechaniu kursorem na jedno z osiedli oraz włączeniu oknienka z informacjami przy pomocy przycisku pod wyborem warstw,
w prawym dolnym rogu ekranu będzie można przejrzeć statystyki dotyczące wybranego osiedla - liczbę mieszkańców, gęstość zaludnienia,
a także procent terytorium pokryty warstwą terenów zielonych (analiza wykonana przy pomocy programu QGIS).<br>
Oprócz warstw wektorowych, dostępne są również dwie mapy podkładowe: OpenStreetMap oraz przygotowany przeze mnie przy pomocy Mapbox Studio podkład ze zdjęć satelitarnych.
</p></span>
</div>
</div>
</div>
<div id="dane">Najedź kursorem na osiedle aby zobaczyć dane na jego temat</div>
<div id="info_przycisk"><button id="info_img"><img src="img/description.png" style="width:30px;height:30px"></button></div>
</div>
<script src="script.js"></script>
</body>
</html>