كيفية عمل خريطة تفاعلية باستخدام مكتبات Python والمكتبات مفتوحة المصدر

نشارك اليوم معك دليلًا تفصيليًا لإنشاء خرائط تفاعلية لتطبيق ويب أو مدونة. فقط احفظ هذه المقالة. بينما توجد ، على سبيل المثال ، مكتبة d3.js يمكنها إنشاء خرائط مخصصة ، إلا أن هناك بعض الأدوات الأكثر بساطة. في هذا المنشور ، سنلقي نظرة على ثلاث مكتبات Python سهلة الاستخدام لكنها قوية ومفتوحة المصدر.

---

عندما تتعطل الوثائق

قبل بضعة أشهر ، أردت إنشاء خريطة تفاعلية لتطبيق ويب مثير للاهتمام كنا نطوره. قضيت ساعات على الإنترنت في البحث عن مكتبة مثالية للبدء ، ولكن كان من الصعب جدًا بالنسبة لي إلقاء نظرة على الوثائق حيث لم يكن هناك دليل مناسب خطوة بخطوة لتنفيذ وتخصيص العناصر المرئية حسب الحاجة. تمنيت لو كان لدي دليل لمقارنة الميزات والتنفيذ الصحيح إلى جانب تفاصيل التخصيص. هذه المقالة هي محاولة لكتابة مثل هذا الدليل.



تنتقل المقالة لمقارنة تطبيقات خريطة الخلفية التفاعلية (choropleth) باستخدام المكتبات الثلاث الشائعة المتاحة لبايثون ، بالإضافة إلى تفاصيل وتخصيص النتيجة النهائية.

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

تتطلب خريطة الجوقة نوعين من البيانات في الخلفية ، أحدهما بيانات جغرافية مكانية ، والحدود الجغرافية لملء الخريطة (عادةً ملف متجه .shp( ملف شكل ) أو GeoJSON) ، ونقطتي بيانات على كل مربع من الخريطة لترميز الخريطة بالألوان بناءً على البيانات نفسها.



تعد مكتبة Geo Pandas مفيدة عندما تحتاج إلى الحصول على البيانات بالتنسيق المطلوب. يستخدم المثال ملف GeoJSON الهندي للولايات. يمكنك البدء بأي ملف Shapefile أو GeoJSON عام.

نسر

Altair هي مكتبة عرض بيثون تستند إلى Vega . يتم تنفيذ الكورس بأقل جهد ويتضمن عناصر تفاعلية - تمييز ، تلميحات ، إلخ.



Altair متوافق مع Fastpages . يمكنك إنشاء منشورات مدونة بسيطة في دقائق عن طريق تحويل ملفات Jupyter Notebook بالحد الأدنى من التعليمات البرمجية. تحقق من الملف التمهيدي على GitHub.



مقتطف الشفرة:

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

نقرأ ملف الشكل كإطار GeoPandas:

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

الإطار يشبه هذا:







قم بإنشاء طبقة أساسية وطبقة تصحيحية:

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

يجب أن يعرض الكود أعلاه خريطة تفاعلية مع وظيفة عرض تلميح أداة وإبراز عند التحديد (انقر).



الايجابيات:

• تنفيذ بسيط وسريع. يتضمن مجموعة محددة مسبقًا من الميزات لتسريع عملك.
• Fastpages متوافق

سلبيات:

• خيارات تخصيص قليلة وتفاعل محدود.
• لا يمكن استخدام أجزاء خارجية مبسطة للخريطة مثل OSM و Mapbox وما إلى ذلك.
• API موثقة بشكل سيئ.

التنفيذ مع Plotly

تعرض مكتبة Plotly Python التآمر خرائط جاهزة للنشر مع الكثير من الميزات التفاعلية والقابلة للتخصيص.



تتوفر تكوينات خريطة الأساس المخصصة من Mapbox و OSM وخيارات الأنماط الأخرى ، بالإضافة إلى التنفيذ البسيط مع Plotly Express والوثائق الشاملة. هذا يجعل Plotly أحد الخيارات المفضلة لإنشاء خرائط تفاعلية.



