Convert MapBox to display points according to coordinates

I'm doing a test job, how would I adapt the mapbox code example below so that instead of showing the points when I click, he shows me when I put some coordinates?

https://docs.mapbox.com/mapbox-gl-js/example/measure/

1 answer

  • answered 2020-10-01 10:39 jscastro

    welcome to Stackoverflow. Your question reads a bit as "I want to do this, can anyone write the code for me?". For the next time, please read How do I ask a good question?, otherwise it will receive negative voting and it'll be closed by an admin.

    Having said so, I think I understood your need and it's something I did in the past for a PoC, so please, check the fiddle I created on how to show the coordinates of each point that will show you how to display both, distance and coords points when you click.

    enter image description here

    The relevant code is below:

    mapboxgl.accessToken = 'PASTE HERE YOUR TOKEN';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [2.3399, 48.8555],
        zoom: 12
    });
    
    var distanceContainer = document.getElementById('distance');
    var coordsContainer = document.getElementById('coords');
    
    // GeoJSON object to hold our measurement features
    var geojson = {
        'type': 'FeatureCollection',
        'features': []
    };
    
    // Used to draw a line between points
    var linestring = {
        'type': 'Feature',
        'geometry': {
            'type': 'LineString',
            'coordinates': []
        }
    };
    
    map.on('load', function () {
        map.addSource('geojson', {
            'type': 'geojson',
            'data': geojson
        });
    
        // Add styles to the map
        map.addLayer({
            id: 'measure-points',
            type: 'circle',
            source: 'geojson',
            paint: {
                'circle-radius': 5,
                'circle-color': '#000'
            },
            filter: ['in', '$type', 'Point']
        });
        map.addLayer({
            id: 'measure-lines',
            type: 'line',
            source: 'geojson',
            layout: {
                'line-cap': 'round',
                'line-join': 'round'
            },
            paint: {
                'line-color': '#000',
                'line-width': 2.5
            },
            filter: ['in', '$type', 'LineString']
        });
    
        map.on('click', function (e) {
            var features = map.queryRenderedFeatures(e.point, {
                layers: ['measure-points']
            });
    
            // Remove the linestring from the group
            // So we can redraw it based on the points collection
            if (geojson.features.length > 1) geojson.features.pop();
    
            // Clear the Distance container to populate it with a new value
            distanceContainer.innerHTML = '';
    
            // If a feature was clicked, remove it from the map
            if (features.length) {
                var id = features[0].properties.id;
                geojson.features = geojson.features.filter(function (point) {
                    return point.properties.id !== id;
                });
            } else {
                var point = {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [e.lngLat.lng, e.lngLat.lat]
                    },
                    'properties': {
                        'id': String(new Date().getTime())
                    }
                };
    
                geojson.features.push(point);
            }
    
            if (geojson.features.length > 1) {
                linestring.geometry.coordinates = geojson.features.map(
                    function (point) {
                        return point.geometry.coordinates;
                    }
                );
    
                geojson.features.push(linestring);
    
                // Populate the distanceContainer with total distance
                var value = document.createElement('pre');
                value.textContent =
                    'Total distance: ' +
                    turf.length(linestring).toLocaleString() +
                    'km';
                distanceContainer.appendChild(value);
    
                var valueC = document.createElement('pre');
                valueC.textContent = "";
                coordsContainer.innerHTML = '';
                
                //HERE IS WHERE YOU GO THROUGH THE COORDS
                for (let c = 0; c < geojson.features.length - 1; c++) {
                    valueC.textContent +=
                        'coords: ' + geojson.features[c].geometry.coordinates + "\n";
                }
                coordsContainer.appendChild(valueC);
            }
    
            map.getSource('geojson').setData(geojson);
        });
    });
    
    map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ['measure-points']
        });
        // UI indicator for clicking/hovering a point on the map
        map.getCanvas().style.cursor = features.length ?
            'pointer' :
            'crosshair';
    });
    
    
    

    If this answer solves your question, please mark it as answer accepted and in that way it'll help also other devs in the community to know it was the right solution.