Created
October 22, 2024 06:23
-
-
Save gterrill/01b6bd2cdf2faecd6f0ce78e0540c5b5 to your computer and use it in GitHub Desktop.
Boat Moving Map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Boat Tracking Map</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" /> | |
<style> | |
body, html { | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
width: 100%; | |
} | |
#map { | |
height: 100vh; | |
width: 100%; | |
} | |
.info-panel { | |
position: absolute; | |
top: 10px; | |
right: 10px; | |
background: white; | |
padding: 10px; | |
border-radius: 4px; | |
box-shadow: 0 0 10px rgba(0,0,0,0.2); | |
z-index: 1000; | |
max-height: 300px; | |
overflow-y: auto; | |
} | |
.poi-list { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.poi-item { | |
margin: 5px 0; | |
padding: 5px; | |
border-bottom: 1px solid #eee; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<div class="info-panel"> | |
<h3>Nearby Points of Interest</h3> | |
<div id="poi-list" class="poi-list"></div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> | |
<script> | |
// Initialize map centered at a default position | |
const map = L.map('map').setView([25.7617, -80.1918], 13); // Miami as default | |
// Add OpenStreetMap tiles | |
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
attribution: '© OpenStreetMap contributors' | |
}).addTo(map); | |
// Custom boat icon | |
const boatIcon = L.divIcon({ | |
html: '⛵', | |
className: 'boat-icon', | |
iconSize: [20, 20], | |
iconAnchor: [10, 10] | |
}); | |
// Initialize boat marker | |
let boatMarker = L.marker([25.7617, -80.1918], {icon: boatIcon}).addTo(map); | |
// Array to store route coordinates | |
let routeCoordinates = []; | |
let routeLine; | |
// Sample POIs (in real application, these would come from an API) | |
const pointsOfInterest = [ | |
{ name: "Marina", coords: [25.7700, -80.1850], type: "dock" }, | |
{ name: "Fuel Station", coords: [25.7550, -80.1900], type: "fuel" }, | |
{ name: "Restaurant", coords: [25.7650, -80.1970], type: "food" }, | |
{ name: "Beach", coords: [25.7680, -80.1850], type: "beach" } | |
]; | |
// Add POI markers | |
const poiMarkers = pointsOfInterest.map(poi => { | |
return L.marker(poi.coords) | |
.bindPopup(`<b>${poi.name}</b><br>Type: ${poi.type}`) | |
.addTo(map); | |
}); | |
// Function to update boat position | |
function updateBoatPosition(position) { | |
const newLatLng = [position.coords.latitude, position.coords.longitude]; | |
// Update boat marker position | |
boatMarker.setLatLng(newLatLng); | |
// Center map on boat | |
map.setView(newLatLng); | |
// Add coordinate to route | |
routeCoordinates.push(newLatLng); | |
// Update route line | |
if (routeLine) { | |
map.removeLayer(routeLine); | |
} | |
routeLine = L.polyline(routeCoordinates, {color: 'blue'}).addTo(map); | |
// Update POI distances | |
updatePOIDistances(newLatLng); | |
} | |
// Function to calculate distance between two points | |
function calculateDistance(point1, point2) { | |
return map.distance(point1, point2); | |
} | |
// Function to update POI distances | |
function updatePOIDistances(boatPosition) { | |
const poiListElement = document.getElementById('poi-list'); | |
poiListElement.innerHTML = ''; | |
pointsOfInterest | |
.map(poi => ({ | |
...poi, | |
distance: calculateDistance(boatPosition, poi.coords) | |
})) | |
.sort((a, b) => a.distance - b.distance) | |
.forEach(poi => { | |
const listItem = document.createElement('div'); | |
listItem.className = 'poi-item'; | |
listItem.innerHTML = ` | |
<strong>${poi.name}</strong><br> | |
Distance: ${(poi.distance / 1000).toFixed(1)} km | |
`; | |
poiListElement.appendChild(listItem); | |
}); | |
} | |
// Simulate boat movement (in real application, this would use real GPS data) | |
let simulatedLat = 25.7617; | |
let simulatedLng = -80.1918; | |
setInterval(() => { | |
simulatedLat += (Math.random() - 0.5) * 0.001; | |
simulatedLng += (Math.random() - 0.5) * 0.001; | |
updateBoatPosition({ | |
coords: { | |
latitude: simulatedLat, | |
longitude: simulatedLng | |
} | |
}); | |
}, 2000); | |
// In a real application, you would use the Geolocation API: | |
// if (navigator.geolocation) { | |
// navigator.geolocation.watchPosition(updateBoatPosition); | |
// } | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment