{"id":2812,"date":"2023-12-22T20:04:08","date_gmt":"2023-12-22T20:04:08","guid":{"rendered":"https:\/\/developers.maplink.global\/example-4-using-leaflet-parameters\/"},"modified":"2024-03-04T14:36:55","modified_gmt":"2024-03-04T14:36:55","slug":"example-4-using-leaflet-parameters","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/en\/example-4-using-leaflet-parameters\/","title":{"rendered":"Example 4 – Using Leaflet parameters"},"content":{"rendered":"\n

It is possible to use Leaflet<\/a> features or parameters that do not yet have equivalents in Maplink’s Javascript <\/em>API. To do this, access your map object via the properties L<\/code> and map<\/code>, respectively.<\/p>\n\n

const L = maplink.L;\nconst map = maplink.map;<\/pre>\n\n
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<\/code> method.<\/p>\n\n
<\/p>\n\n
We used Leaflet’s L.icon<\/code> to load the marker with customized figures where the figura_origem.png<\/code> is the figure of the origin point and the figura_destino.png<\/code> is the figure of the destination points.<\/p>\n\n
You can see that the format of the latitude\/longitude coordinates for locating the marker is as follows: L.marker([-23.503939, -46.498419]<\/code>.<\/p>\n\n
The route taken by Trip API has two legs<\/em>, representing the stretches between the stops.<\/p>\n\n
 Thus, we used the method line<\/code> with the color green for section 1 and the color red for section 2 (maplink.line(route1, {color: \"green\"})<\/em>)<\/code>. (maplink.line(route2, {color: \"red\"})<\/em>)<\/code><\/p>\n\n
<html>\n<head>\n  <meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" \/>\n  <script src=\"https:\/\/maps.maplink.global\"><\/script>\n  <style>\n    #map {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  <\/style>\n<\/head>\n\n\n<body>\n  <div id=\"map\"><\/div>\n  <script type=\"text\/javascript\">\n    const apiKey = \"SUA CHAVE DE API\";\n    const maplink = new MaplinkMap(apiKey, \"map\", { center: [-23.503939, -46.498419] });\n    const L = maplink.L;\n    const map = maplink.map;\n\n\n    var iconCD = L.icon({\n      iconUrl: 'figura_origem.png',\n      iconSize: [32, 32],\n      shadowSize: [0, 0],\n      iconAnchor: [15, 30],\n      shadowAnchor: [0, 0],\n      popupAnchor: [-3, -32]\n    });\n    markerCD = new L.marker([-23.503939, -46.498419], { icon: iconCD })\n      .bindPopup(\"<strong>CD<\/strong>\")\n      .addTo(map);\n\n\n    var locations = [\n      [\"Cliente1\", -23.506608, -46.499145],\n      [\"Cliente2\", -23.509059, -46.501193]\n    ];\n\n\n    var Icon = L.icon({\n      iconUrl: 'figura_destino.png',\n      iconSize: [32, 32],\n      shadowSize: [0, 0],\n      iconAnchor: [15, 30],\n      shadowAnchor: [0, 0],\n      popupAnchor: [-3, -32]\n    });\n\n\n\n\n    for (var i = 0; i < locations.length; i++) {\n      marker = new L.marker([locations[i][1], locations[i][2]], { icon: Icon })\n        .bindPopup(locations[i][0])\n        .addTo(map);\n    }\n\n\n    const tripSolution = JSON.parse(`{\n    \"id\": \"6099c6a8fec03d33f22a7f6f\",\n    \"clientId\": \"0wfdGfgEOFpME1RcsrBj4U5yAAJjeqFG\",\n    \"totalDistance\": 1112,\n    \"totalNominalDuration\": 200,\n    \"averageSpeed\": 20.02,\n    \"legs\": [\n        {\n            \"distance\": 431,\n            \"nominalDuration\": 77,\n            \"averageSpeed\": 20.15,\n            \"points\": [\n                {\n                    \"latitude\": -23.50393569920035,\n                    \"longitude\": -46.49834851821927\n                },\n                {\n                    \"latitude\": -23.504808,\n                    \"longitude\": -46.4983\n                },\n                {\n                    \"latitude\": -23.504995,\n                    \"longitude\": -46.498282\n                },\n                {\n                    \"latitude\": -23.505813,\n                    \"longitude\": -46.497989\n                },\n                {\n                    \"latitude\": -23.505986,\n                    \"longitude\": -46.4979\n                },\n                {\n                    \"latitude\": -23.50618,\n                    \"longitude\": -46.497763\n                },\n                {\n                    \"latitude\": -23.506368,\n                    \"longitude\": -46.497882\n                },\n                {\n                    \"latitude\": -23.506625,\n                    \"longitude\": -46.498025\n                },\n                {\n                    \"latitude\": -23.50668540374243,\n                    \"longitude\": -46.499140809791456\n                }\n            ]\n        },\n        {\n            \"distance\": 681,\n            \"nominalDuration\": 122,\n            \"averageSpeed\": 20.1,\n            \"points\": [\n                {\n                    \"latitude\": -23.50668540374243,\n                    \"longitude\": -46.499140809791456\n                },\n                {\n                    \"latitude\": -23.506716,\n                    \"longitude\": -46.499706\n                },\n                {\n                    \"latitude\": -23.506868,\n                    \"longitude\": -46.499674\n                },\n                {\n                    \"latitude\": -23.506996,\n                    \"longitude\": -46.499642\n                },\n                {\n                    \"latitude\": -23.507011,\n                    \"longitude\": -46.499851\n                },\n                {\n                    \"latitude\": -23.507045,\n                    \"longitude\": -46.500116\n                },\n                {\n                    \"latitude\": -23.507072,\n                    \"longitude\": -46.500522\n                },\n                {\n                    \"latitude\": -23.507717,\n                    \"longitude\": -46.500408\n                },\n                {\n                    \"latitude\": -23.507846,\n                    \"longitude\": -46.500378\n                },\n                {\n                    \"latitude\": -23.50791,\n                    \"longitude\": -46.50036\n                },\n                {\n                    \"latitude\": -23.507977,\n                    \"longitude\": -46.500331\n                },\n                {\n                    \"latitude\": -23.508232,\n                    \"longitude\": -46.500178\n                },\n                {\n                    \"latitude\": -23.508343,\n                    \"longitude\": -46.50029\n                },\n                {\n                    \"latitude\": -23.508603,\n                    \"longitude\": -46.500606\n                },\n                {\n                    \"latitude\": -23.508761,\n                    \"longitude\": -46.50085\n                },\n                {\n                    \"latitude\": -23.508798,\n                    \"longitude\": -46.500916\n                },\n                {\n                    \"latitude\": -23.508833,\n                    \"longitude\": -46.500991\n                },\n                {\n                    \"latitude\": -23.50888690756477,\n                    \"longitude\": -46.501212952746116\n                }\n            ]\n        }\n    ],\n    \"source\": \"MAPLINK\",\n    \"createdAt\": 1620690601541\n}`);\n\n\n    const route1 = tripSolution.legs[0].points;\n    maplink.line(route1, {\n      color: \"green\"\n    });\n    const route2 = tripSolution.legs[1].points;\n    maplink.line(route2, {\n      color: \"red\"\n    });\n\n\n  <\/script>\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
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. In this example, a route was taken with the Trip API with three stops. The Leaflet library was used for the markers […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[169],"tags":[],"class_list":["post-2812","post","type-post","status-publish","format-standard","hentry","category-map-display-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/comments?post=2812"}],"version-history":[{"count":2,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2812\/revisions"}],"predecessor-version":[{"id":2815,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2812\/revisions\/2815"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/media?parent=2812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/categories?post=2812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/tags?post=2812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}