مقتطف الشفرة:

# 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

استيراد ملف الأشكال:

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

إنشاء طبقة أساسية وإضافة أجزاء من الخريطة:

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

يجب أن يعرض الرمز أعلاه خريطة تفاعلية مع عرض تلميح الأدوات ووظيفة التكبير / التصغير. يتضمن هذا التطبيق العديد من الميزات الأخرى ، والتي تم وصفها بمزيد من التفاصيل هنا .



الايجابيات:

• تنفيذ بسيط للغاية مع مكتبات الرسوم البيانية و Plotly Express. هناك وثائق واسعة النطاق.
• الكثير من الإعدادات وخيارات التصميم القابلة للتخصيص.
• متوافق مع داش وخيارات أخرى لتضمين المقتطفات في تطبيقات الويب الخارجية.

سلبيات:

• لا توجد طريقة لإضافة النوافذ المنبثقة والعناصر التفاعلية الأخرى بخلاف الخيارات المحددة مسبقًا.
• قد يتطلب الوصول إلى الرمز المميز للعمل مع أنماط خارجية متعددة. تحكم محدود في حدود القياس والتفاعلات ذات الصلة.

التنفيذ مع Folium

يجمع Folium بين سهولة استخدام نظام Python البيئي مع نقاط القوة الخاصة بمكتبة المنشور. يتيح لك عرض خرائط تصحيحية تفاعلية وقابلة للتخصيص وسريعة الاستجابة ، بالإضافة إلى نقل تصورات المتجهات الغنية والنقطية و HTML كعلامات على الخريطة.



تحتوي المكتبة على عدد من المجموعات المضمنة من مربعات الخرائط من OpenStreetMap و Mapbox و Stamen ، كما تدعم المجموعات المخصصة من خلال Mapbox أو Cloudmade APIs. الصور ومقاطع الفيديو و GeoJSON و TopoJSON مدعومة.



مقتطف الشفرة:

# 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

استيراد ملف الأشكال:

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

إضافة طبقات القاعدة وطبقات التشوروبليث:

#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

يجب أن يعرض الكود أعلاه خريطة تصحيحية تفاعلية مع تلميح التمرير ، والنقر للتكبير والنافذة المنبثقة المخصصة عند النقر.



الايجابيات:

• عدد من الإعدادات وخيارات النمط القابلة للتخصيص جنبًا إلى جنب مع الميزات التفاعلية الفريدة مثل النوافذ المنبثقة / أجزاء الخريطة / الخلفيات المخصصة والنقر للتكبير.
• خيار لنقل تصورات المتجهات والنقطية و HTML كعلامات على الخريطة.
• خيار عرض الخريطة بتنسيق HTML وخيارات أخرى لتضمين الجزء في تطبيقات الويب الخارجية.
• كمية مناسبة من الوثائق لاستكشاف جميع الوظائف المتاحة.

سلبيات:

• يعتمد على مكتبات متعددة.

خاتمة

تتيح لك هذه الأدوات الثلاث إنشاء خرائط تفاعلية مخصصة لمواقع الويب الخاصة بك دون الكثير من المتاعب.



القراء الأعزاء ، هل سبق لك أن صممت مثل هذه الخرائط التفاعلية لمشاريعك؟

يمكنك الحصول على مهنة مطلوبة من البداية أو في المستوى الأعلى في المهارات والراتب من خلال دورات SkillFactory عبر الإنترنت:

• «Python -» (9 )
• - (8 )
• Data Science (12 )
• - Data Science (14 )
• - Data Analytics (5 )
• (18 )

E

• دورة التعلم الآلي (12 أسبوعًا)
• « Machine Learning Data Science» (20 )
• «Machine Learning Pro + Deep Learning» (20 )
• (6 )
• DevOps (12 )
• iOS- (12 )
• Android- (18 )
• Java- (18 )
• JavaScript (12 )
• UX- (9 )
• Web- (7 )