Clever Geek Handbook

Comment créer une carte interactive en utilisant Python et des bibliothèques open source

Aujourd'hui, nous partageons avec vous un guide étape par étape pour créer des cartes interactives pour une application Web ou un blog. Ajoutez simplement cet article à vos favoris. Bien qu'il existe, par exemple, une bibliothèque d3.js permettant de créer des cartes personnalisées, il existe quelques outils encore plus simples. Dans cet article, nous examinerons et travaillerons avec trois bibliothèques Python open source faciles à utiliser mais puissantes.





Lorsque la documentation est bloquée



Il y a quelques mois, je voulais créer une carte interactive pour une application web intéressante que nous développions. J'ai passé des heures sur Internet à chercher la bibliothèque parfaite pour commencer, mais il m'a été très difficile de parcourir la documentation car il n'y avait pas de guide pas à pas approprié pour implémenter et personnaliser les visuels selon les besoins. J'aurais aimé avoir un manuel comparant les fonctionnalités et une mise en œuvre correcte avec des détails sur la personnalisation. Cet article est une tentative d'écrire un tel guide.



L'article continue en comparant les implémentations d'une carte d'arrière-plan interactive (choropleth) en utilisant les trois bibliothèques populaires disponibles pour Python, ainsi que les détails et la personnalisation du résultat final.



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




Une carte chorus nécessite deux types de données en arrière-plan, dont l'un est des données géospatiales, des limites géographiques pour peupler la carte (généralement un fichier vectoriel .shp(Shapefile) ou GeoJSON) et deux points de données sur chaque carré de la carte pour coder en couleur la carte en fonction de les données elles-mêmes.



La bibliothèque Geo Pandas est utile lorsque vous avez besoin d'obtenir des données au format requis. L'exemple utilise le fichier GeoJSON des états indiens. Vous pouvez commencer avec n'importe quel Shapefile ou GeoJSON public.



Altair





Altair est une bibliothèque de rendu Python basée sur Vega . Le refrain est implémenté avec un minimum d'effort et comprend des éléments interactifs - mise en évidence, info-bulles, etc.



Altair est compatible avec Fastpages . Vous pouvez créer de simples articles de blog en quelques minutes en convertissant simplement les fichiers Jupyter Notebook avec un minimum de code. Consultez le Readme sur GitHub.



Extrait de code: 



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


Nous lisons le Shapefile comme un cadre GeoPandas: 



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


Le cadre ressemble à ceci:







Créez un calque de base et un calque choroplèthe: 



# 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)


Le code ci-dessus doit rendre une carte interactive avec la fonction d'afficher une info-bulle et de surligner lors de la sélection (cliquez).



Avantages:



  • Implémentation simple et rapide. Inclut un ensemble prédéfini de fonctionnalités pour accélérer votre travail.
  • Compatible Fastpages


Moins:



  • Peu d'options de personnalisation et interactivité limitée.
  • Il n'est pas possible d'utiliser des parties stylisées externes de la carte telles que OSM, Mapbox, etc.
  • L'API est mal documentée.


Implémentation avec Plotly





La bibliothèque de traçage Plotly Python rend des cartes prêtes à publier avec de nombreuses fonctionnalités interactives et personnalisables.



Des configurations de fond de carte personnalisées de Mapbox, OSM et d'autres options de style sont disponibles, ainsi qu'une implémentation simple avec Plotly Express et une documentation complète. Cela fait de Plotly l'une des options préférées pour créer des cartes interactives.



Extrait de code: 



# 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


Importation de Shapefile: 



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


Création d'une couche de base et ajout de parties de la carte: 



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()


Le code ci-dessus doit rendre une carte interactive avec affichage de l'infobulle et fonction de zoom. Cette implémentation comprend de nombreuses autres fonctionnalités, qui sont décrites plus en détail ici .



Avantages:



  • Implémentation très simple avec des bibliothèques de graphiques et Plotly Express. Il existe une documentation complète.
  • Beaucoup de paramètres et d'options de style personnalisables.
  • Compatible avec Dash et d'autres options pour incorporer des extraits dans des applications Web externes.


Moins:



  • Il n'y a aucun moyen d'ajouter des pop-ups et d'autres éléments interactifs au-delà des options prédéfinies.
  • Peut nécessiter un accès par jeton pour fonctionner avec plusieurs styles externes. Contrôle limité des limites de mise à l'échelle et de l'interactivité associée.


Implémentation avec Folium





Folium combine la facilité d'utilisation de l'écosystème Python avec les atouts de cartographie de la bibliothèque leaflet.js. Il vous permet de rendre des cartes choroplèthes personnalisables, réactives et interactives, ainsi que de transférer des visualisations vectorielles, raster et HTML riches en tant que marqueurs sur la carte.



La bibliothèque contient un certain nombre d'ensembles intégrés de tuiles de carte d'OpenStreetMap, Mapbox et Stamen, et prend également en charge les ensembles personnalisés via les API Mapbox ou Cloudmade. Les images, vidéos, GeoJSON et TopoJSON sont pris en charge.



Extrait de code: 



# 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


Importation de 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]])


Ajout de couches de base et de couches choroplèthes: 



#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


Le code ci-dessus devrait afficher une carte choroplèthe interactive avec un indice de survol, cliquez pour zoomer et une fenêtre contextuelle personnalisée en cliquant.



Avantages:



  • Un certain nombre de paramètres et d'options de style personnalisables ainsi que des fonctionnalités interactives uniques telles que des fenêtres contextuelles / parties de carte / arrière-plans personnalisés et un zoom clic-zoom.
  • Possibilité de transférer des visualisations vectorielles, raster, HTML comme marqueurs sur la carte.
  • L'option permettant d'afficher la carte au format HTML et d'autres options pour incorporer le fragment dans des applications Web externes.
  • Une quantité décente de documentation pour explorer toutes les fonctions disponibles.


Moins:



  • Dépend de plusieurs bibliothèques.


Conclusion



Ces trois outils vous permettent de créer des cartes interactives personnalisées pour vos sites Web sans trop de tracas.



Chers lecteurs, avez-vous déjà réalisé de telles cartes interactives pour vos projets?



image

Vous pouvez obtenir une profession demandée à partir de zéro ou augmenter vos compétences et votre salaire en suivant des cours en ligne SkillFactory:





E






More articles:


All Articles