Tutorial: Creando un mapa interactivo con Folium en Python

Aplicación web creada en el navegador.

En este tutorial, se mostrará cómo crear un mapa interactivo utilizando Folium, una poderosa biblioteca de Python para visualización geoespacial. Además, se integrará este mapa en una aplicación web sencilla utilizando Flask, permitiendo que esté disponible en localhost:3000. A lo largo del tutorial, también se verá cómo obtener y mostrar puntos de interés dinámicamente en el mapa.

Al finalizar el tutorial se tendrá una aplicación funcional que combina la potencia de Folium y Flask, ideal para usar en proyectos de análisis de datos, presentaciones o dashboards interactivos.

Introducción a Folium

Folium es una biblioteca de Python diseñada para facilitar la creación de mapas interactivos. Se basa en la popular biblioteca de JavaScript Leaflet.js, conocida por su flexibilidad y capacidades avanzadas para trabajar con mapas web. Con Folium, se pueden crear mapas directamente desde Python y exportarlos a archivos HTML para visualizarlos en un navegador.

Características principales de Folium

Visualización de datos geoespaciales: Representa datos como puntos, líneas o polígonos sobre un mapa.
Compatibilidad con datos geográficos: Permite integrar datos de formatos como GeoJSON o shapefiles.
Interactividad: Agrega marcadores, ventanas emergentes, capas personalizadas y controles.
Personalización: Ofrece una amplia gama de estilos de mapas, desde simples hasta detallados.

Folium es ampliamente utilizado en proyectos de ciencia de datos, sistemas de información geográfica (GIS) y desarrollo web debido a su facilidad de uso y su capacidad de integración con otras bibliotecas de Python.

Configuración del entorno

Antes de poder crear un mapa interactivo con Folium es necesario tener instalado Python, la biblioteca y otras dependencias.

Instalación de Python

Folium es una biblioteca de Python, por lo que es imprescindible tener Python instalado en el sistema. Se puede descargar la última versión desde python.org.

Creación de un entorno virtual

Es recomendable trabajar en un entorno virtual para gestionar dependencias. Se puede crear uno nuevo para este proyecto usando venv:

python -m venv folium_env

Una vez creado el entorno virtual, se puede activar. Para hacerlo en Windows se debe ejecutar el siguiente comando:

folium_env\Scripts\activate

Por otro lado, en el caso de macOS o Linux es necesario ejecutar el comando:

source folium_env/bin/activate

Instalación de las dependencias

Una vez en el entorno, se puede instar Folium y Flask ejecutando:

pip install folium Flask

Creando un mapa interactivo con Folium

El primer paso para trabajar con Folium es crear un mapa básico. En el siguiente ejemplo, se generará un mapa centrado en Madrid, al cual luego se le podrán añadir elementos interactivos como marcadores y capas personalizadas.

Paso 1: Crear el mapa básico

Para empezar, se puede crear un script en Python que genera un mapa interactivo utilizando para ello la biblioteca Folium. Esto es lo que se muestre en el siguiente código, el cual se puede copiar en un archivo llamado mapa.py:

import folium

# Crear un mapa centrado en Madrid
mapa_madrid = folium.Map(location=[40.4168, -3.7038], zoom_start=13)

# Guardar el mapa en un archivo HTML
mapa_madrid.save("mapa_madrid.html")

print("Mapa generado: abre 'mapa_madrid.html' en tu navegador.")

Explicación del código:

folium.Map: Es la clase que se utiliza para crear un mapa interactivo. El parámetro location define las coordenadas centrales del mapa (en este caso, Madrid) y zoom_start establece el nivel de acercamiento inicial.
save(): Este método guarda el mapa generado en un archivo HTML que puede abrirse en cualquier navegador.

Paso 2: Ejecutar el script

Para generar el mapa, solemnes debe ejecutar el archivo anterior. Para ellos se puede abrir una terminal o consola y ejecuta el script con el siguiente comando:

python mapa.py

Esto creará un archivo llamado mapa_madrid.html en el mismo directorio donde guardaste el script.

Paso 3: Visualizar el mapa

Ahora se puede abrir el archivo mapa_madrid.html en cualquier navegador. Al hacer esto se debería ver un mapa interactivo centrado en Madrid que se puede acercar, alejar y mover. Como el que se muestra a continuación.

Añadiendo puntos de interés

Un mapa interactivo es más útil cuando incluye información relevante, como puntos de interés. En esta sección, se mostrará cómo añadir marcadores al mapa para destacar lugares importantes de Madrid.

Paso 1: Modificación del código

Para agregar los puntos es necesario actualizar el archivo mapa.py para incluir marcadores en el mapa:

import folium

# Crear un mapa centrado en Madrid
mapa_madrid = folium.Map(location=[40.4168, -3.7038], zoom_start=16)

# Lista de puntos de interés
puntos_interes = [
    {"nombre": "Puerta del Sol", "coordenadas": [40.416775, -3.703790]},
    {"nombre": "Plaza Mayor", "coordenadas": [40.415363, -3.707398]},
    {"nombre": "Museo del Prado", "coordenadas": [40.417080, -3.703612]}
]

# Añadir marcadores al mapa
for punto in puntos_interes:
    folium.Marker(
        location=punto["coordenadas"],
        popup=punto["nombre"],  # Información que aparece al hacer clic
        tooltip=f"Visita: {punto['nombre']}"  # Información al pasar el cursor
    ).add_to(mapa_madrid)

