{"id":2388,"date":"2023-12-22T18:59:51","date_gmt":"2023-12-22T18:59:51","guid":{"rendered":"https:\/\/developers.maplink.global\/primeros-pasos\/"},"modified":"2024-10-11T19:01:32","modified_gmt":"2024-10-11T19:01:32","slug":"primeros-pasos","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/es\/primeros-pasos\/","title":{"rendered":"Primeros pasos"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Importar la API Javascript<\/strong><\/h2>\n\n\n\n<p>La API Javascript de Maplink est\u00e1 disponible p\u00fablicamente en la url <a href=\"https:\/\/maps.maplink.global\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/maps.maplink.global,<\/a> y puede incluirse en cualquier p\u00e1gina web f\u00e1cilmente con una tag <code>script<\/code>:<\/p>\n\n\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;script src=\"https:\/\/maps.maplink.global\">&lt;\/script><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Crear objeto mapa<\/strong><\/h2>\n\n\n\n<p>Con la API ya importada, todo lo que tiene que hacer para representar un mapa es definir un elemento <code>div<\/code> en su p\u00e1gina y crear una instancia de la clase <code>MaplinkMap<\/code> asociada a este elemento.<\/p>\n\n\n\n<p>El constructor de la clase espera dos argumentos obligatorios: la clave api de Maplink (<strong>client_id<\/strong> utilizado para autenticar las APIs), y el <code>id<\/code> del elemento <code>div<\/code> donde se renderizar\u00e1 el mapa.<\/p>\n\n\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;div id=\"map\">&lt;\/div>\n&lt;script>\nconst apiKey = \"[CHAVE DE API]\";\nconst maplink = new MaplinkMap(apiKey, \"map\");\n&lt;\/script><\/pre>\n\n\n\n<p>Opcionalmente, se puede pasar un tercer argumento de configuraci\u00f3n al construir el mapa. Este argumento debe ser un objeto, donde cada propiedad corresponde a una definici\u00f3n de configuraci\u00f3n.  <\/p>\n\n\n\n<p>Las opciones disponibles son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>renderType<\/code>  &#8211; Acepta los valores de cadena <code>\"pbf\"<\/code> y <code>\"png\"<\/code>. Selecciona el formato en el que el servidor enviar\u00e1 los <em>mosaicos<\/em> del mapa. Por defecto, el formato es <em>protobuf <\/em>(pbf), que utiliza la funci\u00f3n de aceleraci\u00f3n de gr\u00e1ficos del navegador a trav\u00e9s de la API WebGL. En entornos sin soporte <em>WebGL<\/em>, la opci\u00f3n png debe estar activada, de lo contrario el mapa no podr\u00e1 ser renderizado.<\/li>\n\n\n\n<li><code>center<\/code> &#8211; Array con coordenadas para definir el punto central en la representaci\u00f3n inicial del mapa.<\/li>\n\n\n\n<li><code>zoom<\/code> &#8211; Entero que define el nivel de zoom inicial. Este valor se pasa directamente a la instancia de leaflet asociada al mapa. Encontrar\u00e1 m\u00e1s informaci\u00f3n en el enlace: <a href=\"https:\/\/leafletjs.com\/examples\/zoom-levels\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Zoom levels &#8211; Leaflet<\/a>.<\/li>\n\n\n\n<li><code>theme<\/code>\u00a0\u2013 Tema en el que se mostrar\u00e1 el mapa. Las opciones disponibles son:<code>\"maplink-custom\"<\/code> (tema predeterminado)\u00a0y\u00a0<code>\"basic-preview\"<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>A continuaci\u00f3n se muestra un ejemplo de c\u00f3mo inicializar el mapa con par\u00e1metros opcionales:<\/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 options = {\n  renderType: \"pbf\",\n  center: [-23.545344, -46.657384],\n  zoom: 17,\n  theme: \"maplink-custom\"\n};\n\nconst map = new MaplinkMap(apiKey, \"map\", options);<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Importar la API Javascript La API Javascript de Maplink est\u00e1 disponible p\u00fablicamente en la url https:\/\/maps.maplink.global, y puede incluirse en cualquier p\u00e1gina web f\u00e1cilmente con una tag script: Crear objeto mapa Con la API ya importada, todo lo que tiene que hacer para representar un mapa es definir un elemento div en su p\u00e1gina y [&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-2388","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\/2388","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=2388"}],"version-history":[{"count":6,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2388\/revisions"}],"predecessor-version":[{"id":3068,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2388\/revisions\/3068"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/media?parent=2388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/categories?post=2388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/tags?post=2388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}