Image near coordinates

Imagery, data, and integrations
1

I am trying to use Mapillary JS to show a mapillary window, starting with a image closest possible to the given coordinates. Any suggestions on how to fix it? My code just gives “No images found near the coordinates.” in the console. I call the page like this:
mapillary.html?lon=15.968909217037435&lat=59.520650950825

The code:

<!DOCTYPE html>
<html>
<head>
    <title>Mapillary Viewer</title>
    <style>
        #mly { width: 100%; height: 500px; }
    </style>
    <script src="https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.js"></script>
    <link href="https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.css" rel="stylesheet" />
</head>
<body>
    <div id="mly" style="width: 600px; height: 300px;"></div>

    <script>
    window.onload = function() {
        // Initialize the viewer
        var viewer = new mapillary.Viewer({
            accessToken: 'TOKEN',
            container: 'mly',
            component: {
                cover: false,
            },
        });

        // Get the coordinates from the URL
        var urlParams = new URLSearchParams(window.location.search);
        var lat = parseFloat(urlParams.get('lat'));
        var lon = parseFloat(urlParams.get('lon'));

        console.log('Latitude:', lat);
        console.log('Longitude:', lon);

        // Fetch the closest image key
        fetch(`https://graph.mapillary.com/images?access_token=TOKEN&closeto=${lon},${lat}&radius=600&limit=1`)
    .then(response => response.json())
    .then(data => {
        console.log('API Response:', data); // Log the entire response
        if (data.features && data.features.length > 0) {
            var imageKey = data.features[0].properties.key;
            console.log('Image Key:', imageKey);
            viewer.moveTo(imageKey).catch(function(error) {
                console.error('Error moving to coordinates:', error);
            });
        } else {
            console.error('No images found near the coordinates.');
        }
    })
    .catch(error => {
        console.error('Error fetching image key:', error);
        error.text().then(errorMessage => {
            console.error('Error message:', errorMessage);
        });
    });

        // Adds event listener for navigation
        viewer.on('nodechanged', function(node) {
            console.log('Node changed:', node);
        });
    };
    </script>
</body>
</html>

And I just get this in the console:
Latitude: 59.520650950825
Longitude: 15.968909217037435
API Response: {data: Array(0)}
No images found near the coordinates.

2

Ok, I found out that the “closeto” function was from v3 of the API. When adapting my code for v4, I got something like this. Seems to work:

var bbox = `${lon-0.01},${lat-0.01},${lon+0.01},${lat+0.01}`;
fetch(`https://graph.mapillary.com/images?access_token=TOKEN&bbox=${bbox}&limit=1`)
    .then(response => response.json())
    .then(data => {
        console.log('API Response:', data); // Log the entire response
        if (data.data && data.data.length > 0) {
            var imageKey = data.data[0].id;
            console.log('Image Key:', imageKey); // Log the image key
            viewer.moveTo(imageKey).catch(function(error) {
                console.error('Error moving to coordinates:', error);
            });
        } else {
            console.error('No images found near the coordinates.');
        }
    })
    .catch(error => {
        console.error('Error fetching image key:', error);
    });
2 Likes