-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (111 loc) · 5.91 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="A map to show the locations of leisure parks within and around Salzburg City">
<meta name="author" content="Rufai Omowunmi Balogun">
<link rel="icon" href="./favicon.icon">
<title>Leisure Parks in Salzburg City</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="css/style.css">
<!-- Add Modernizer in HEAD before other JavaScript -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="data/parks_.js"></script>
<script type="text/javascript" src="js/city_boundary.js"></script>
<!--Marker Cluster Grouping-->
<script type="text/javascript" src="markercluster/dist/leaflet.markercluster.js"></script>
<script type="text/javascript" src="markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="markercluster/dist/MarkerCluster.css">
</head>
<body>
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!--<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a href="#" class="navbar-brand">Leisure Parks within and around Salzburg City</a>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about" data-toggle="modal" data-target="#aboutModal">About</a></li>
<li><a href="#contact" data-toggle="modal" data-target="#contactModal">Contact</a></li>
</ul><!-- end nav -->
</nav><!-- end nav collapse -->
</div>
</div>
</header>
<!-- Main Map -->
<div class="container" id="main">
<div id="map">
</div>
</div> <!-- end main container -->
<!-- About Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="modal-close "aria-hidden="true">×</span></button>
<h3 class="modal-title" id="aboutModalLabel">About Map</h3>
</div>
<div class="modal-body">
<p>Welcome to the Informational Map of <a href="https://ruphai.github.io/webcarto/">Leisure Parks within and around Salzburg City</a>.
This map is built to provide basic information on the location of leisure parks within
and around the city of Salzburg for those considering recreational activities after
the COVID-19 induced lockdown.
</p>
<p>Zoom into your areas of Interest and check for information about the available parks you might want to visit</p>
<p>The map implements the Mouse-over effects, Get Lattitude of
Clickable Areas and shows basic information about the parks with the use of Popups</p>
</div>
</div> <!-- /.modal-header -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<!-- Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span "aria-hidden="true">×</span></button>
<h3 class="modal-title" id="contactModalLabel">Contact Me</h3>
</div>
<div class="modal-body">
<p>Rufai Omowunmi Balogun</p>
<p>Graduate Student, Copernicus Master in Digital Earth</p>
<p>[email protected]</p>
<p> <a href="https://github.com/Ruphai">Github</a></p>
</div>
</div> <!-- /.modal-header -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Leaflet JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<!-- Stamen JavaScript for Stamen tiles -->
<script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<!--ESRI Tiles -->
<script src="https://cdn.jsdelivr.net/leaflet.esri/1.0.0-rc.8/builds/basemaps/esri-leaflet-basemaps.js"></script>
<!-- Local JavaScript files -- data and main JS-->
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="data/parks_.js"></script>
<script type="text/javascript" src="js/city_boundary.js"></script>
</body>
</html>