Capas base de un mapa con Leaflet.js

Referencia de la API

Uso de TileLayer para cargar la capa base de nuestro mapa.

Ejemplo de uso:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);

Por un lado está la URL template y por otro lado, las opciones del tileLayer que será evaluadas.

Sintaxis

L.tilelayer( urlTemplate, <TileLayer options> options?)

Opciones

Podemos definir un zoom máximo y un zoom mínimo (minZoom, maxZoom), entre 0 y 18 (siendo 18 el valor máximo de zoom).

Ejemplos

Openstreetmap

  
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
  maxZoom: 18
}).addTo(mymap);

Mapbox

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data © OpenStreetMap contributors, ' +
    'CC-BY-SA, ' +
    'Imagery © Mapbox',
  id: 'mapbox.light'
}).addTo(mymap);

---

Leaflet-providers

Puedes entrar en esta web para descargarte estos códigos y ver una preview:

http://leaflet-extras.github.io/leaflet-providers/preview/index.html

También tienes en Leaflet-extras el plugin Leaflet-providers

Te bajas el plugin, lo descomprimes, el fichero importante es:

leaflet-providers.js

Tendrás que incluirlo en tu web:

/js/leaflet-providers.js

Y el uso será el siguiente:

L.tileLayer.provider(‘capabase‘).addTo(mymap);

Por ejemplo:

L.tileLayer.provider(‘OpenMapSurfer.Roads’).addTo(mymap);

o

  L.tileLayer.provider(‘OpenStreetMap.Mapnik’).addTo(mymap);

Así, tenemos algunos identificadores como:

• OpenStreetMap.Mapnik
• OpenStreetMap.BlackAndWhite
• OpenTopoMap
• Stamen.Terrain
• …

.

 

 

Mi primer mapa con Leaflet

En primer lugar, entro en la web de descarga de Leaflet:

http://leafletjs.com/download.html

Y me descargo la versión estable (en este caso era la Leaflet 1.0.3). Descomprimo el zip en mi directorio de trabajo (en una carpeta llamada js, lógicamente hay que tenerlo todo ordenado).

Si no queremos hacer esto, podemos directamente:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js">script>

Si miramos lo que hemos descargado, vemos que tenemos un fichero con Leaflet minimizado (leaflet.js), otro fichero con las css (leaflet.css), una carpeta con imágenes, un fichero js con el fuente legible de Leaflet (leaflet-src.js).

Por lo tanto, en nuestro head tendremos que poner:

 
 

En el body de nuestra página deberemos poner un DIV con ID sobre el que queramos poner un mapa:

 

Asegúrate que le pones altura en los CSS a este DIV:

     #mimapaleaflet{
           height:180px;
     }

Después del código que inserta el DIV, insertaremos un script javascript para cargar una capa base:

var mymap = L.map('mimapaleaflet').setView([51.505, -0.09], 13);

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.

A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);

Añadimos un control de escala:

     L.control.scale().addTo(mymap);

Y un marcador (un POI), que se podrá mover al establecerlo como draggable.

     L.marker([51.50, -0.071],{draggable: true}).addTo(mymap);

El resultado es algo así:

Añadir un popup:

Es simple, únicamente hay que añadir a la sentencia de creación del marcador:

     .bindPopup(«<b>Hello world!</b><br>I am a popup.»);

Con esto añadimos un popup que, aparece al hacer clic sobre el marcador y desaparece al hacer clic sobre otro marcador.

.

Extrayendo texto de PDFs e Imágenes

En esta entrada voy a recopilar distintas informaciones sobre herramientas para poder extraer texto de PDFs (aunque estén bloqueados).

En primer lugar la página: http://www.datasciencetoolkit.org/ En esta página se pueden utilizar distintas APIs para realizar geocodificaciones, pasar de direcciones a coordenadas, etc. Pero lo que interesa es que vía web puedes subir un fichero PDF y te devolverá el texto.

Con http://www.cometdocs.com/ puedes hacer algo parecido. Subes un fichero PDF y te lo guarda en el formato que quieras.

Tabula.

http://tabula.nerdpower.org/ Este software que te puedes descargar e instalar va a permitirte extraer tablas de información de PDFs.

Un artículo de Escuela de Datos sobre cómo obtener datos de los PDFs.

http://es.schoolofdata.org/obteniendo-datos-de-los-pdfs/

Lo siguiente no es referido a los PDFs pero debería hacerse cuando abres los datos de un PDF.

http://datahub.io/ En esta página hay muchas bases de datos abiertas.

Añadir un gadget de Google Earth a una página web

Cómo utilizar el gadget para insertar un archivo KML (Embed KML)

1. Haz clic aquí para acceder al gadget para insertar un archivo KML (Embed KML).

http://www.gmodules.com/ig/creator?synd=open&url=http://dl.google.com/developers/maps/embedkmlgadget.xml

2. En Display Settings (Configuración de visualización), escribe un nombre para la ventana de inserción, define el tamaño de la ventana de Google Earth y elige un color para el marco.

3. En Gadget Settings (Configuración del gadget), introduce la dirección URL al archivo KMZ. En este ejemplo, introduce la siguiente URL:

http://earth.google.com/gallery/kmz/women_for_women.kmz

4 Selecciona un modo de vista (Google Earth o Google Maps) y elige cómo quieres que se cargue inicialmente el mapa insertado y si deseas que se vean edificios en 3D, carreteras, fronteras y otros datos.

5. Haz clic en el botón Get the Code (Obtener el código).

6. Selecciona el código de la parte inferior del gadget Embed KML y cópialo.

Subir un KML a Google Maps

Resulta que hoy he estado intentando subir un KML que he generado yo en Google Earth a Google Maps, para mostrar ese mapa en la web.

El KML de Google Earth tenía varias carpetas y dentro de cada una de ellas tenía varias polilíneas y varios POIs.

Intentaba Importar el KML a Google Maps y aparecía el mensajito de se está subiendo, no se preocupe, está tardando demasiado por su conexión…

Después de probar a quitar espacios en blanco y tildes al nombre del kml (que en otras ocasiones me ha pasado que me han dado problemas), seguía sucediendo lo mismo.

He optado por poner en una misma carpeta todas las polilíneas y puntos. Vuelvo a probar y todo funciona correctamente.