{"id":862,"date":"2022-07-27T15:57:00","date_gmt":"2022-07-27T14:57:00","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=862"},"modified":"2022-09-26T13:52:32","modified_gmt":"2022-09-26T12:52:32","slug":"leafletjs-mapas-gratis-en-tu-web","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/862\/leafletjs-mapas-gratis-en-tu-web\/","title":{"rendered":"LeafletJS: mapas gratis en tu web"},"content":{"rendered":"\n<p><a href=\"https:\/\/leafletjs.com\/\">Leaflet JS<\/a> es uno de mis mayores descubrimientos de los \u00faltimos a\u00f1os. Es una de las librer\u00edas de mapas web m\u00e1s poderosas que encontrar\u00e1s, compitiendo con la API de Google, ESRI o Mapbox gracias a su gran comunidad y los geniales plugins que van desarrollando.<\/p>\n\n\n\n<p>El sofware libre se impone de nuevo \ud83e\udd1f<\/p>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\" crossorigin=\"\">\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\" integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\" crossorigin=\"\"><\/script>\n\n\n\n<style>\n\n<\/style>\n\n\n\t<div id=\"mapid2\" style=\"height:100px;\"><\/div>\n\n\n<script>\n\n\/\/leaflet map object\nvar map = L.map('mapid2',{\n\tzoomControl:false,\n\tdragging:false,\n\tmaxZoom:14,\n\tminZoom:14,\n\tdoubleClickZoom:false,\n}).setView([25.475, -80.45], 14);\n\n\/\/tiled basemap object\nL.tileLayer(\"https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Dark_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}\", {\n\tattribution: \"Sample art demo powered by Leaflet. Uses ESRI tiles.\",\n}).addTo(map);\n\n<\/script>\n\n\n\n<p><em><sub><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-light-gray-color\">(Encuentra el c\u00f3digo del mapa anterior en <a href=\"https:\/\/theroamingworkshop.cloud\/b\/?p=873\" data-type=\"URL\" data-id=\"https:\/\/theroamingworkshop.cloud\/b\/?p=873\">este post<\/a>, con algunos otros ejemplos de Leaflet)<\/mark><\/sub><\/em><\/p>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Contenido<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-up\">1. Requisitos.<\/h2>\n\n\n\n<p>Todo lo que necesitas es lo siguiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Un navegador web con compatibilidad html y javascript (cualquier navegador moderno como Firefox, Vivaldi, Opera, Chrome, Edge, etc servir\u00e1).<\/li><li>Un editor de texto (como el bloc de notas mismo).<ul><li>[OPCIONAL] Un servidor web para alojar la p\u00e1gina y hacerla accesible a trav\u00e9s de internet. En todo caso, podr\u00e1s abrir el fichero localmente con algunas funciones restringidas.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"integrating-leaflet-in-html\">2. Integrar Leaflet en cualquier p\u00e1gina.<\/h2>\n\n\n\n<p>Al tratarse de una librer\u00eda es muy simple usarla en un entorno web. De hecho ver\u00e1s ejemplos incrustados directamente a lo largo del post.<\/p>\n\n\n\n<p>Para empezar, crea un nuevo fichero de texto y cambia su extensi\u00f3n a .html.<\/p>\n\n\n\n<p>Luego a\u00f1ade la estructura b\u00e1sica de un documento HTML, como la que encontrar\u00e1s en w3schools, web que siempre recomiendo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.w3schools.com\/html\/\">https:\/\/www.w3schools.com\/html\/<\/a><\/li><\/ul>\n\n\n\n<p>A\u00f1ade las funcionalidades de Leaflet insertando los enlaces a las librer\u00edas dentro de la etiqueta &lt;head&gt; de la siguiente forma:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n.....\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n  crossorigin=\"\"\/&gt;\n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n  crossorigin=\"\"&gt;&lt;\/script&gt;\n.....\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>Este m\u00e9todo lee la librer\u00eda directamente de la web, pero tambi\u00e9n puedes <a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/download.html\" target=\"_blank\">descargar los archivos<\/a> .css y .js y referirte a su ubicaci\u00f3n local:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"\/path\/to\/leaflet.css\" \/&gt;\n&lt;script src=\"\/path\/to\/leaflet.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Esta opci\u00f3n no se ver\u00e1 afectada por la conexi\u00f3n de red, o cambios en el fichero online, a la vez que nos permitir\u00e1 realizar cambios personalizados en nuestro fichero local.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-a-map\">3. A\u00f1adir un mapa al cuerpo del HTML<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"location-in-html-body\">Ubicado en html &lt;body&gt;<\/h4>\n\n\n\n<p>Leaflet a\u00f1ade sus componentes dentro del elemento &lt;div&gt; que asignemos dentro del &lt;body&gt; para acomodar nuestro dise\u00f1o. Es necesario asignar una \"id\" a este &lt;div&gt; para que Leaflet lo identifique posteriormente. Voy a usar \"mapid\" para este ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"mapid\" style=\"height:500px;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>El mapa se ver\u00e1 afectado por las propiedades CSS que definamos para la etiqueta #mapid. Esto modifica c\u00f3mo el elemento encaja y se ajusta a la p\u00e1gina.<\/p>\n\n\n\n<p>Como ejemplo, voy a modificar el contorno para que sea redondeado en lugar de rectangular, definiendo un radio de 30px al borde. A\u00f1ado estos cambios dentro de las etiquetas CSS &lt;style&gt;. Puedes comentar o eliminar estas l\u00edneas para ver la diferencia.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n#mapid{border-radius: 30px;}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"define-the-map-in-javascript\">Definir el mapa en javascript<\/h4>\n\n\n\n<p>Vamos a a\u00f1adir el objeto del mapa en s\u00ed. Para ello usamos las funciones de la librer\u00eda Leaflet (llamadas mediante L.). A\u00f1adimos esta funci\u00f3n dentro de las etiquetas de &lt;script&gt; ya que hacen uso de javascript.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Definir el objeto de mapa.<\/strong> A\u00f1adimos el mapa con la funci\u00f3n \"L.map\" y hacemos referencia al elemento \"mapid\". Luego definimos la vista y zoom iniciales con \"L.setView\".<br><br>Voy a centrar la vista aproximadamente en Miami (haciendo una b\u00fasqueda en internet puedes encontrar una latitud y longitud aproximadas: 25.75, -80.2).<br>El nivel de zoom lo defino en 12 para que est\u00e9 bastante cerca. Valores altos har\u00e1n m\u00e1s zoom y valores bajos har\u00e1n menos zoom.<br><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var map = L.map('mapid').setView(&#91;25.75, -80.2], 12);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Definir la capa base.<\/strong> Los mapas web hacen uso de im\u00e1genes teseladas que se van cargando de forma din\u00e1mica a medida que nos movemos por el mapa. Podemos usar la funci\u00f3n \"L.tileLayer\" con cualquiera los servicios referidos en <a rel=\"noreferrer noopener\" href=\"https:\/\/mappinggis.com\/2018\/03\/como-anadir-mapas-base-en-qgis-3-0-openstreetmap-google-carto-stamen\/#Anadir_capas_de_OpenStreetMap_en_QGIS_3x\" target=\"_blank\">este post<\/a>, incluyendo Open Street Maps (OSM), Google Maps, y ESRI. Usaremos OSM para este ejemplo:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>L.tileLayer(\"http:\/\/a.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\/*no properties*\/\n}).addTo(map);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Por \u00faltimo, vamos a a\u00f1adir un <strong>marcador<\/strong>, una funcionalidad b\u00e1sica que querr\u00e1s en muchos mapas. Definiremos el texto dentro de \"bindPopup\", pudiendo formatearlo con etiquetas HTML. La funci\u00f3n \"openPopup\" muestra la etiqueta del marcador directamente al inicio.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/marcador\nvar marker = L.marker(&#91;25.77, -80.13]).addTo(map);\n\n\/\/etiqueta\nmarker.bindPopup(\"&lt;b>I'm in&lt;\/b>&lt;br>Miami Beach!\").openPopup();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-result\">Resultado final.<\/h2>\n\n\n\n<p>El siguiente rect\u00e1ngulo es un bloque HTML insertado en wordpress con todo el c\u00f3digo que hemos ido desarrollando. Deber\u00eda mostrar el mapa base OSM centrado en Miami con un marcador en Miami Beach y con el borde redondeado.<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n  crossorigin=\"\"\/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n  crossorigin=\"\"><\/script>\n<\/head>\n<style>\n#mapid{border-radius: 30px;}\n<\/style>\n<body>\n\t<div id=\"mapid\" style=\"height:500px;\"><\/div>\n<\/body>\n<script>\n\/\/leaflet map object\nvar map = L.map('mapid').setView([25.75, -80.2], 12);\n\/\/tiled basemap object\nL.tileLayer(\"http:\/\/a.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\/*no properties*\/\n}).addTo(map);\n\/\/marker object\nvar marker = L.marker([25.77, -80.13]).addTo(map);\n\/\/pop up object attached to marker object\nmarker.bindPopup(\"<b>I'm in<\/b><br>Miami Beach!\").openPopup();\n<\/script>\n<\/html>\n\n\n\n<p><br>El c\u00f3digo exacto que contiene ese bloque HTML es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n  crossorigin=\"\"\/&gt;\n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n  crossorigin=\"\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;style&gt;\n#mapid{border-radius: 30px;}\n&lt;\/style&gt;\n\n&lt;body&gt;\n\t&lt;div id=\"mapid\" style=\"height:500px;\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n\n&lt;script&gt;\n\n\/\/leaflet map object\nvar map = L.map('mapid').setView(&#91;25.75, -80.2], 12);\n\n\/\/tiled basemap object\nvar googleMaps = L.tileLayer(\"http:\/\/a.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\/*no properties*\/\n}).addTo(map);\n\n\/\/marker object\nvar marker = L.marker(&#91;25.77, -80.13]).addTo(map);\n\n\/\/pop up object attached to marker object\nmarker.bindPopup(\"&lt;b&gt;I'm in&lt;\/b&gt;&lt;br&gt;Miami Beach!\").openPopup();\n\n\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Puedes copiar y pegar este c\u00f3digo en un fichero de texto con extensi\u00f3n .html y abrirlo en tu navegador.<\/i><\/p>\n\n\n\n<p>Y con esto.. a jugar! No te pierdas la <a href=\"https:\/\/leafletjs.com\/reference-1.7.1.html\">documentaci\u00f3n<\/a> y los <a href=\"https:\/\/leafletjs.com\/plugins.html\">plugins<\/a> en la web de Leaflet. Hay cantidad de caracter\u00edsticas incre\u00edbles para a\u00f1adir a tu mapa.<\/p>\n\n\n\n<p>Aqu\u00ed te indico las m\u00e1s interesantes que he probado:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/leafletjs.com\/reference-1.7.1.html#control-zoom\">Controles<\/a> del mapa: zoom, capas, atribuci\u00f3n.<\/li><li>Servicios de teselado <a href=\"https:\/\/leafletjs.com\/reference-1.7.1.html#tilelayer-wms\">WMS<\/a> para a\u00f1adir distintos mapas base online.<\/li><li>Plugins de <a href=\"https:\/\/github.com\/makinacorpus\/Leaflet.GeometryUtil\">geoprocesamiento<\/a>, <a href=\"https:\/\/github.com\/perliedman\/leaflet-control-geocoder\">geocodificaci\u00f3n<\/a> y <a href=\"http:\/\/www.liedman.net\/leaflet-routing-machine\/\">enrutamiento<\/a>.<\/li><li>Visualizaci\u00f3n de <a href=\"https:\/\/github.com\/MrMufflon\/Leaflet.Coordinates\">coordenadas<\/a> y <a href=\"https:\/\/github.com\/jjimenezshaw\/Leaflet.UTM\">conversi\u00f3n<\/a> (latlon o UTM mostradas en el mapa).<\/li><li><a href=\"https:\/\/github.com\/geoman-io\/leaflet-geoman\">Herramientas<\/a> de geometr\u00eda y dibujo.<\/li><li>Compatibilidad con terceros como <a href=\"https:\/\/turfjs.org\/\">TurfJS<\/a> o <a href=\"http:\/\/esri.github.io\/esri-leaflet\/\">ESRI<\/a>.<\/li><\/ul>\n\n\n\n<p>Espero que hagas buen uso de \u00e9l, y que puedas promover su uso y su desarrollo. Al fin y al cabo, el software libre es de todos! \u00a1Hasta la pr\u00f3xima! \ud83d\udc4b<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"references\">Referencias<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Leaflet JS Gu\u00eda de Inicio R\u00e1pido:<br><a href=\"https:\/\/leafletjs.com\/examples\/quick-start\/\">https:\/\/leafletjs.com\/examples\/quick-start\/<\/a><\/li><li>Enlaces a servicios de teselado:<br><a href=\"https:\/\/mappinggis.com\/2018\/03\/como-anadir-mapas-base-en-qgis-3-0-openstreetmap-google-carto-stamen\/\">https:\/\/mappinggis.com\/2018\/03\/como-anadir-mapas-base-en-qgis-3--openstreetmap-google-carto-stamen\/<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Leaflet JS es uno de mis mayores descubrimientos de los \u00faltimos a\u00f1os. Es una de las librer\u00edas de mapas web m\u00e1s poderosas que encontrar\u00e1s, compitiendo con la API de Google, ESRI o Mapbox gracias a su gran comunidad y los geniales plugins que van desarrollando. El sofware libre se impone de nuevo \ud83e\udd1f (Encuentra el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":791,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-map-es","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":7,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"predecessor-version":[{"id":1436,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/862\/revisions\/1436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}