Exemplo 4 – Utilizando parâmetros do Leaflet
É possível utilizar recursos ou parâmetros do Leaflet que ainda não possuem equivalentes na API Javascript da Maplink. Para isso, acesse seu objeto de mapa pelas propriedades L e map, respectivamente.
const L = maplink.L; const map = maplink.map;
Neste exemplo, foi realizada uma rota com a Trip API com três pontos de parada. Para os marcadores, foram utilizadas a biblioteca Leaflet e a rota foi exibida usando o método line.
Usamos o L.icon da Leaflet para carregar o marcador com figuras personalizadas em que o figura_origem.png é a figura do ponto de origem e o figura_destino.png é a figura dos pontos de destinos.
É possível observar que o formato das coordenadas latitude/longitude para localizar o marcador é o seguinte: L.marker([-23.503939, -46.498419].
A rota realizada pela Trip API possui duas legs, representando os trechos entre os pontos de paradas.
Assim, utilizamos o método line com a cor verde para o trecho 1 (maplink.line(route1, {color: "green"})) e a cor vermelha para o trecho 2 (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>
