{"id":2414,"date":"2023-12-22T20:04:08","date_gmt":"2023-12-22T20:04:08","guid":{"rendered":"https:\/\/developers.maplink.global\/ejemplo-4-utilizacion-de-los-parametros-del-leaflet\/"},"modified":"2024-03-04T14:37:34","modified_gmt":"2024-03-04T14:37:34","slug":"ejemplo-4-utilizacion-de-los-parametros-del-leaflet","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/es\/ejemplo-4-utilizacion-de-los-parametros-del-leaflet\/","title":{"rendered":"Ejemplo 4 &#8211; Utilizaci\u00f3n de los par\u00e1metros del Leaflet"},"content":{"rendered":"\n<p>Es posible utilizar funciones o par\u00e1metros <a href=\"https:\/\/leafletjs.com\/\" data-type=\"link\" data-id=\"https:\/\/leafletjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">de Leaflet<\/a> que a\u00fan no tienen equivalentes en la API <em>Javascript <\/em>de Maplink. Para ello, acceda a su objeto de mapa a trav\u00e9s de las propiedades <code>L<\/code> y <code>map<\/code>, respectivamente.<\/p>\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const L = maplink.L;\nconst map = maplink.map;<\/pre>\n\n<p>En este ejemplo, se tom\u00f3 una ruta con la Trip API con tres paradas. Se utiliz\u00f3 la biblioteca Leaflet para los marcadores y la ruta se visualiz\u00f3 utilizando el m\u00e9todo <code>line<\/code>.<\/p>\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"428\" src=\"https:\/\/lh7-us.googleusercontent.com\/HVXrFl0cgFGwgDm_tj97Na-zMJHwG-yqsRxdFRbujbrmwujG9nhKLNNtN_7lqvJFGEA0AJJ_PbJJ1vfOfzRdAc-pWKIgs1jG_r1Xmzsh0f36WnvXgynztih9Lwmb5k6S_nN-f8KL7NcyfcN1rJz5wa8\"\/><\/p>\n\n<p>Utilizamos <code>L.icon<\/code> de Leaflet para cargar el marcador con figuras personalizadas donde <code>figura_origem.png<\/code> es la figura del punto de origen y <code>figura_destino.png<\/code> es la figura de los puntos de destino.<\/p>\n\n<p>Puede ver que el formato de las coordenadas de latitud\/longitud para localizar el marcador es el siguiente: <code>L.marker([-23.503939, -46.498419]<\/code>.<\/p>\n\n<p>La ruta seguida por Trip API tiene dos <em>tramos<\/em>, que representan los tramos entre las paradas.<\/p>\n\n<p> As\u00ed que utilizamos el m\u00e9todo con el color verde para la secci\u00f3n 1 <code>line<\/code> y el color rojo para la secci\u00f3n 2 <code>(<em>maplink.line(route1, {color: \"green\"})<\/em>)<\/code>. <code>(<em>maplink.line(route2, {color: \"red\"})<\/em>)<\/code><\/p>\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n  &lt;meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" \/&gt;\n  &lt;script src=\"https:\/\/maps.maplink.global\"&gt;&lt;\/script&gt;\n  &lt;style&gt;\n    #map {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n\n\n&lt;body&gt;\n  &lt;div id=\"map\"&gt;&lt;\/div&gt;\n  &lt;script type=\"text\/javascript\"&gt;\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(\"&lt;strong&gt;CD&lt;\/strong&gt;\")\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 &lt; 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  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Es posible utilizar funciones o par\u00e1metros de Leaflet que a\u00fan no tienen equivalentes en la API Javascript de Maplink. Para ello, acceda a su objeto de mapa a trav\u00e9s de las propiedades L y map, respectivamente. En este ejemplo, se tom\u00f3 una ruta con la Trip API con tres paradas. Se utiliz\u00f3 la biblioteca Leaflet [&hellip;]<\/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":[157],"tags":[],"class_list":["post-2414","post","type-post","status-publish","format-standard","hentry","category-map-display-es"],"acf":[],"_links":{"self":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/comments?post=2414"}],"version-history":[{"count":4,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2414\/revisions"}],"predecessor-version":[{"id":2816,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2414\/revisions\/2816"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/media?parent=2414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/categories?post=2414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/tags?post=2414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}