Click here to Skip to main content
15,882,658 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more: , +
I want to make a web page that contains a Mapbox and the system of uploading multiple images and then show their preview below the Mapbox. After the image upload, mark the location on the Mapbox, the image location will be shown on Mapbox (with the same location and coordinates of the image). the location which comes on the mapbox, automatically zoomed out on the screen. Also, add some CSS for page design as required. Please provide me with  an advanced and correct code snippet with full requirements.

Please provide me a code snippet for the same.


What I have tried:

I have tried all possible outcomes I can do.
Posted

Quote:
Please provide me with an advanced and correct code snippet with full requirements.
Sorry, that is not how this site works. You are expected to design and write your system. If you have problems with the code that you write, then people will be happy to help you resolve them, but we are not here to do your work.
 
Share this answer
 
<!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>
        /* Style for the container */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* Style for the image upload input */
#imageUpload {
    margin-bottom: 20px;
}

/* Style for image previews */
.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;
}

/* Style for the map container */
.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>
        // Initialize Mapbox
mapboxgl.accessToken = 'pk.eyJ1IjoibmlraXRhY2hhdWhhbjEyMyIsImEiOiJjbGwwaWxrdzEwZW02M2pxcjN4eHo1bDR1In0.I4yZh8CAQOz2c63IsCBOpg';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [0, 0], // Default center
    zoom: 2, // Default zoom
});

// Listen for image uploads
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) {
        // Clear existing image previews and map markers
        imagePreviews.innerHTML = '';
        const markers = [];

        for (const file of files) {
            // Display image previews
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            img.classList.add('uploaded-image');
            imagePreviews.appendChild(img);

            // Extract GPS coordinates from the image
            const coordinates = await getGPSLocation(file);

            if (coordinates) {
                // Mark the location on the map
                const marker = new mapboxgl.Marker()
                    .setLngLat(coordinates)
                    .addTo(map);
                markers.push(marker);
            }
        }

        // Fit the map to the markers
        if (markers.length > 0) {
            const bounds = new mapboxgl.LngLatBounds();
            markers.forEach(marker => {
                bounds.extend(marker.getLngLat());
            });
            map.fitBounds(bounds, { padding: 50 });
        }
    }
});

// Function to extract GPS coordinates from image
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]; // Swap lat and lon for Mapbox
        }
    } catch (error) {
        console.error('Error extracting GPS coordinates:', error);
    }
    return null;
}

    </script>
</body>
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900