I have a 2D array containing longitudes and latitudes that I need to map using MapBox.
The example I found only demonstrates plotting two points, so I attempted to use a for-each loop to iterate through my 2D array and plot all the points. However, I encountered an issue with needing a unique ID to add a layer. I have been following a tutorial on this topic which can be found here:
Below is the current code I have, any assistance would be greatly appreciated!
<body>
//create the map
<div id='map'></div>
<div id='instructions'></div>
<script>
mapboxgl.accessToken = 'ACCESS TOKEN KEY';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-6.266155,53.350140], // starting position
zoom: 12 // starting zoom
});
//load the route function
map.on('load', function(){
getRoute();
});
//get route takes start and end (lat,long)
function getRoute() {
//create an array
var arr = [
[-6.3053, 53.3562],
[-6.802586, 53.176861],
[-6.5991, 53.0918],
[-6.3053, 53.3562]];
arr.forEach(function(el, index)
{
var nodeOnes = [];
nodeOnes = arr[0];
console.log("here" + n);
map.addLayer({
id: nodeOnes,
type: 'circle',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: nodeOnes
}
}
}
});
});
}
</script>
Please note that I have not included my access token for security reasons.