I have created the map with Mapbox, but I had a few problems. When I try to Place the icon in the center of the line and add the arrow to the line endpoint, it always fails.
I added Markers on Jorge Chavez International Airport(LIM) & Alejandro Velasco Astete International Airport (CUZ)
const marker1 = new mapboxgl.Marker({ color: '#5C7F74',scale:'0.8'})
.setLngLat([-77.11174632225463, -12.02384281134897])
.addTo(map);
const marker3 = new mapboxgl.Marker({ color: '#8BAAA1',scale:'0.5'})
.setLngLat([-70.15810500000016,-15.469970999998012])
.addTo(map);then add a line to map, So far it's okay but I don't know how to build new layers, add arrows aligns to the line endpoint, or add a symbol on line center
map.on('load', () => {
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-70.15810500000016,-15.469970999998012],[-77.10670100000081,-12.030560999998116]
]
}
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round',
'line-miter-limit': 2
},
'paint': {
'line-color': '#888',
'line-width': 3,
'line-dasharray':[2,2]
}
});
});