Skip to content

Commit ee439eb

Browse files
FlixifyTVisbackformoregithubFlixifyTVisbackformoregithub
authored
Create index.html
0 parents  commit ee439eb

File tree

1 file changed

+173
-0
lines changed

1 file changed

+173
-0
lines changed

‎index.html

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Map</title>
7+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
8+
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet-measure/dist/leaflet-measure.css" />
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
11+
<style>
12+
body {
13+
margin: 0;
14+
font-family: 'Arial', sans-serif;
15+
display: flex;
16+
flex-direction: column;
17+
height: 100vh;
18+
background-color: #1e1e1e;
19+
color: #ffffff;
20+
}
21+
22+
header {
23+
background: linear-gradient(90deg, #282828, #444);
24+
padding: 20px;
25+
text-align: center;
26+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
27+
}
28+
29+
h1 {
30+
margin: 0;
31+
font-size: 2.5rem;
32+
color: #00aaff;
33+
}
34+
35+
#map {
36+
flex: 1;
37+
margin: 10px;
38+
border-radius: 10px;
39+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
40+
}
41+
42+
footer {
43+
background: #282828;
44+
padding: 15px;
45+
text-align: center;
46+
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
47+
}
48+
49+
.sidebar {
50+
position: absolute;
51+
top: 10px;
52+
left: 10px;
53+
background: rgba(255, 255, 255, 0.9);
54+
border-radius: 5px;
55+
padding: 10px;
56+
max-width: 300px;
57+
z-index: 1000;
58+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
59+
display: flex;
60+
flex-direction: column;
61+
}
62+
63+
.sidebar button {
64+
background-color: #007BFF;
65+
color: white;
66+
border: none;
67+
padding: 10px;
68+
border-radius: 5px;
69+
cursor: pointer;
70+
width: 100%;
71+
font-size: 1rem;
72+
margin-bottom: 5px;
73+
transition: background-color 0.3s;
74+
}
75+
76+
.sidebar button:hover {
77+
background-color: #0056b3;
78+
}
79+
80+
.leaflet-popup-content {
81+
text-align: center;
82+
}
83+
84+
.leaflet-control-geocoder {
85+
border: none;
86+
border-radius: 5px;
87+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
88+
}
89+
90+
.leaflet-control-attribution {
91+
display: none;
92+
}
93+
</style>
94+
</head>
95+
<body>
96+
<header>
97+
<h1>Interactive Map</h1>
98+
</header>
99+
<div id="map"></div>
100+
<footer>
101+
<p>Created by Noah Erspamer</p>
102+
</footer>
103+
<aside class="sidebar">
104+
<button id="locateBtn"><i class="fas fa-map-marker-alt"></i> Locate Me</button>
105+
<button id="clearMarkersBtn"><i class="fas fa-trash"></i> Clear Markers</button>
106+
</aside>
107+
108+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
109+
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
110+
<script src="https://unpkg.com/leaflet-measure/dist/leaflet-measure.js"></script>
111+
<script>
112+
// Initialize the map
113+
const map = L.map('map').setView([51.505, -0.09], 13);
114+
115+
// Add a tile layer
116+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
117+
maxZoom: 19,
118+
attribution: '© OpenStreetMap contributors'
119+
}).addTo(map);
120+
121+
const markers = []; // Array to store markers
122+
123+
// Search control
124+
const searchControl = L.Control.Geocoder({
125+
defaultMarkGeocode: true,
126+
}).addTo(map);
127+
128+
searchControl.on('markgeocode', function (e) {
129+
const marker = L.marker(e.geocode.center).addTo(map).bindPopup(`<b>${e.geocode.name}</b>`);
130+
markers.push(marker); // Add marker to the markers array
131+
map.setView(e.geocode.center, 13);
132+
});
133+
134+
// Measure control
135+
const measureControl = L.measureControl().addTo(map);
136+
137+
// Add click event to place markers
138+
map.on('click', function (e) {
139+
const marker = L.marker(e.latlng).addTo(map).bindPopup(`New Marker<br>Location: ${e.latlng}`).openPopup();
140+
markers.push(marker); // Store marker in the markers array
141+
});
142+
143+
// Handle geolocation functionality
144+
function onLocationFound(e) {
145+
const userMarker = L.marker(e.latlng).addTo(map)
146+
.bindPopup("You are here!").openPopup();
147+
map.setView(e.latlng, 16);
148+
markers.push(userMarker); // Add to markers array
149+
}
150+
151+
function onLocationError(e) {
152+
alert(e.message);
153+
}
154+
155+
// Locate button functionality
156+
document.getElementById('locateBtn').onclick = function () {
157+
map.locate({ setView: true, maxZoom: 16 });
158+
};
159+
160+
// Clear markers button functionality
161+
document.getElementById('clearMarkersBtn').onclick = function () {
162+
markers.forEach(marker => {
163+
map.removeLayer(marker); // Remove each marker from the map
164+
});
165+
markers.length = 0; // Clear the markers array
166+
};
167+
168+
// Listen for location found and error events
169+
map.on('locationfound', onLocationFound);
170+
map.on('locationerror', onLocationError);
171+
</script>
172+
</body>
173+
</html>

0 commit comments

Comments
 (0)