<!DOCTYPE html>
<html lang="en">
<head>
<title>Vector map</title>
<meta property="og:description" content="Display vector tile." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.4.0/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl@4.4.0/dist/maplibre-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://www.unpkg.com/turf@2.0.0/turf.min.js" charset="utf-8"></script>
<script>
map = new maplibregl.Map({
"container": "map",
"center": [6, 49],
"zoom": 2,
"style": "https://www.iso-maps.com/map/style/standard.json?api_key=ZTTE9VTFXz4XQuKZPk5J5rR3dwbReZ5qAhBHRtfLalnvbCMNGEO7aPYzEifJ"
});
map.addControl(new maplibregl.FullscreenControl());
map.addControl(new maplibregl.NavigationControl({
visualizePitch: true,
showZoom: true,
showCompass: true
}));
const destinations = [
[[-8.240473, 53.419751], [23.810343, 38.275283]],
[[-8.240473, 53.419751], [-7.839319, 39.553444]],
[[10.452764, 51.165707], [26.068944, 64.952416]],
];
map.on("load", () => {
destinations.forEach((destination, index) => {
const cMarker = new maplibregl.Marker()
.setLngLat(destination[0])
.addTo(map);
const cMarker1 = new maplibregl.Marker()
.setLngLat(destination[1])
.addTo(map);
// A simple line from origin to destination.
const route = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [destination[0], destination[1]]
}
}
]
};
// Calculate the distance in kilometers between route start/end point.
const lineDistance = turf.lineDistance(route.features[0], "kilometers");
const arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
const steps = 500;
// Draw an arc between the `origin` & `destination` of the two points
for (let i = 0; i < lineDistance; i += lineDistance / steps) {
const segment = turf.along(route.features[0], i, "kilometers");
arc.push(segment.geometry.coordinates);
}
// Update the route with calculated arc coordinates
route.features[0].geometry.coordinates = arc;
// Create unique IDs for the source and layer
const routeSourceId = `route-${index}`;
const routeLayerId = `route-${index}`;
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource(routeSourceId, {
"type": "geojson",
"data": route
});
map.addLayer({
"id": routeLayerId,
"source": routeSourceId,
"type": "line",
"paint": {
"line-width": 2,
"line-color": "#007cbf"
}
});
});
});
</script>
</body>
</html>
