Clever Geek Handbook

Cómo hacer un mapa interactivo usando Python y bibliotecas de código abierto

Hoy compartimos contigo una guía paso a paso para crear mapas interactivos para una aplicación web o blog. Marque este artículo como favorito. Si bien existe, por ejemplo, una biblioteca d3.js que puede crear mapas personalizados, existen algunas herramientas que son aún más simples. En esta publicación, veremos y trabajaremos con tres bibliotecas de Python de código abierto poderosas y fáciles de usar.





Cuando la documentación se atasca



Hace unos meses, quería crear un mapa interactivo para una aplicación web interesante que estábamos desarrollando. Pasé horas en Internet buscando la biblioteca perfecta para comenzar, pero fue muy difícil para mí mirar la documentación ya que no había una guía adecuada paso a paso para implementar y personalizar las imágenes según fuera necesario. Me hubiera gustado tener un manual que compare características y la implementación correcta junto con detalles sobre la personalización. Este artículo es un intento de escribir dicha guía.



El artículo continúa comparando implementaciones de un mapa de fondo interactivo (choropleth) usando tres bibliotecas populares disponibles para Python, y los detalles y personalización del resultado final.



  1. Altair — .
  2. Plotly — . Mapbox, .
  3. Folium — Leaflet — . , .




Un mapa de coropletas requiere dos tipos de datos en segundo plano, uno de los cuales son datos geoespaciales, límites geográficos para poblar el mapa (generalmente un archivo vectorial .shp(Shapefile) o GeoJSON) y dos puntos de datos en cada cuadrado del mapa para codificar el mapa con colores según los datos en sí.



La biblioteca de Geo Pandas es útil cuando necesita obtener datos en el formato requerido. El ejemplo utiliza el archivo GeoJSON de los estados de la India. Puede comenzar con cualquier Shapefile público o GeoJSON.



Altair





Altair es una biblioteca de renderizado de Python basada en Vega . La coropleta se implementa con un esfuerzo mínimo e incluye elementos interactivos: resaltado, información sobre herramientas, etc.



Altair es compatible con páginas rápidas . Puede crear publicaciones de blog simples en minutos simplemente convirtiendo archivos de Jupyter Notebook con un mínimo de código. Consulte el archivo Léame en GitHub.



Fragmento de código: 



# Importing required Libraries
import geopandas as gpd
import json
import altair as alt
import pandas as pd


Leemos el Shapefile como un marco de GeoPandas: 



gdf = gpd.read_file('states_india.shp')


El marco se ve así:







Crea una capa base y una capa coropleta: 



# Creating configs for color,selection,hovering
multi = alt.selection_multi(fields=['count','state'], bind='legend')
color = alt.condition(multi,
                  alt.Color('count', type='ordinal',
                  scale=alt.Scale(scheme='yellowgreenblue')),
                  alt.value('lightgray'))
hover = alt.selection(type='single', on='mouseover', nearest=True,
                      fields=['x', 'y'])
#Creating an altair map layer
choro = alt.Chart(gdf).mark_geoshape(
    stroke='black'
).encode( 
    color=color, 
    tooltip=['state','count']
).add_selection(
        multi
    ).properties( 
    width=650,
    height=800
)
# Legend
c1 = alt.layer(choro).configure_legend(
    orient = 'bottom-right',
    direction = 'horizontal',
    padding = 10,
    rowPadding = 15
)
#Adding Labels
labels = alt.Chart(gdf).mark_text().encode(
    longitude='x',
    latitude='y',
    text='count',
    size=alt.value(8),
    opacity=alt.value(0.6)
)
c2 = alt.Chart(gdf).mark_geoshape(
    stroke='black'
).encode( 
    color=color, 
    tooltip=['state','count']
).add_selection(
        hover
    ).project(
    scale=100, 
)
(c1+labels).configure_view(strokeWidth=0)


El código anterior debe representar un mapa interactivo con la función de mostrar información sobre herramientas y resaltar en la selección (clic).



Pros:



  • Implementación simple y rápida. Incluye un conjunto predefinido de funciones para acelerar su trabajo.
  • Compatible con Fastpages


Desventajas:



  • Pocas opciones de personalización e interactividad limitada.
  • No es posible utilizar partes estilizadas externas del mapa como OSM, Mapbox, etc.
  • La API está mal documentada.


Implementación con Plotly





La biblioteca de trazado de Plotly Python genera mapas listos para publicar con muchas características interactivas y personalizables.



Hay disponibles configuraciones de mapas base personalizados de Mapbox, OSM y otras opciones de estilo, así como una implementación simple con Plotly Express y una amplia documentación. Esto convierte a Plotly en una de las opciones preferidas para crear mapas interactivos.



Fragmento de código: 



# Importing required libraries

from plotly.graph_objs import Scatter, Figure, Layout
import plotly
import plotly.graph_objs as go
import json
import numpy as np
import geopandas as gpd


Importando Shapefile: 



gdf = gpd.read_file('states_india.shp')
with open('states_india_1.json') as response:
 india = json.load(response)


