Saturday, December 31, 2022

MapBox Implementation of Map: How to plot multiple points on MapBox using a for each statement - multiple points with exactly the same location using MapBox

Below is code example of plot multiple points on MapBox:
<div id='map' class="map"></div>
<script type="text/javascript">
    mapboxgl.accessToken = "pk.your-access-token";

    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [6.055737, 46.233226],
        zoom: 13,
        scrollZoom: true
    });
    map.on('load', function(){
        console.log('map loaded');
        const locations = [
            [6.055737, 46.233226],
            [6.0510, 46.2278],
            [6.0471, 46.23336],
            [6.0371, 46.23336]
        ];
        locations.forEach(function(coords) {
            new mapboxgl.Marker().setLngLat(coords).addTo(map);
        });
    });
</script>
Output is as:

No comments:

Post a Comment