-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (119 loc) · 6.2 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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halifax Bike Parking | Bike Rack</title>
<meta name="description"
content="Find bike parking spots across Halifax with our comprehensive Halifax Bike Parking Locator. Explore bike racks, parking spots, and secure locations for your bicycle.">
<meta name="keywords"
content="Bike Parking Halifax, Halifax Bike Parking Locator, Bike Rack, Bicycle Parking Halifax, Halifax Bike Racks, Halifax Cycling, Bike Storage Halifax, Public Bike Parking Halifax">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
<nav>
<div class="nav-container">
<!-- <a href="#" class="brand">Bike Parking Locator</a> -->
<button class="nav-toggle" id="navToggle">☰</button>
<ul class="nav-links" id="navLinks">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#search" class="nav-link">User Guide</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
<li><a href="#add-parking" class="nav-link" style="display: none;">Add Parking</a></li>
</ul>
</div>
</nav>
<section id="home" class="section active">
<div id="map" class="map-container"></div>
</section>
<section id="search" class="section">
<h2>Bike Parking | Rack in Halifax Guide:</h2>
<ol class="guide-list">
<li><strong>View the Map:</strong> On the map displayed on our website, you will see various bike parking
locations marked with labels or icons.</li>
<li><strong>Click on a Marker:</strong> To find more details about a specific bike parking spot, simply
click on one of the markers or labels on the map. Each marker represents a bike parking location.</li>
<li><strong>View Location Details:</strong> A popup will appear showing the exact location coordinates of
the selected parking spot. This popup provides precise information about where the parking is situated.
</li>
<li><strong>Get Directions:</strong> To navigate to the parking spot using Google Maps, copy the coordinates
displayed in the popup. Open <a href="https://www.google.com/maps" target="_blank">Google Maps</a>,
paste the coordinates into the search bar, and press Enter. Google Maps will then direct you to the
parking location.</li>
<li><strong>Additional Information:</strong> If you need further assistance or have any questions about bike
parking spots, feel free to contact us through the Contact section of our site.</li>
</ol>
</section>
<!--*********************************************-->
<!--This section is ignored for now -->
<section id="add-parking" class="section">
<h2>Add Parking</h2>
<form id="parkingForm">
<label for="locationUrl">Enter Parking Location URL or Coordinates:</label>
<input type="text" id="locationUrl" name="locationUrl" placeholder="ex: 44.64, -63.60" required>
<button type="submit">Submit</button>
</form>
<ul id="locationList" style="display: none;"></ul> <!-- The list is initially hidden -->
<!-- Empty for now -->
</section>
<!--*********************************************-->
<section id="contact" class="section">
<h2>Contact Info</h2>
<form name="contact" method="POST" netlify>
<p>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"
placeholder="Feel free to reach out with any inquiries, requests to verify or add parking locations, or other questions!"
required></textarea>
</p>
<button type="submit">Send</button>
</form>
</section>
<script>
// Initialize the Leaflet map
var map = L.map('map').setView([44.648, -63.60], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
fetch('hfxOSM.geojson')
.then(response => response.json())
.then(data => {
data.features.forEach(feature => {
var coords = feature.geometry.coordinates;
L.marker([coords[1], coords[0]]).on("click", onMapClick).addTo(map);
});
})
.catch(error => console.error('Error fetching GeoJSON data:', error));
// Toggle navbar visibility
document.getElementById('navToggle').addEventListener('click', function () {
document.getElementById('navLinks').classList.toggle('active');
});
// Locate the user's current position
map.locate({
setView: true,
maxZoom: 16,
enableHighAccuracy: true,
}).on("locationfound", function (e) {
// Add a circle to show the accuracy range
var accuracy = e.accuracy; // In meters
//readius 500 here is 500m so you can change it for whatever you need the location circled
L.circle([e.latitude, e.longitude], { radius: 500 }).addTo(map);
}).on("locationerror", function () {
alert("Unable to retrieve your location.");
});
//This function will handle the click on marker event, we will popoup a small box contains
function onMapClick(e) {
L.popup()
.setLatLng(e.latlng)
.setContent("Location Coordinates:<br>" + e.latlng)
.openOn(map);
}
</script>
<script src="parkings.js"></script>
</body>
</html>