Clever Geek Handbook

So erstellen Sie eine interaktive Karte mit Python und Open Source-Bibliotheken

Heute teilen wir Ihnen eine Schritt-für-Schritt-Anleitung zum Erstellen interaktiver Karten für eine Webanwendung oder ein Blog mit. Setzen Sie einfach ein Lesezeichen für diesen Artikel. Während es zum Beispiel eine d3.js-Bibliothek gibt, die benutzerdefinierte Karten erstellen kann, gibt es einige Tools, die noch einfacher sind. In diesem Beitrag werden drei benutzerfreundliche und dennoch leistungsstarke Open-Source-Python-Bibliotheken vorgestellt und bearbeitet.





Wenn die Dokumentation hängen bleibt



Vor einigen Monaten wollte ich eine interaktive Karte für eine interessante Webanwendung erstellen, die wir entwickelt haben. Ich habe stundenlang im Internet nach der perfekten Bibliothek gesucht, um loszulegen, aber es war sehr schwierig für mich, die Dokumentation zu lesen, da es keine richtige Schritt-für-Schritt-Anleitung gab, um die Grafiken nach Bedarf zu implementieren und anzupassen. Ich wünschte, ich hätte ein Handbuch zum Vergleichen von Funktionen und zur korrekten Implementierung sowie Details zur Anpassung. Dieser Artikel ist ein Versuch, einen solchen Leitfaden zu schreiben.



In diesem Artikel werden die Implementierungen einer interaktiven Hintergrundkarte (Choroplethen) anhand der drei für Python verfügbaren gängigen Bibliotheken sowie der Details und der Anpassung des Endergebnisses verglichen.



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




Für eine Choroplethenkarte sind zwei Datentypen im Hintergrund erforderlich, darunter Geodaten, geografische Grenzen zum Auffüllen der Karte (normalerweise eine Vektordatei .shp(Shapefile) oder GeoJSON) und zwei Datenpunkte auf jedem Quadrat der Karte, um die Karte farblich zu kennzeichnen die Daten selbst.



Die Geo Pandas-Bibliothek ist nützlich, wenn Sie Daten im erforderlichen Format abrufen müssen. In diesem Beispiel wird die GeoJSON-Datei der indischen Bundesstaaten verwendet. Sie können mit jedem öffentlichen Shapefile oder GeoJSON beginnen.



Altair





Altair ist eine Python-Rendering-Bibliothek, die auf Vega basiert . Der Chorus wird mit minimalem Aufwand implementiert und enthält interaktive Elemente - Hervorhebungen, Tooltips usw.



Altair ist Fastpages- kompatibel . Sie können einfache Blog-Posts in wenigen Minuten erstellen, indem Sie einfach Jupyter Notebook-Dateien mit einem Minimum an Code konvertieren. Schauen Sie sich die Readme-Datei auf GitHub an.



Codeausschnitt: 



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


Wir lesen das Shapefile als GeoPandas-Frame: 



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


Der Rahmen sieht folgendermaßen aus:







Erstellen Sie eine Basisschicht und eine Choroplethenschicht: 



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


Der obige Code sollte eine interaktive Karte mit der Funktion rendern, einen Tooltip anzuzeigen und bei der Auswahl hervorzuheben (klicken).



Vorteile:



  • Einfache und schnelle Implementierung. Enthält eine Reihe vordefinierter Funktionen, um Ihre Arbeit zu beschleunigen.
  • Fastpages kompatibel


Minuspunkte:



  • Nur wenige Anpassungsoptionen und eingeschränkte Interaktivität.
  • Es ist nicht möglich, externe stilisierte Teile der Karte wie OSM, Mapbox usw. zu verwenden.
  • Die API ist schlecht dokumentiert.


Implementierung mit Plotly





Die Plotly Python- Plotbibliothek rendert veröffentlichungsfertige Karten mit vielen interaktiven und anpassbaren Funktionen.



Benutzerdefinierte Grundkartenkonfigurationen von Mapbox, OSM und anderen Gestaltungsoptionen sowie eine einfache Implementierung mit Plotly Express und eine umfangreiche Dokumentation sind verfügbar. Dies macht Plotly zu einer der bevorzugten Optionen zum Erstellen interaktiver Karten.



Codeausschnitt: 



# 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


Shapefile importieren: 



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


Erstellen einer Basisebene und Hinzufügen von Teilen der Karte: 



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


Der obige Code sollte eine interaktive Karte mit QuickInfo-Anzeige und Zoomfunktion rendern. Diese Implementierung enthält viele andere Funktionen, die hier ausführlicher beschrieben werden .



Vorteile:



  • Sehr einfache Implementierung mit Diagrammbibliotheken und Plotly Express. Es gibt eine umfangreiche Dokumentation.
  • Viele Einstellungen und anpassbare Styling-Optionen.
  • Kompatibel mit Dash und anderen Optionen zum Einbetten von Snippets in externe Webanwendungen.


Minuspunkte:



  • Es gibt keine Möglichkeit, Popups und andere interaktive Elemente über die vordefinierten Optionen hinaus hinzuzufügen.
  • Möglicherweise ist ein Tokenzugriff erforderlich, um mit mehreren externen Stilen arbeiten zu können. Begrenzte Kontrolle über Skalierungsgrenzen und damit verbundene Interaktivität.


Implementierung mit Folium





Folium kombiniert die Benutzerfreundlichkeit des Python-Ökosystems mit den Mapping-Stärken der Bibliothek leaflet.js. Sie können anpassbare, reaktionsschnelle und interaktive Choroplethenkarten rendern sowie umfangreiche Vektor-, Raster- und HTML-Visualisierungen als Markierungen auf der Karte übertragen.



Die Bibliothek verfügt über eine Reihe integrierter Sätze von Kartenkacheln aus OpenStreetMap, Mapbox und Stamen und unterstützt auch benutzerdefinierte Sätze über die Mapbox- oder Cloudmade-APIs. Bilder, Videos, GeoJSON und TopoJSON werden unterstützt.



Codeausschnitt: 



# 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


Shapefile importieren: 



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


Hinzufügen von Basisschichten und Choroplethenschichten: 



#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


Der obige Code sollte eine interaktive Choroplethenkarte mit Hover-Hinweis, Klick zum Vergrößern und benutzerdefiniertem Popup beim Klicken anzeigen.



Vorteile:



  • Eine Reihe von Einstellungen und anpassbaren Stiloptionen sowie einzigartige interaktive Funktionen wie benutzerdefinierte Popups / Kartenteile / Hintergründe und Zoom per Mausklick.
  • Option zum Übertragen von Vektor-, Raster- und HTML-Visualisierungen als Markierungen auf der Karte.
  • Die Option zum Anzeigen der Karte als HTML und andere Optionen zum Einbetten des Fragments in externe Webanwendungen.
  • Eine anständige Menge an Dokumentation, um alle verfügbaren Funktionen zu erkunden.


Minuspunkte:



  • Hängt von mehreren Bibliotheken ab.


Fazit



Mit diesen drei Tools können Sie ohne großen Aufwand benutzerdefinierte interaktive Karten für Ihre Websites erstellen.



Liebe Leser, haben Sie jemals solche interaktiven Karten für Ihre Projekte erstellt?



Bild

Sie können einen begehrten Beruf von Grund auf neu erwerben oder Ihre Fähigkeiten und Ihr Gehalt verbessern, indem Sie Online-SkillFactory-Kurse belegen:





E






More articles:


All Articles