# Guardar el mapa en un archivo HTML
mapa_madrid.save("mapa_madrid_marcadores.html")

print("Mapa actualizado con puntos de interés. Abre 'mapa_madrid_marcadores.html' en tu navegador.")

Explicación del código:

Lista de puntos de interés: Se define una lista con el nombre y las coordenadas de cada uno del lugar que se desea destacar.
Marcadores:
- folium.Marker: Agrega un marcador al mapa en la ubicación especificada.
- popup: Muestra una ventana emergente con información cuando haces clic en el marcador.
- tooltip: Muestra un texto emergente al pasar el cursor sobre el marcador.
Bucle for: Recorremos la lista de puntos de interés y se agrega cada marcador al mapa con la información correspondiente.

Paso 2: Ejecutar el script de nuevo

Una vez aterrizado el script, se puede ejecutar de nuevo para tener el nuevo mapa con los puntos de interés. Estos se pueden hacer escribiendo el siguiente comando en la terminal o consola:

python mapa.py

Esto generará un nuevo archivo mapa_madrid.html que incluye los marcadores de los puntos de interés.

Paso 3: Visualizar el mapa actualizado

Si se abre el archivo, se puede ver el siguiente mapa.

Paso 4: Personalización de los marcadores

Es posible personalizar los marcadores con iconos y colores para destacar aún más los puntos de interés. Por ejemplo:

for punto in puntos_interes:
    folium.Marker(
        location=punto["coordenadas"],
        popup=punto["nombre"],
        tooltip=f"Visita: {punto['nombre']}",
        icon=folium.Icon(color="red", icon="info-sign")  # Cambiar el color e icono
    ).add_to(mapa_madrid)

Opciones de personalización:

Colores disponibles: 'red', 'blue', 'green', 'purple', 'orange', entre otros.
Iconos: Puedes usar cualquier icono disponible en FontAwesome o Leaflet.

Al modificar esta función, se genera un nuevo mapa, como el que se muestra a continuación.

Integrando Folium con Flask

Integrar Folium con Flask permite desplegar mapas interactivos en una aplicación web, lo que es ideal para proyectos más dinámicos y colaborativos. En esta sección, se creará una aplicación Flask que muestra un mapa con puntos de interés en Madrid directamente en el navegador.

Paso 1: Crear la aplicación Flask

Una versión básica de una aplicación Flash con Folium se muestra en el siguiente código, el cual se puede guardar en un archivo llamado app.py.

from flask import Flask, render_template_string
import folium

app = Flask(__name__)

# Función para crear el mapa con Folium
def crear_mapa():
    # Crear un mapa centrado en Madrid
    mapa = folium.Map(location=[40.4168, -3.7038], zoom_start=16)

    # Lista de puntos de interés
    puntos_interes = [
        {"nombre": "Puerta del Sol", "coordenadas": [40.416775, -3.703790]},
        {"nombre": "Plaza Mayor", "coordenadas": [40.415363, -3.707398]},
        {"nombre": "Museo del Prado", "coordenadas": [40.417080, -3.703612]}
    ]

    # Añadir marcadores al mapa
    for punto in puntos_interes:
        folium.Marker(
            location=punto["coordenadas"],
            popup=punto["nombre"],  # Ventana emergente al hacer clic
            tooltip=f"Visita: {punto['nombre']}"  # Texto emergente al pasar el cursor
        ).add_to(mapa)

    return mapa._repr_html_()  # Genera el HTML para incrustar el mapa

# Ruta principal de la aplicación
@app.route('/')
def index():
    mapa_html = crear_mapa()
    # Plantilla HTML básica para mostrar el mapa
    template = """
    <!DOCTYPE html>
    <html>
    <head>
        <title>Mapa de Puntos de Interés</title>
    </head>
    <body>
        <h1 style="text-align: center;">Mapa de Puntos de Interés en Madrid</h1>
        <div style="width: 80%; margin: auto; border: 2px solid #ccc; border-radius: 8px;">
            {{ mapa_html|safe }}
        </div>
    </body>
    </html>
    """
    return render_template_string(template, mapa_html=mapa_html)

if __name__ == '__main__':
    app.run(host='localhost', port=3000, debug=True)

Explicación del código:

crear_mapa: Esta función genera un mapa con marcadores de los puntos de interés utilizando Folium.
- mapa._repr_html_(): Convierte el mapa en código HTML para incrustarlo en la página web.
render_template_string: Renderiza una plantilla HTML directamente desde una cadena de texto, lo que simplifica el proceso para tutoriales básicos.
app.route('/'): Define la ruta principal (/) de la aplicación Flask, donde se mostrará el mapa.
HTML embebido: Se utiliza para integrar el mapa generado por Folium y dar estilo básico a la página.

Paso 2: Ejecutar la aplicación Flask

La aplicación se puede indicar ejecutando el siguiente comando en la terminal:

python app.py

Una vez hecho esto, se puede abrir un navegador e ir a http://localhost:3000. Al hacer esto se debería ver un mapa interactivo con los puntos de interés destacados.

Aplicación web creada en el navegador.

Conclusiones

En este tutorial se ha explicado cómo crear un mapa interactivo con Folium en Python e integrarlo en una aplicación web con Flask. Permitiendo mostrar información en mapas interactivos. A partir de estos conocimientos, se pueden desarrollar aplicaciones más complejas, visualizar diferentes tipos de datos geoespaciales y compartir los resultados en páginas web.