Ejemplo 3 – Visualización de varias rutas
El siguiente ejemplo muestra dos rutas generadas por Trip API en la región de Santos, SP.
La variable map está asociada a la clase MaplinkMap y contiene las propiedades del mapa, como div donde se inicializará. En este caso, no hay una ubicación inicial definida, por lo que el mapa se centrará automáticamente cuando se obtenga la polilínea en el método line.
El método map.lines obtiene las coordenadas de latitud/longitud de la respuesta que contiene las rutas realizadas por la Trip API con colores aleatorios, ya que no tiene ninguna definida.
Las respuestas de ruta se definieron en las variables tripSolution1 y tripSolution2 y se añadieron a la matriz de la variable routes.
El método map.marker añade un marcador al principio y al final. Como no se ha declarado ningún icon, se muestra el marcador Maplink por defecto.
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://maps.maplink.global"></script>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map"></div>
<script type = "text/javascript">
const apiKey = "SUA CHAVE DE API";
const map = new MaplinkMap(apiKey, "map");
const tripSolution1 = JSON.parse(`{
"totalDistance": 367,
"legs": [
{
"distance": 367,
"points": [
{
"latitude": -23.983273,
"longitude": -46.299793
},
{
"latitude": -23.982123,
"longitude": -46.299857
},
{
"latitude": -23.982008,
"longitude": -46.299494
},
{
"latitude": -23.982425,
"longitude": -46.299191
},
{
"latitude": -23.98223,
"longitude": -46.298604
},
{
"latitude": -23.982033,
"longitude": -46.298145
},
{
"latitude": -23.981830,
"longitude": -46.298312
}
]
}
],
"source": "MAPLINK"
}`);
const tripSolution2 = JSON.parse(`{
"totalDistance": 466,
"legs": [
{
"distance": 466,
"points": [
{
"latitude": -23.983253,
"longitude": -46.296054
},
{
"latitude": -23.983809,
"longitude": -46.296797
},
{
"latitude": -23.983358,
"longitude": -46.297131
},
{
"latitude": -23.982925,
"longitude": -46.297421
},
{
"latitude": -23.982033,
"longitude": -46.298145
},
{
"latitude": -23.981792,
"longitude": -46.297682
},
{
"latitude": -23.981549,
"longitude": -46.297285
},
{
"latitude": -23.981672,
"longitude": -46.297487
}
]
}
],
"source": "MAPLINK"
}`);
const routes = [tripSolution1, tripSolution2].map(trip => trip.legs[0].points);
map.lines(routes);
for (const route of routes) {
map.marker({
latitude: route[0].latitude,
longitude: route[0].longitude
});
map.marker({
latitude: route[route.length - 1].latitude,
longitude: route[route.length - 1].longitude
});
}
</script>
</body>
</html>
