9.4. Exemplo 4 - Utilizando parâmetros 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.508529,
                    "longitude": -46.500507
                },
                {
                    "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>