Ejemplo 4 – Utilización de los parámetros del Leaflet
Es posible utilizar funciones o parámetros de Leaflet que aún no tienen equivalentes en la API Javascript de Maplink. Para ello, acceda a su objeto de mapa a través de las propiedades L y map, respectivamente.
const L = maplink.L; const map = maplink.map;
En este ejemplo, se tomó una ruta con la Trip API con tres paradas. Se utilizó la biblioteca Leaflet para los marcadores y la ruta se visualizó utilizando el método line.
Utilizamos L.icon de Leaflet para cargar el marcador con figuras personalizadas donde figura_origem.png es la figura del punto de origen y figura_destino.png es la figura de los puntos de destino.
Puede ver que el formato de las coordenadas de latitud/longitud para localizar el marcador es el siguiente: L.marker([-23.503939, -46.498419].
La ruta seguida por Trip API tiene dos tramos, que representan los tramos entre las paradas.
Así que utilizamos el método con el color verde para la sección 1 line y el color rojo para la sección 2 (maplink.line(route1, {color: "green"})). (maplink.line(route2, {color: "red"}))
<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 maplink = new MaplinkMap(apiKey, "map", { center: [-23.503939, -46.498419] });
const L = maplink.L;
const map = maplink.map;
var iconCD = L.icon({
iconUrl: 'figura_origem.png',
iconSize: [32, 32],
shadowSize: [0, 0],
iconAnchor: [15, 30],
shadowAnchor: [0, 0],
popupAnchor: [-3, -32]
});
markerCD = new L.marker([-23.503939, -46.498419], { icon: iconCD })
.bindPopup("<strong>CD</strong>")
.addTo(map);
var locations = [
["Cliente1", -23.506608, -46.499145],
["Cliente2", -23.509059, -46.501193]
];
var Icon = L.icon({
iconUrl: 'figura_destino.png',
iconSize: [32, 32],
shadowSize: [0, 0],
iconAnchor: [15, 30],
shadowAnchor: [0, 0],
popupAnchor: [-3, -32]
});
for (var i = 0; i < locations.length; i++) {
marker = new L.marker([locations[i][1], locations[i][2]], { icon: Icon })
.bindPopup(locations[i][0])
.addTo(map);
}
const tripSolution = JSON.parse(`{
"id": "6099c6a8fec03d33f22a7f6f",
"clientId": "0wfdGfgEOFpME1RcsrBj4U5yAAJjeqFG",
"totalDistance": 1112,
"totalNominalDuration": 200,
"averageSpeed": 20.02,
"legs": [
{
"distance": 431,
"nominalDuration": 77,
"averageSpeed": 20.15,
"points": [
{
"latitude": -23.50393569920035,
"longitude": -46.49834851821927
},
{
"latitude": -23.504808,
"longitude": -46.4983
},
{
"latitude": -23.504995,
"longitude": -46.498282
},
{
"latitude": -23.505813,
"longitude": -46.497989
},
{
"latitude": -23.505986,
"longitude": -46.4979
},
{
"latitude": -23.50618,
"longitude": -46.497763
},
{
"latitude": -23.506368,
"longitude": -46.497882
},
{
"latitude": -23.506625,
"longitude": -46.498025
},
{
"latitude": -23.50668540374243,
"longitude": -46.499140809791456
}
]
},
{
"distance": 681,
"nominalDuration": 122,
"averageSpeed": 20.1,
"points": [
{
"latitude": -23.50668540374243,
"longitude": -46.499140809791456
},
{
"latitude": -23.506716,
"longitude": -46.499706
},
{
"latitude": -23.506868,
"longitude": -46.499674
},
{
"latitude": -23.506996,
"longitude": -46.499642
},
{
"latitude": -23.507011,
"longitude": -46.499851
},
{
"latitude": -23.507045,
"longitude": -46.500116
},
{
"latitude": -23.507072,
"longitude": -46.500522
},
{
"latitude": -23.507717,
"longitude": -46.500408
},
{
"latitude": -23.507846,
"longitude": -46.500378
},
{
"latitude": -23.50791,
"longitude": -46.50036
},
{
"latitude": -23.507977,
"longitude": -46.500331
},
{
"latitude": -23.508232,
"longitude": -46.500178
},
{
"latitude": -23.508343,
"longitude": -46.50029
},
{
"latitude": -23.508603,
"longitude": -46.500606
},
{
"latitude": -23.508761,
"longitude": -46.50085
},
{
"latitude": -23.508798,
"longitude": -46.500916
},
{
"latitude": -23.508833,
"longitude": -46.500991
},
{
"latitude": -23.50888690756477,
"longitude": -46.501212952746116
}
]
}
],
"source": "MAPLINK",
"createdAt": 1620690601541
}`);
const route1 = tripSolution.legs[0].points;
maplink.line(route1, {
color: "green"
});
const route2 = tripSolution.legs[1].points;
maplink.line(route2, {
color: "red"
});
</script>
</body>
</html>
