{"id":2398,"date":"2023-12-22T19:10:34","date_gmt":"2023-12-22T19:10:34","guid":{"rendered":"https:\/\/developers.maplink.global\/recursos\/"},"modified":"2024-06-18T17:46:12","modified_gmt":"2024-06-18T17:46:12","slug":"recursos","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/es\/recursos\/","title":{"rendered":"Recursos"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li><a href=\"#marcadores\" data-type=\"internal\" data-id=\"#marcadores\">Marcadores<\/a><\/li>\n\n\n\n<li><a href=\"#popup\" data-type=\"internal\" data-id=\"#popup\">Globo de texto (Popup)<\/a><\/li>\n\n\n\n<li><a href=\"#icono\" data-type=\"internal\" data-id=\"#icono\">Icono personalizado<\/a><\/li>\n\n\n\n<li><a href=\"#lineas\">L\u00edneas<\/a><\/li>\n\n\n\n<li><a href=\"#lineas-interactivas\" data-type=\"internal\" data-id=\"#lineas-interactivas\">L\u00edneas interactivas<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"marcadores\"><strong>Marcadores<\/strong><\/h2>\n\n\n\n<p>Un marcador es simplemente un punto resaltado en el mapa, que puede utilizarse para mostrar puntos de inter\u00e9s (POI) o simplemente paradas en una ruta, por ejemplo.<\/p>\n\n\n\n<p>Para crear un marcador simple, basta con utilizar el m\u00e9todo marcador, pasando un objeto que represente su coordenada:<\/p>\n\n\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=\"\">maplink.marker({\n    latitude: -23.986178,\n    longitude: -46.308402\n});<\/pre>\n\n\n\n<p>El resultado del c\u00f3digo anterior ser\u00e1 similar al de la imagen:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" width=\"481\" height=\"480.27777777777777\" src=\"https:\/\/lh7-us.googleusercontent.com\/XLjqRoKsI0XF35CbQI_flm7G54WkburnKxjJLJ6b__D1xDUsJ1x8ig5kUPItbEtMAcY8iJb7JH-floKZG6xs9LLj5FxCZc8hUZxEXGzIHmykYbDK4uM0iiloRzyDRoEqfapcuzndw99rXjGujUnW3-0\" alt=\"texto alternativo\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"popup\"><strong>Globo de texto (Popup)<\/strong><\/h2>\n\n\n\n<p>Si desea asociar el marcador con un globo de texto que contenga su descripci\u00f3n, puede pasar un objeto de configuraci\u00f3n que contenga la propiedad <code>popup<\/code> como segundo argumento. Esta propiedad acepta una string, que puede contener formato html:<\/p>\n\n\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=\"\">maplink.marker({\n    latitude: -23.986437,\n    longitude: -46.308303\n}, {\n    popup: \"&lt;strong>Est\u00e1tua do Pescador&lt;\/strong>\"\n});<\/pre>\n\n\n\n<p>El resultado del c\u00f3digo anterior ser\u00e1 similar al de la imagen:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"703\" src=\"https:\/\/lh7-us.googleusercontent.com\/tgY8BpiO40IoLnyb8kTZPuNi5dGwOfnmL4ARoxLBtCmBM756TsUP9WjR-ZkILo71OtLnc-XSaxEnXHpT5LTeRW4U0qCuvHz6V1rPyhCrXB-KHqBDK3DBHPBpxUmG1mpGaC7LlBKcP3DlWM9L20DOnA0\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"icono\"><strong>Icono personalizado<\/strong><\/h2>\n\n\n\n<p>Tambi\u00e9n puedes definir iconos personalizados para tus marcadores, en lugar de utilizar el icono est\u00e1ndar de Maplink. Para ello, primero debe crear un objeto icono utilizando el m\u00e9todo icono. Recibe tres par\u00e1metros, por orden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S<em>tring<\/em> obligatorio con la ruta a la imagen del icono, cuyo formato debe ser preferiblemente png;<\/li>\n\n\n\n<li>S<em>tring<\/em> opcional con la ruta a la imagen de sombra que proyectar\u00e1 el icono;<\/li>\n\n\n\n<li>Objeto opcional con propiedades de tama\u00f1o (<code>size<\/code>) y anclaje (<code>anchor<\/code>) para el icono, su sombra y los globos de texto.<\/li>\n<\/ul>\n\n\n\n<p>Un ejemplo de definici\u00f3n completa de un icono con su sombra ser\u00eda el siguiente:<\/p>\n\n\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 myIcon = maplink.icon(\n    \"apontador-icon.png\",\n    \"apontador-icon-shadow.png\",\n    {\n        iconSize: [34, 43],\n        shadowSize: [12, 20],\n        iconAnchor: [20, 42],\n        shadowAnchor: [5, 10],\n        popupAnchor: [-3, -32]\n    }\n);<\/pre>\n\n\n\n<p>Como la sombra es un atributo opcional de los iconos, puede omitirse. El ejemplo anterior sin su sombra tendr\u00eda este aspecto:<\/p>\n\n\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 myIcon = maplink.icon(\n    \"apontador-icon.png\",\n    null,\n    {\n        iconSize: [34, 43],\n        iconAnchor: [20, 42],\n        popupAnchor: [-3, -32]\n    }\n);<\/pre>\n\n\n\n<p>Una vez creado el icono, basta con pasarlo a la propiedad <code>icon<\/code> del objeto de configuraci\u00f3n del m\u00e9todo <code>marker<\/code>.<\/p>\n\n\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=\"\">maplink.marker({\n    latitude: -23.986437,\n    longitude: -46.308303\n}, {\n    icon: myIcon\n});<\/pre>\n\n\n\n<p>El m\u00e9todo <code>icon<\/code> es una envoltura de la funci\u00f3n de Leaflet del mismo nombre, as\u00ed que para saber m\u00e1s sobre configuraciones de iconos personalizadas, visite su documentaci\u00f3n en <a href=\"https:\/\/leafletjs.com\/examples\/custom-icons\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Leaflet &#8211; a JavaScript library<\/a>.  <\/p>\n\n\n\n<p>Los iconos creados directamente a trav\u00e9s de Leaflet pueden pasarse normalmente al m\u00e9todo <code>marker<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lineas\"><strong>L\u00edneas<\/strong><\/h2>\n\n\n\n<p>Se pueden trazar l\u00edneas en el mapa, normalmente para ilustrar rutas entre dos o m\u00e1s puntos. El m\u00e9todo <code>line<\/code> permite crear f\u00e1cilmente una l\u00ednea pasando una matriz de objetos de coordenadas como argumento:<\/p>\n\n\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 route = [\n    {\n        \"latitude\": -23.983273,\n        \"longitude\": -46.299793\n    },\n    {\n        \"latitude\": -23.982123,\n        \"longitude\": -46.299857\n    },\n    {\n        \"latitude\": -23.982008,\n        \"longitude\": -46.299494\n    }\n];\nmaplink.line(route);<\/pre>\n\n\n\n<p>El resultado del c\u00f3digo anterior deber\u00eda ser similar al de la imagen:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"703\" src=\"https:\/\/lh7-us.googleusercontent.com\/qYTifr7mwUAP0L5v62sbWbVJn2ivhefpIQtCfddlLMItEmUaTbe0QwFpZoTrY3nm9hSdWjyjHFCJupELHFBxH232WeDWiJ3o-pjD-lL2apaT_uD35qPSu7whTGwlaQYaMXr_4wo0Zq-MMASxQp_dPr0\"><\/p>\n\n\n\n<p>Si no se introduce ning\u00fan par\u00e1metro, se utilizar\u00e1n algunos valores por defecto, como el color de la l\u00ednea. El segundo argumento del m\u00e9todo acepta un objeto de configuraci\u00f3n, que puede contener las propiedades:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>color<\/code> &#8211; String, utilizada para definir el color de la l\u00ednea. Acepta cualquier propiedad CSS v\u00e1lida para colores, como el nombre del color o el c\u00f3digo hexadecimal. Si no se especifica, se utilizar\u00e1 un color aleatorio.<\/li>\n\n\n\n<li><code>fitBounds<\/code> &#8211; Valor booleano. Define si la l\u00ednea debe estar enmarcada en la representaci\u00f3n inicial del mapa. El valor predeterminado es <code>false<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>El ejemplo anterior de una l\u00ednea con su color definido tendr\u00eda este aspecto:<\/p>\n\n\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=\"\">maplink.line(route, {\n    color: \"#ffa500\"\n});<\/pre>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"703\" src=\"https:\/\/lh7-us.googleusercontent.com\/8BrHh8v4Y5aDD9eaRg8YQdoHfHOYwnUz4P_2zkaVKSmj5uKDqzzhjpfd_r-7SmUwoWZwHpThGFqJA7o4C2pDYXezXuBzt9LTsBkkwHJ1XIiCDdx80Ydy0tusGWPZ6FTgNkOiFI3bGrGtXm_fFX0YWDc\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lineas-interactivas\">L\u00edneas interactivas<\/h2>\n\n\n\n<p>La Map Display API le permite crear l\u00edneas interactivas, que permiten que el usuario agregue nuevos puntos al mapa. Puede encontrar un ejemplo en el enlace: <a href=\"https:\/\/maps.maplink.global\/index.html?apiKey=SUA_API_KEY\">https:\/\/maps.maplink.global\/index.html?apiKey=SUA_API_KEY<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/developers.maplink.global\/wp-content\/uploads\/2024\/06\/image-2-1024x539.png\" alt=\"\" class=\"wp-image-2947\" srcset=\"https:\/\/developers.maplink.global\/wp-content\/uploads\/2024\/06\/image-2-1024x539.png 1024w, https:\/\/developers.maplink.global\/wp-content\/uploads\/2024\/06\/image-2-300x158.png 300w, https:\/\/developers.maplink.global\/wp-content\/uploads\/2024\/06\/image-2-768x404.png 768w, https:\/\/developers.maplink.global\/wp-content\/uploads\/2024\/06\/image-2.png 1508w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Ejemplo de l\u00ednea interactiva<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Para utilizar esta funci\u00f3n es necesario utilizar el m\u00e9todo <code>draggableLine<\/code>. El primer argumento debe ser un <em>array<\/em> de objetos de coordenadas, como en el siguiente ejemplo:<\/p>\n\n\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 route = [\n    {\n        \"latitude\": -23.983273,\n        \"longitude\": -46.299793\n    },\n    {\n        \"latitude\": -23.982123,\n        \"longitude\": -46.299857\n    },\n    {\n        \"latitude\": -23.982008,\n        \"longitude\": -46.299494\n    }\n];\nmaplink.draggableLine(route);<\/pre>\n\n\n\n<p>El segundo argumento del m\u00e9todo acepta un objeto de configuraci\u00f3n. Al igual que con el m\u00e9todo <code>line<\/code>, cuando no se proporciona este argumento, se utilizar\u00e1n algunos valores predeterminados, como el color de la l\u00ednea. El objeto de configuraci\u00f3n puede contener las siguientes propiedades:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>color<\/code> &#8211; String, utilizada para definir el color de la l\u00ednea. Acepta cualquier propiedad CSS v\u00e1lida para colores, como el nombre del color o el c\u00f3digo hexadecimal. Si no se especifica, se utilizar\u00e1 un color aleatorio.<\/li>\n\n\n\n<li><code>fitBounds<\/code> &#8211; Valor booleano. Define si la l\u00ednea debe estar enmarcada en la representaci\u00f3n inicial del mapa. El valor predeterminado es <code>false<\/code>.<\/li>\n\n\n\n<li><code>snapToClosestPoint<\/code> &#8211; Objeto opcional con opciones que definen cu\u00e1l debe ser el comportamiento cuando el usuario coloca la l\u00ednea interactiva en el mapa. Si se informa, al a\u00f1adir un nuevo punto se dirigir\u00e1 a la carretera m\u00e1s cercana al soltar el mouse.\n<ul class=\"wp-block-list\">\n<li><code>ignoreTypeOfPath<\/code> &#8211; Array con elementos de la carretera que deben ignorarse al reposicionar. Los valores posibles son: <code>[\"abandoned\", \"driveway\", \"parking_aisle\", \"path\", \"rail\", \"service\", \"track\", \"trackminor_construction\"]<\/code><\/li>\n\n\n\n<li><code>debug<\/code> &#8211; Valor booleano. Si es <code>true<\/code>, se resaltar\u00e1n los caminos donde es posible arrastrar el punto.<\/li>\n\n\n\n<li><code>threshold<\/code> &#8211; Entero con el valor del radio hasta el que se puede mover el punto.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\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=\"\"> let line2 = maplink.draggableLine(route, {\n           color: \"#FF1E00\",\n           fitBounds: true,\n           snapToClosestPoint: {\n               ignoreTypeOfPath: [\n                   \"abandoned\",\n                   \"driveway\",\n                   \"parking_aisle\",\n                   \"path\",\n                   \"rail\",\n                   \"service\",\n                   \"track\",\n                   \"trackminor_construction\",\n               ],\n           },\n      });<\/pre>\n\n\n\n<p>Al agregar una l\u00ednea interactiva, hay dos eventos disponibles: <code>addPoint<\/code> para cuando se agrega un nuevo punto y <code>removePoint<\/code> para cuando se elimina.<\/p>\n\n\n\n<p>De esta forma, se puede realizar una nueva solicitud a la <a href=\"https:\/\/developers.maplink.global\/es\/creacion-de-solicitudes-para-la-api-trip\/\" data-type=\"post\" data-id=\"1902\">Trip API<\/a> siempre que haya un cambio, por ejemplo.<\/p>\n\n\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=\"\">line.on(\"addedPoint\", (point) => {\n     console.log(`[Line 1] - Added `, point);\n});\n\nline.on(\"removedPoint\", (point) => {\n     console.log(`[Line 1] - Removed `, point);\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Marcadores Un marcador es simplemente un punto resaltado en el mapa, que puede utilizarse para mostrar puntos de inter\u00e9s (POI) o simplemente paradas en una ruta, por ejemplo. Para crear un marcador simple, basta con utilizar el m\u00e9todo marcador, pasando un objeto que represente su coordenada: El resultado del c\u00f3digo anterior ser\u00e1 similar al de [&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-2398","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\/2398","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=2398"}],"version-history":[{"count":7,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2398\/revisions"}],"predecessor-version":[{"id":2979,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2398\/revisions\/2979"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/media?parent=2398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/categories?post=2398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/tags?post=2398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}