{"id":2798,"date":"2023-12-22T19:10:34","date_gmt":"2023-12-22T19:10:34","guid":{"rendered":"https:\/\/developers.maplink.global\/resources\/"},"modified":"2024-06-18T17:45:18","modified_gmt":"2024-06-18T17:45:18","slug":"resources","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/en\/resources\/","title":{"rendered":"Resources"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li><a href=\"#markers\" data-type=\"internal\" data-id=\"#markers\">Markers<\/a><\/li>\n\n\n\n<li><a href=\"#popup\">Text balloon (Popup)<\/a><\/li>\n\n\n\n<li><a href=\"#icons\">Customized icon<\/a><\/li>\n\n\n\n<li><a href=\"#lines\" data-type=\"internal\" data-id=\"#lines\">Lines<\/a><\/li>\n\n\n\n<li><a href=\"#draggable-lines\" data-type=\"internal\" data-id=\"#draggable-lines\">Draggable lines<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"markers\"><strong>Markers<\/strong><\/h2>\n\n\n\n<p>A marker is simply a highlighted point on the map, which can be used to show points of interest (POIs) or simply stops on a route, for example.<\/p>\n\n\n\n<p>To create a simple marker, just use the marker method, passing an object that represents its coordinate:<\/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>The result of the above code will be similar to the image:<\/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=\"alt text\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"popup\"><strong>Text balloon (Popup)<\/strong><\/h2>\n\n\n\n<p>If you want to associate the marker with a text balloon containing its description, you can pass a settings object containing the property <code>popup<\/code> as the second argument. This property accepts a string, which can contain html formatting:<\/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>The result of the above code will be similar to the image:<\/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=\"icons\"><strong>Customized icon<\/strong><\/h2>\n\n\n\n<p>You can also define customized icons for your bookmarks, instead of using the standard Maplink icon. To do this, you must first create an icon object using the icon method. It receives three parameters, in order:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mandatory string with the path to the icon image, whose format should preferably be png;<\/li>\n\n\n\n<li>Optional string with the path to the shadow image to be projected by the icon;<\/li>\n\n\n\n<li>Optional object with <code>size<\/code> and <code>anchor<\/code> properties for the icon, its shadow and the text balloons.<\/li>\n<\/ul>\n\n\n\n<p>An example of a complete icon definition with its shadow would look like this:<\/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>Since the shadow is an optional attribute of the icons, it can be omitted. The example above without its shadow would look like this:<\/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>Once the icon has been created, simply pass it into the <code>icon<\/code> property of the settings object of the <code>marker<\/code> method.<\/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>The <code>icon<\/code> method is a wrapper for Leaflet&#8217;s function of the same name, so to find out more about custom icon settings, visit its documentation at <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>Icons created directly via Leaflet can be passed normally to the <code>marker<\/code> method.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lines\"><strong>Lines<\/strong><\/h2>\n\n\n\n<p>Lines can be drawn on the map, usually to illustrate routes between two or more points. The <code>line<\/code> method allows you to easily create a line by passing an array of coordinate objects as an argument:<\/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>The result of the above code should be similar to the image:<\/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>When no settings are passed, some default values will be used, such as the color of the line. The method&#8217;s second argument accepts a configuration object, which can contain the properties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>color<\/code> &#8211; String value to define the line color. Accepts the same CSS color property values, such as color name or hexadecimal code. If not specified, a random color will be used.<\/li>\n\n\n\n<li><code>fitBounds<\/code> &#8211; Boolean value to define whether the line should be framed in the initial rendering of the map. The default value is <code>false<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>The previous example of a line with its color defined would look like this:<\/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=\"draggable-lines\">Draggable lines<\/h2>\n\n\n\n<p>Map Display API allows you to create draggable lines, which allow new points to be added by the user to the map. An example can be found at the link: <a href=\"https:\/\/maps.maplink.global\/index.html?apiKey=YOUR_API_KEY\">https:\/\/maps.maplink.global\/index.html?apiKey=YOUR_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\">Draggable line example<\/figcaption><\/figure>\n<\/div>\n\n\n<p>To use this feature it is necessary to use the <code>draggableLine<\/code> method. The first argument must be an array of coordinate objects, as in the example below:<\/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>The method&#8217;s second argument accepts a configuration object. As with the <code>line<\/code> method, when this argument is not provided, some default values \u200b\u200bwill be used, such as the line color. The configuration object can contain the following properties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>color<\/code> &#8211; String value to define the line color. Accepts the same CSS color property values, such as color name or hexadecimal code. If not specified, a random color will be used.<\/li>\n\n\n\n<li><code>fitBounds<\/code> &#8211; Boolean value to define whether the line should be framed in the initial rendering of the map. The default value is <code>false<\/code>.<\/li>\n\n\n\n<li><code>snapToClosestPoint<\/code> &#8211; Optional object with options that define what the behavior should be when the user drops the draggable line on the map. If informed, when adding a new point it will be directed to the nearest road on mouse leave\n<ul class=\"wp-block-list\">\n<li><code>ignoreTypeOfPath<\/code> &#8211; Array with road elements that should be ignored when repositioning. Possible values \u200b\u200bare: <code>[\"abandoned\", \"driveway\", \"parking_aisle\", \"path\", \"rail\", \"service\", \"track\", \"trackminor_construction\"]<\/code><\/li>\n\n\n\n<li><code>debug<\/code> &#8211; Boolean value. If <code>true<\/code>, the paths where it is possible to drag the point will be highlighted.<\/li>\n\n\n\n<li><code>threshold<\/code> &#8211; Integer with the value of the radius up to which the point can be moved.<\/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>When adding an draggable line, two events are available: addedPoint for when a new point is added and removedPoint for when it is removed.<\/p>\n\n\n\n<p>This way, a new request can be made to the <a href=\"https:\/\/developers.maplink.global\/en\/building-requests-for-the-trip-api\/\" data-type=\"post\" data-id=\"2543\">Trip API<\/a> whenever there is a change, for example.<\/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>Markers A marker is simply a highlighted point on the map, which can be used to show points of interest (POIs) or simply stops on a route, for example. To create a simple marker, just use the marker method, passing an object that represents its coordinate: The result of the above code will be similar [&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":[169],"tags":[],"class_list":["post-2798","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\/2798","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=2798"}],"version-history":[{"count":8,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2798\/revisions"}],"predecessor-version":[{"id":2978,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2798\/revisions\/2978"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/media?parent=2798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/categories?post=2798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/tags?post=2798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}