Curso sobre creación y desarrollo de mapas – Parte 5: Agregar una leyenda

Continuamos con el curso de mapas. En esta quinta parte estaré mostrando como usar una leyenda en un mapa agregandole estilos a ella. Las leyendas son muy útiles para muchos casos, donde podes cuantificar y mostrar resultados. Como por ejemplo la cantidad de habitantes por barrio de una ciudad.

Obs:

  • Los datos son de la Dirección General de Estadísticas, Encuestas y Censos (DGEEC) del año 2012 de Paraguay.

En este ejemplo solo usamos datos de la DGEEC. Se darán cuenta con este ejemplo que no solamente se necesita usar datos del proyecto OSM, si no cualquier dato que tenga referencia geográfica.

En muchos casos conviene tener un GeoJSON estático que traer la información de una base de datos o un GeoJSON de forma dinámica, porque con el tiempo no cambia y hacerlo tiene un costo demás al hacer una consulta.

Por ejemplo la cantidad de habitantes de un barrio de un determinado tiempo no cambia, ademas de los limites territoriales de los barrios.

En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_leyenda.

Ejemplo leyenda
Ejemplo leyenda

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificación del index.html
Modificación del index.html

Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_leyenda/

Mapa primera fase
Mapa primera fase

Muestra un mapa de Asunción usando datos del proyecto OSM. Habíamos dicho que en este ejemplo no estaríamos usando datos OSM, si no datos de DGEEC.

Los datos de los barrios saque de la información que estaba disponible en el sitio DGEEC y convertí en un GeoJSON con la herramienta QGIS.

Volvemos a entrar a nuestro editor y borramos el archivo MapaOSM.js. Luego creamos en el mismo lugar un archivo llamado Mapa.js. Ahora agregamos lo siguiente:

// Variables y objetos globales.
var mapa = null;

// Carga el mapa.
function cargarMapa(){
// Zoom inicial del mapa de todos los barrios de Asuncion.
var zoom = 10;
mapa = L.map(‘map-container’, {
    zoom: zoom,
    attributionControl: false
});

// Attribuciones.
var creditos = L.control.attribution().addTo(mapa);
creditos.addAttribution(“Datos <a href=’http://datos.gov.py/dataset/barrios-y-localidades’>DGEEC</a>”);
}

Si observan le damos la atribución al DGEEC.

Archivo Mapa.js
Archivo Mapa.js

Cambiamos el archivo MapaOSM.js por Mapa.js

Agregamos en el index.html el nuevo archivo JS
Agregamos en el index.html el nuevo archivo JS

Refrescamos el navegador.

Mapa vacio
Mapa vacío

Pueden visualizar como no muestra informacion.

Necesitamos los datos y pueden descargar de este link. Creen una carpeta datos como se muestra en la imagen.

Datos
Datos

Vamos a traer esos datos con una llamada AJAX, que resolveremos usando JQuery. Pueden descargar el archivo JQuery de este link y crear una carpeta como muestro en la imagen de abajo.

JQuery
JQuery

Ahora agregamos en el index.html el archivo JQuery.

Agregamos en el index html el archivo JQuery.js
Agregamos en el index html el archivo JQuery.js

Copiamos de este link y agregamos en el archivo Mapa.js

Agregamos la capa vectorial con datos GeoJSON
Agregamos la capa vectorial con datos GeoJSON

Refrescamos el navegador.

Mapa con datos GeoJSON y sin estilos
Mapa con datos GeoJSON y sin estilos

Muestra un mapa con datos GeoJSON, pero sin estilos.

Editamos el archivo Mapa.OSM dándole estilos. Primero creamos una función para dar colores dependiendo de la cantidad de habitantes.
// Funcion que devuelve el color dependiendo
// de la cantidad de viviendas.
function getColor(cant_viviendas) {
    return cant_viviendas > 5000 ? '#800026' :
      cant_viviendas > 4000 ? '#BD0026' :
      cant_viviendas > 3000 ? '#E31A1C' :
      cant_viviendas > 2000 ? '#FC4E2A' :
      cant_viviendas > 1000 ? '#FD8D3C' :
      cant_viviendas > 500 ? '#FEB24C' :
      cant_viviendas > 50 ? '#FED976' :
      '#FED976';
}

GetColor
GetColor

Ahora creamos una función que le va a dar estilos al barrio.
// Funcion que devuelve el estilo de un barrio.
function estilo_barrios(feature){
    return {
      fillColor: getColor(feature.properties.cant_viv),
      weight: 2,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
   };
}

estilo_barrios
estilo_barrios

Ahora agregamos los estilos en la capa vectorial.
style: estilo_barrios

Agregar estilos en la capa vectorial
Agregar estilos en la capa vectorial

Refrescamos el navegador.

Mapa con datos GeoJSON y con estilos
Mapa con datos GeoJSON y con estilos

Pueden observar como cambia la presentación de un mapa con estilos.

Editamos de nuevo el archivo Mapa.js, agregando un popup al hacer click en un barrio.
// Muestra un pop por cada barrio.
function popup(feature, layer) {
    if (feature.properties && feature.properties.nombre) {
        var info = feature.properties.nombre + " (" +
        feature.properties.cant_viv + ")";
        layer.bindPopup(info);
    }else if(feature){
         layer.bindPopup(feature);
    }
}

Funcion popup
Funcion popup

Agregamos dentro de la capa vectorial.
onEachFeature: popup

Agregar el popup dentro de la capa vectorial
Agregar el popup dentro de la capa vectorial

Refrescamos el navegador.

Mapa mostrando información por cada barrio
Mapa mostrando información por cada barrio

Al hacer click dentro de un barrio, te muestra un popup con el nombre del barrio y su cantidad de habitantes.

Ahora agregamos la leyenda. Editamos el archivo. Dentro de la capa vectorial agregamos lo siguiente:
// Leyenda.
var leyenda = L.control({position: 'bottomright'});
leyenda.onAdd = function (mapa) {
    var div = L.DomUtil.create('div', 'info leyenda');
    var grades = [0, 50, 500, 1000, 2000, 3000, 4000, 5000];
    var labels = [];
    var from;
    var to;
    for (var i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];
        div.innerHTML +=
          '<i style="background:' + getColor(from + 1) + '"></i> ' +
          from + (to ? '&ndash;' + to : '+') + '<p>';
    }
    return div;
};
leyenda.addTo(mapa);

Agregar leyenda
Agregar leyenda

Ahora agregamos algunos estilos CSS en el archivo estilos.css
/* Info */
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

/* Leyenda */
.leyenda {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.leyenda i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

Estilos css
Estilos css

Refrescamos el navegador.

Mapa con leyenda
Mapa con leyenda

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo de leyenda
Código fuente: ejemplo_leyenda

(Visited 382 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*