Mapbox related web page (georeferrenced image)

Question

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 20-Sep-23 23:31pm

Nikita Chauhan Atom Aviation

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard MacCutchan · Answer 1 · 2023-09-20T23:46:00

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.

Nikita Chauhan Atom Aviation · Answer 2 · 2023-09-21T01:43:00

<!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>

Mapbox related web page (georeferrenced image)

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0