Ene 032015
 
Artículo Javascript

En otros artículos de este blog hemos examinado la manera de incorporar un mapa interactivo a una página web, utilizando el API de Google Maps o bien el API de HERE Maps.

Leaflet es una alternativa de código abierto perfectamente equiparable para poner un mapa interactivo en nuestra página, al que podemos añadir nuestras propias capas de información, ajustar su diseño, y adaptar a nuestras necesidades.

En este artículo ofrecemos una introducción a las características principales de Leaflet.

1. Cargar la librería en la página

Vamos a crear una página de demostración “ejemplo-leaflet.html”. En primer lugar, añadimos a la sección <head> las referencias a la hoja de estilo CSS y al fichero javascript que contiene la librería. Estos ficheros están accesibles desde el CDN de leaflet:

<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        ...

2. Insertar el elemento contenedor del mapa

A continuación, insertamos, en la sección <body> de la página, un elemento <div> que contendrá el mapa:

<body>
    <div id="mapa"></div>
    ....

Es necesario definir la altura del elemento <div> que va a contener mapa. La manera más habitual de definir la altura es añadiendo una regla de estilo CSS. Por ejemplo:

<style>
#mapa { height: 200px; }
</style>

3. Inicializar el mapa

Por último, realizamos la llamada a leaflet que crea el mapa en el interior del div “mapa”. La manera más sencilla de especificar el mapa deseado es indicando las coordenadas (latitud,longitud) del punto central, y la escala inicial:

<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
</script>

4. Asociar un proveedor de mapas

Leaflet es una librería de funciones javascript que permiten visualizar un mapa, pero las imágenes que componen el mapa propiamente dicho no son suministradas por leaflet, sino por un proveedor de mapas que debemos asociar al objeto javascript que crea leaflet. Hay distintos proveedores de mapas que podemos utilizar con leaflet. Por ejemplo, para asociar el servidor de mapas de openstreetmap, hacemos una llamada a tileLayer() de la forma:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ' +
                 'contributors, ' +
                 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
}).addTo(mapa);

Y con esto obtenemos el siguiente resultado:

5. Otros proveedores de mapas

Leaflet puede hacer uso de mapas proporcionados por un gran número de proveedores de mapas. Entre los más comunes están:

  • openStreetMap – Los servidores de mapas de OpenStreetmap son gratuitos, pero en su política de uso se prohíbe el uso masivo de los mismos. En su lugar se recomiendan una serie de servidores alternativos (MapQuest, CartoDB,…), tanto gratuitos como de pago.
  • openCycleMap – openCycleMap ofrece un servicio de mapas gratuito. En su política de uso, se indica que si el uso del servicio resulta ser elevado, se pondrán en contacto con el usuario para acordar un plan de servicio con el que contribuir a los costes de mantenimiento.
  • mapQuest – mapQuest ofrece dos tipos de servidores de mapas: mapQuest-Osm y mapQuest-Aerial. El uso es gratuito. En la página que describe el servicio de mapQuest, solicitan que si el uso previsto supera las 4000 solicitudes por segundo, el usuario se ponga en contacto con ellos.
  • mapbox – El uso de mapBox require obtener una clave de uso (mapID), y es gratuito hasta los 3000 mapViews al mes (1 mapView = 15 tiles). Para volúmenes superiores, se pueden contratar distintos planes de servicio, desde el Básico (5$/mes, 10,000 mapViews/mes) hasta el premium (499$/mes, 1,000,000 mapViews/mes)
  • cloudmade – Cloudmade sólo ofrece servicio de mapas de pago, para usuarios empresariales de mediano o gran tamaño, con precios a partir de 1,500$ mensuales por 50 millones de transacciones

En github.com podemos encontrar la definición de una clase TileLayer.Common.js que simplifica el uso de estos proveedores.

Referencias

 Publicado por en 8:31 am

 Deja un comentario

(requerido)

(requerido)