40.6 Mapas con Leaflet

Leaflet es una biblioteca JavaScript de código abierto utilizada para crear aplicaciones de mapas web. Lanzada por primera vez en 2011. Es compatible con la mayoría de plataformas móviles y de escritorio, y soporta HTML5 y CSS3.

Leaflet permite a los desarrolladores sin experiencia en SIG mostrar fácilmente “mapas web en mosaico” (unión de mapas a manera de mosaico) alojados en un servidor público, con superposiciones opcionales, también en mosaico. Puede cargar datos, de atributos, desde archivos GeoJSON, aplicarles estilos y crear capas interactivas, como marcadores con ventanas emergentes al hacer clic.

40.6.1 Introduccion

Los mapas son el medio más usual de representar tipos de datos espaciales.

Folium es un modulo para la visualización de mapas que trabaja por encima de la librería Leaflet (Leaflet.js)

Se utilizará una base de datos con coordenadas de los establecimientos educativos proporcionados por el Municipio de Envigado, Antioquia, por medio de la plataforma de Datos Abiertos Colombia.

Generar un mapa del mundo es fácil. Se crea un objeto tipo mapa. Como se observará, se puede realizar zoom a un gran nivel de detalle. Es un tipo de interactividad muy básico, pero muy potente para mapas.

Intente hallar el municipio de Envigado.

Por supuesto, se pueden definir las coordenadas centrales del mapa y el nivel de zoom inicial.

Se puede jugar a iniciar con un mejor nivel de zoom:

El mapa que presenta es una representación visual de las fotografías cartográficas satelitales que se han procesado para resaltar lo que interesa a cada nivel de zoom. El fondo tiene tonos poco saturados para servir de base.

Puede haber otro tipo de mapas base.

• Mapbox Bright
• Mapbox Control Room
• Stamen (incl. Terrain, Toner, and Watercolor)
• Cloudmade
• Mapbox
• CartoDB (incl. positron and dark_matter)

De usarlos, sólo posible en opción paga, debe añadir la atribución: “Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.”.

40.6.2 Mapas “Stamen Terrain”

Con sombreado de colinas y colores naturales de la vegetación. Estos mapas muestran etiquetado avanzado y generalización del trazado de las carreteras de doble calzada.

De usarse, sólo posible en opción paga, también se debe añadir la atribución: “Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.”

40.6.3 Mapas “Stamen Watercolor”

Con reminiscencias de mapa dibujado con acuarela, aplica un efecto de textura y bordes orgánicos para añadir un toque cálido a cualquier mapa. Carece de cualquier etiqueta.

De usarse, sólo posible en opción paga, también se debe añadir la atribución: “Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.”.

40.6.4 Mapas con “marcadores”

Se descarga una base de datos con información acerca de los establecimientos educativos del municipio de Envigado.

colegios = pd.read_csv(data_dir/'IE_Envigado.csv')

Se pasan a forma título los nombres de las variables:

colegios.rename(columns=str.lower, inplace=True);
colegios.columns = colegios.columns.str.replace(' ', '');
colegios.head();

Obsérvese un detalle:

colegios[['coordenadas']].head();

Se superpondrán “puntos” en las ubicaciones de los colegios sobre el mapa de Envigado.

df = colegios.coordenadas.str.strip("()").str.split(", ")
df = df.apply(pd.Series).astype(float).rename(columns={0: "latitud", 1: "longitud"})
# df.head()
df.latitud.values

colegios = colegios.assign(latitud=df.latitud.values, longitud=df.longitud.values)
colegios.columns

envigado = folium.Map(location=[6.1534647, -75.5847027], zoom_start=14);
envigado.save('envigado.html');
instituciones = folium.map.FeatureGroup();

for lat, lng in zip(colegios.latitud, colegios.longitud):
      marker = folium.features.CircleMarker([lat, lng],
                                           radius=5, 
                                           color='yellow',
                                           fill=True,
                                           fill_color='blue',
                                           fill_opacity=0.6);
      instituciones.add_child(marker);

envigado.add_child(instituciones);

Propio de Leaflet, se pueden añadir los denominados pop-up que se muestran cuando se hace clic con el cursor encima de la marca.

envigado = folium.Map(location=[6.1534647, -75.5847027], zoom_start=14);
instituciones = folium.map.FeatureGroup();
for i in range(0,len(colegios)):
   folium.Marker(location=[colegios.iloc[i]['latitud'], 
                           colegios.iloc[i]['longitud']],
                 popup=colegios.iloc[i]['nombreie']).add_to(envigado);
envigado.add_child(instituciones);

Tal vez se vean aglomerados algunos marcadores.

Una opción es dejar marcadores circulares en vez de pop-ups. Presentan la información al seleccionarlos con un clic:

envigado = folium.Map(location=[6.1534647, -75.5847027], zoom_start=14);

for lat, lng, label in zip(colegios.latitud, colegios.longitud, colegios.nombreie):
    folium.features.CircleMarker(
        [lat, lng],
        radius=5, 
        color='yellow',
        fill=True,
        popup=label,
        fill_color='blue',
        fill_opacity=0.6).add_to(envigado);
envigado.save('envigado.html');

La otra opción es agrupar marcadores en conglomerados que se separan al realizar zoom.

from folium import plugins;
envigado = folium.Map(location=[6.1534647, -75.5847027], zoom_start=14);
instituciones = plugins.MarkerCluster().add_to(envigado);
# loop through the dataframe and add each data point to the mark cluster
for lat, lng, label, in zip(colegios.latitud, colegios.longitud, colegios.nombreie):
    folium.Marker(location=[lat, lng],
                  icon=None,
                  popup=label).add_to(instituciones);
envigado.save('envigado.html');