Creando una capa base y agregando partes del mapa: 



fig = go.Figure(go.Choroplethmapbox(geojson=india, locations=gdf['st_nm'], z=gdf['state_code'],featureidkey="properties.st_nm",colorscale="Viridis", zmin=0, zmax=25,marker_opacity=0.5, marker_line_width=1))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_zoom=3.5,mapbox_center = {"lat":23.537876 , "lon": 78.292142} ) 
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()


El código anterior debería representar un mapa interactivo con visualización de información sobre herramientas y función de zoom. Esta implementación incluye muchas otras características, que se describen con más detalle aquí .



Pros:



  • Implementación muy simple con bibliotecas de gráficos y Plotly Express. Existe una extensa documentación.
  • Muchas configuraciones y opciones de estilo personalizables.
  • Compatible con Dash y otras opciones para incrustar fragmentos en aplicaciones web externas.


Desventajas:



  • No hay forma de agregar ventanas emergentes y otros elementos interactivos más allá de las opciones predefinidas.
  • Puede requerir acceso a token para trabajar con varios estilos externos. Control limitado sobre los límites de escala y la interactividad relacionada.


Implementación con Folium





Folium combina la facilidad de uso del ecosistema Python con las fortalezas de mapeo de la biblioteca leaflet.js. Le permite renderizar mapas de coropletas interactivos, receptivos y personalizables, así como transferir visualizaciones HTML, ráster y vectoriales ricas como marcadores en el mapa.



La biblioteca tiene varios conjuntos integrados de mosaicos de mapas de OpenStreetMap, Mapbox y Stamen, y también admite conjuntos personalizados a través de las API Mapbox o Cloudmade. Se admiten imágenes, videos, GeoJSON y TopoJSON.



Fragmento de código: 



# Importing required Libraries
import geopandas as gpd
import pandas as pd
import folium
import branca
import requests
import json
from folium.features import GeoJson, GeoJsonTooltip, GeoJsonPopup


Importando Shapefile: 



gdf = gpd.read_file('states_india.shp')
with open('states_india_1.json') as response:
    india = json.load(response)
#Creating a custom tile (optional)
import branca
# Create a white image of 4 pixels, and embed it in a url.
white_tile = branca.utilities.image_to_url([[1, 1], [1, 1]])


Adición de capas base y capas de coropletas: 



#Base layer
f = folium.Figure(width=680, height=750)
m = folium.Map([23.53, 78.3], maxZoom=6,minZoom=4.8,zoom_control=True,zoom_start=5,
               scrollWheelZoom=True,maxBounds=[[40, 68],[6, 97]],tiles=white_tile,attr='white tile',
               dragging=True).add_to(f)
#Add layers for Popup and Tooltips
popup = GeoJsonPopup(
    fields=['st_nm','cartodb_id'],
    aliases=['State',"Data points"], 
    localize=True,
    labels=True,
    style="background-color: yellow;",
)
tooltip = GeoJsonTooltip(
    fields=['st_nm','cartodb_id'],
    aliases=['State',"Data points"],
    localize=True,
    sticky=False,
    labels=True,
    style="""
        background-color: #F0EFEF;
        border: 1px solid black;
        border-radius: 3px;
        box-shadow: 3px;
    """,
    max_width=800,
)
# Add choropleth layer
g = folium.Choropleth(
    geo_data=india,
    data=gdf,
    columns=['st_nm', 'cartodb_id'],
    key_on='properties.st_nm',
    fill_color='YlGn',
    fill_opacity=0.7,
    line_opacity=0.4,
    legend_name='Data Points',
    highlight=True,
    
).add_to(m)
folium.GeoJson(
    india,
    style_function=lambda feature: {
        'fillColor': '#ffff00',
        'color': 'black',
        'weight': 0.2,
        'dashArray': '5, 5'
    },
    tooltip=tooltip,
    popup=popup).add_to(g)
f


El código anterior debe mostrar un mapa de coropletas interactivo con una sugerencia de desplazamiento, haga clic para acercar y una ventana emergente personalizada al hacer clic.



Pros:



  • Varias configuraciones y opciones de estilo personalizables junto con características interactivas únicas como ventanas emergentes / partes / fondos de mapas personalizados y zoom de clic para hacer zoom.
  • Opción para transferir visualizaciones vectoriales, ráster, HTML como marcadores en el mapa.
  • La opción de mostrar el mapa como HTML y otras opciones para incrustar el fragmento en aplicaciones web externas.
  • Una buena cantidad de documentación para explorar todas las funciones disponibles.


Desventajas:



  • Depende de varias bibliotecas.


Conclusión



Estas tres herramientas le permiten crear mapas interactivos personalizados para sus sitios web sin muchos problemas.



Estimados lectores, ¿alguna vez hicieron mapas tan interactivos para sus proyectos?



imagen

Puede obtener una profesión demandada desde cero o subir de nivel en habilidades y salario tomando cursos en línea de SkillFactory:





E






More articles:


All Articles