<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geotagged Image Locator</title>
<!-- Include Mapbox styles -->
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
<!-- Include your CSS file -->
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
#imageUpload {
margin-bottom: 20px;
}
.image-previews {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.uploaded-image {
max-width: 100px;
max-height: 100px;
object-fit: cover;
border: 1px solid #ddd;
border-radius: 5px;
}
.map {
width: 100%;
height: 600px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Geotagged Image Locator</h1>
<!-- Image upload form -->
<input type="file" id="imageUpload" multiple accept="image/*">
<!-- Mapbox container -->
<div id="map" class="map"></div>
<div id="imagePreviews" class="image-previews"></div>
</div>
<!-- Include Mapbox library -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<!-- Include exifr library -->
<script src="https://cdn.jsdelivr.net/npm/exifr/dist/lite.umd.js"></script>
<!-- Include your JavaScript file -->
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmlraXRhY2hhdWhhbjEyMyIsImEiOiJjbGwwaWxrdzEwZW02M2pxcjN4eHo1bDR1In0.I4yZh8CAQOz2c63IsCBOpg';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [0, 0],
zoom: 2,
});
const imageUpload = document.getElementById('imageUpload');
const imagePreviews = document.getElementById('imagePreviews');
imageUpload.addEventListener('change', async (e) => {
const files = e.target.files;
if (files && files.length > 0) {
imagePreviews.innerHTML = '';
const markers = [];
for (const file of files) {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.classList.add('uploaded-image');
imagePreviews.appendChild(img);
const coordinates = await getGPSLocation(file);
if (coordinates) {
const marker = new mapboxgl.Marker()
.setLngLat(coordinates)
.addTo(map);
markers.push(marker);
}
}
if (markers.length > 0) {
const bounds = new mapboxgl.LngLatBounds();
markers.forEach(marker => {
bounds.extend(marker.getLngLat());
});
map.fitBounds(bounds, { padding: 50 });
}
}
});
async function getGPSLocation(file) {
try {
const exifData = await EXIFR.parse(file);
const lat = exifData.latitude;
const lon = exifData.longitude;
if (lat !== undefined && lon !== undefined) {
return [lon, lat];
}
} catch (error) {
console.error('Error extracting GPS coordinates:', error);
}
return null;
}
</script>
</body>
</html>