Skip to content

Commit 8978438

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #880 from PRIYANSHUKUMAR123451/patch-1
Create Hospital_Tracker
2 parents 140160d + 5699ae1 commit 8978438

File tree

1 file changed

+159
-0
lines changed

1 file changed

+159
-0
lines changed

‎Hospital_Tracker‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Live Location with Nearest Hospital and Route</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<!-- Leaflet CSS -->
8+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
9+
<!-- Leaflet JavaScript -->
10+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
11+
<style>
12+
#map {
13+
height: 800px;
14+
width: 100%;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<h2>Live Location with Nearest Hospital and Route on Leaflet Map</h2>
20+
<div id="map"></div>
21+
<script>
22+
// Initialize the map
23+
var map = L.map('map').setView([0, 0], 15);
24+
25+
// Add OpenStreetMap tile layer
26+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
27+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
28+
}).addTo(map);
29+
30+
var userMarker; // To store the user's location marker
31+
var hospitalMarkers = []; // To store all hospital markers
32+
var previousMarker; // To store the previously clicked hospital marker
33+
var routeLayer; // To store the route polyline
34+
35+
// Custom icons for hospitals
36+
var defaultHospitalIcon = L.icon({
37+
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
38+
iconSize: [25, 41], // Default size
39+
iconAnchor: [12, 41]
40+
});
41+
//https://unpkg.com/[email protected]/dist/images/marker-icon.png
42+
var enlargedHospitalIcon = L.icon({
43+
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
44+
iconSize: [35, 55], // Enlarged size
45+
iconAnchor: [17, 55]
46+
});
47+
48+
// Function to get the user's current location
49+
function updateLocation() {
50+
if (navigator.geolocation) {
51+
navigator.geolocation.getCurrentPosition(function(position) {
52+
var lat = position.coords.latitude;
53+
var lon = position.coords.longitude;
54+
55+
// Set the map view to the current location
56+
map.setView([lat, lon], 13);
57+
58+
// Add or update the user's location marker
59+
if (userMarker) {
60+
userMarker.setLatLng([lat, lon]);
61+
} else {
62+
userMarker = L.marker([lat, lon]).addTo(map);
63+
userMarker.bindPopup("You are here!").openPopup();
64+
}
65+
66+
// Find the nearest hospital
67+
findNearestHospital(lat, lon);
68+
});
69+
} else {
70+
alert("Geolocation is not supported by this browser.");
71+
}
72+
}
73+
74+
// Function to find the nearest hospital using Overpass API
75+
function findNearestHospital(lat, lon) {
76+
var query = `
77+
[out:json];
78+
node(around:5000, ${lat}, ${lon})["amenity"="hospital"];
79+
out body;
80+
`;
81+
var url = 'https://overpass-api.de/api/interpreter?data=' + encodeURIComponent(query);
82+
83+
fetch(url)
84+
.then(response => response.json())
85+
.then(data => {
86+
if (data.elements && data.elements.length > 0) {
87+
// Clear previous hospital markers
88+
hospitalMarkers.forEach(marker => map.removeLayer(marker));
89+
hospitalMarkers = [];
90+
91+
data.elements.forEach(hospital => {
92+
var hospitalLat = hospital.lat;
93+
var hospitalLon = hospital.lon;
94+
var hospitalName = hospital.tags.name || "Unnamed Hospital";
95+
96+
// Add a marker for the hospital
97+
var hospitalMarker = L.marker([hospitalLat, hospitalLon], { icon: defaultHospitalIcon }).addTo(map);
98+
hospitalMarker.bindPopup(hospitalName);
99+
100+
// Add click event to enlarge icon and draw route
101+
hospitalMarker.on('click', function() {
102+
// Reset the previous marker's icon size
103+
if (previousMarker) {
104+
previousMarker.setIcon(defaultHospitalIcon);
105+
}
106+
107+
// Set the new marker's icon to enlarged
108+
this.setIcon(enlargedHospitalIcon);
109+
previousMarker = this;
110+
111+
// Draw the route to the hospital
112+
drawRoute(lat, lon, hospitalLat, hospitalLon);
113+
});
114+
115+
// Store the hospital marker
116+
hospitalMarkers.push(hospitalMarker);
117+
});
118+
} else {
119+
alert('No hospitals found nearby.');
120+
}
121+
})
122+
.catch(error => {
123+
console.error('Error fetching hospital data:', error);
124+
});
125+
}
126+
127+
// Function to draw a route using OpenRouteService
128+
function drawRoute(startLat, startLon, endLat, endLon) {
129+
// Clear previous route
130+
if (routeLayer) {
131+
map.removeLayer(routeLayer);
132+
}
133+
134+
var apiKey = 'api key';
135+
var url = `api url`;
136+
137+
fetch(url)
138+
.then(response => response.json())
139+
.then(data => {
140+
var coordinates = data.features[0].geometry.coordinates;
141+
var latlngs = coordinates.map(coord => [coord[1], coord[0]]);
142+
143+
// Draw polyline for the route
144+
routeLayer = L.polyline(latlngs, { color: 'blue', weight: 5 }).addTo(map);
145+
map.fitBounds(routeLayer.getBounds());
146+
})
147+
.catch(error => {
148+
console.error('Error fetching route data:', error);
149+
});
150+
}
151+
152+
// Update location on page load
153+
updateLocation();
154+
155+
// Optionally, update the location at intervals (e.g., every 10 seconds)
156+
setInterval(updateLocation, 100000); // 10000 ms = 10 seconds
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)