Example 4 – Using Leaflet parameters
It is possible to use Leaflet features or parameters that do not yet have equivalents in Maplink’s Javascript API. To do this, access your map object via the properties L and map, respectively.
const L = maplink.L; const map = maplink.map;
In this example, a route was taken with the Trip API with three stops. The Leaflet library was used for the markers and the route was displayed using the line method.
We used Leaflet’s L.icon to load the marker with customized figures where the figura_origem.png is the figure of the origin point and the figura_destino.png is the figure of the destination points.
You can see that the format of the latitude/longitude coordinates for locating the marker is as follows: L.marker([-23.503939, -46.498419].
The route taken by Trip API has two legs, representing the stretches between the stops.
Thus, we used the method line with the color green for section 1 and the color red for section 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>
