CODEWITHSUNDEEP
mapboxgeojsonmapbox-gl-jsmapbox-gl
Oleksandr Lager
Oleksandr Lager

Reputation: 23

How to change Mapbox map coordinates after button click

I have a page with a button and a map with a line that is drawn from a GeoJSON source. I want that when the user clicks on the button, the coordinates of the map change. The button itself is outside the map. Help me figure out how to connect this event to the button.

Here is my code which I thought should work. But this doesn't work:

<body>
    <div>
        <button type="button" id="sender">Send data</button>
        <div id="map" class="col-md-9 ms-sm-auto col-lg-9 px-md-4"></div>
    </div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGFnZXJ0cmlwIiwiYSI6ImNsYWthb3gyYzBrYjAzb3FodGNqczBodGoifQ.ZN2ufFAb1kYidqr_eEE-bA';
        const map = new mapboxgl.Map({
            container: 'map',
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            style: 'mapbox://styles/mapbox/dark-v11',
            center: [-122.486052, 37.830348],
            zoom: 14
        });

        map.on('load', () => {
            map.addSource('route', {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': [
                            [-122.483696, 37.833818],
                            [-122.483482, 37.833174],
                            [-122.483396, 37.8327],
                            [-122.483568, 37.832056],
                            [-122.48404, 37.831141],
                            [-122.48404, 37.830497],
                            [-122.483482, 37.82992],
                            [-122.483568, 37.829548],
                            [-122.48507, 37.829446],
                            [-122.4861, 37.828802],
                            [-122.486958, 37.82931],
                            [-122.487001, 37.830802],
                            [-122.487516, 37.831683],
                            [-122.488031, 37.832158],
                            [-122.488889, 37.832971],
                            [-122.489876, 37.832632],
                            [-122.490434, 37.832937],
                            [-122.49125, 37.832429],
                            [-122.491636, 37.832564],
                            [-122.492237, 37.833378],
                            [-122.493782, 37.833683]
                        ]
                    }
                }
            });
            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#888',
                    'line-width': 8
                }
            });

            map.setData();
        });

        const btn = document.getElementById('sender')

        btn.onclick = () => {
            map.setData('route', {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': [
                            [-122.483482, 37.82992],
                            [-122.483568, 37.829548],
                            [-122.48507, 37.829446],
                            [-122.4861, 37.828802],
                            [-122.486958, 37.82931],
                            [-122.487001, 37.830802],
                            [-122.487516, 37.831683],
                            [-122.488031, 37.832158],
                            [-122.488889, 37.832971],
                        ]
                    }
                }
            });
            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#888',
                    'line-width': 8
                }
            });
        }
    </script>
</body>

Upvotes: 1

Views: 812

Answers (2)

Oleksandr Lager
Oleksandr Lager

Reputation: 23

The Mapbox documentation turned out to be an interesting method that helped with my problem. I found a similar answer in another post, so I'm posting what I think is the best solution:

    btn.addEventListener('click', function () {
        map.getSource('data-update').setData(geoJSONobj);
    })

Or you can pass an object in which to put your parameters and even center the map to where the route was built:

btn.addEventListener('click', function () {
        map.getSource('data-update').setData({
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": custom_coordinates,
                }
            }]
        });
        map.flyTo({
            center: custom_coordinates[0],
            speed: 3,
        })
    })

Upvotes: 0

M.Ismail
M.Ismail

Reputation: 437

if I understand your question then you can try this :

  • remove the existing route
  • then add the second layer to the map,"I remove the source also to avoid any error if user click the button twice,and you can use the same variable 'route' again" something like this

<body>
    <div>
        <button type="button" id="sender">Send data</button>
        <div id="map" class="col-md-9 ms-sm-auto col-lg-9 px-md-4"></div>
    </div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGFnZXJ0cmlwIiwiYSI6ImNsYWthb3gyYzBrYjAzb3FodGNqczBodGoifQ.ZN2ufFAb1kYidqr_eEE-bA';
        const map = new mapboxgl.Map({
            container: 'map',
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            style: 'mapbox://styles/mapbox/dark-v11',
            center: [-122.486052, 37.830348],
            zoom: 14
        });

        map.on('load', () => {
            map.addSource('route', {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': [
                            [-122.483696, 37.833818],
                            [-122.483482, 37.833174],
                            [-122.483396, 37.8327],
                            [-122.483568, 37.832056],
                            [-122.48404, 37.831141],
                            [-122.48404, 37.830497],
                            [-122.483482, 37.82992],
                            [-122.483568, 37.829548],
                            [-122.48507, 37.829446],
                            [-122.4861, 37.828802],
                            [-122.486958, 37.82931],
                            [-122.487001, 37.830802],
                            [-122.487516, 37.831683],
                            [-122.488031, 37.832158],
                            [-122.488889, 37.832971],
                            [-122.489876, 37.832632],
                            [-122.490434, 37.832937],
                            [-122.49125, 37.832429],
                            [-122.491636, 37.832564],
                            [-122.492237, 37.833378],
                            [-122.493782, 37.833683]
                        ]
                    }
                }
            });
            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#888',
                    'line-width': 8
                }
            });

            //map.setData();
        });

        const btn = document.getElementById('sender')

        btn.onclick = () => {
        map.removeLayer('route');
        map.removeSource('route')
      var new_route = {
    type: 'Feature',
    properties: {},
    geometry: {
        type: 'LineString',
        'coordinates': [
                            [-122.483482, 37.82992],
                            [-122.483568, 37.829548],
                            [-122.48507, 37.829446],
                            [-122.4861, 37.828802],
                            [-122.486958, 37.82931],
                            [-122.487001, 37.830802],
                            [-122.487516, 37.831683],
                            [-122.488031, 37.832158],
                            [-122.488889, 37.832971],
                        ]
    },
}
  map.addLayer({
        id: 'route',
        type: 'line',
        source: {
            type: 'geojson',
            data: new_route,
        },
        layout: {
            'line-join': 'round',
            'line-cap': 'round',
        },
        paint: {
            'line-color': '#888',
            'line-width': 8,
        },
    })
          
        }
    </script>
</body>

working fiddle

Upvotes: 1

Related Questions