Web mapping dengan Menggunakan Python

Hallo pembaca setia geosai.

Kali ini saya akan membahas mengenai cara membuat web mapping dengan menggunakan Bahasa Pemrogaman Python. Data yang akan kita gunakan adalah data persebaran rumah sakit rujukan penanganan COVID-19 yang disediakan oleh Badan Nasional Penganggulangan Bencana (BNPB).

Dikutip dari Wikipedia web mapping adalah :

Web mapping is the process of using the maps delivered by geographic information systems (GIS) in World Wide Web. A web map on the World Wide Web is both served and consumed, thus web mapping is more than just web cartography, it is a service by which consumers may choose what the map will show.

Jadi dari pengertian tersebut dapat dikatakan bahwa web mapping ini adalah pemanfaatan Worl Wide Web(WWW) untuk menyajikan peta digital. Jadi intinya bagaimana caranya agar peta digital yang telah kita buat dapat diakses melalui web baik itu online maupun offline. Kira-kira pengertian dasarnya adalah seperti itu.

Dalam pembuatan web mapping untuk persebaran rumah sakit rujukan COVID-19 ini, kita akan menggunakan Python dengan Library Folium dan Pandas. Oke tahapannya adalah sebagai berikut :

1. Install Python dari situs resminya dengan menginstall versi 3.x.
2. Kemudian pastikan install library folium dan pandas dengan menggunakan perintah dibawah ini.

Pip3 install folium
Pip3 install pandas

3. Silahkan gunakan code editor favorit teman-teman. Disini saya akan menggunakan code editor Atom yang dapat diunduh gratis pada situs resminya.

4. Unduh data mengenai lokasi persebaran rumah sakit rujukan penanganan COVID-19 di Indoesia dari dari situs resmi BNPB. Unduh file yang memiliki ekstensi .csv

5. Buka code editor Atom dan tuliskan perintah script dibawah ini:

import folium
import pandas
from folium.plugins import MarkerCluster

Penjelasan :

• Import folium adalah perintah yang digunakan untuk menggunakan dan mengakses library folium. Fitur pembuatan web mapping tersedia karena adanya library tersebut.
• Import pandas adalah perintah untuk menggunakan dan mengakses library pandas yang berfungsi untuk menangani sumber dengan salah satu format data yaitu .csv
• From folium.plugins import MarkerCluster. Dari library folium yang telah kita gunakan kita akan mengakses plugins MarkerCluster. MarkerCluster ini sangat berguna ketika kita ingin menampilkan data point dalam jumlah besar.

6. Akses data menggunakan Library Pandas.

#import csv data using pandas 
rs_geodata = pandas.read_csv("rumah_sakit.csv") 
rs_geodata.dropna(subset=["lat", "lon"], inplace=True)

Penjelasan :

• #import csv data using pandas merupakan comment akan fungsi script yang kita buat
• rs_geodata = pandas.read_csv(“rumah_sakit.csv”) adalah perintah untuk membuat membuat variable baru dengan nama rs_geodata untuk menampung file .csv yang berisi data persebaran rumah sakit.

7. Membuat basemap.

#instatiate map wih center from csv_data
map = folium.Map(location=[rs_geodata.lat.mean(axis=0),rs_geodata.lon.mean(axis=0)+10], zoom_start=5)

Penjelasan :

• #instatiate map with center from csv_data adalah comment
• Map = folium.Map(location=[rs_geodata.lat.means(axis=0),rs_geodata.lon.mean(axis=0)+10],zoom_start=5) adalah perintah untuk membuat variable Map kemudian memberikan nilai center map dengan nilai rata-rata lintang dan bujur+10 serta memberikan nilai zoom_start sebesar 5.

8. Buat Marker Cluster.

marker_cluster = MarkerCluster().add_to(map)

Penjelasan :

• Membuat variabel marker_cluster untuk menampung output dari class MarkerCluster.

9. Menambahkan marker dengan menggunakan for loop.

#create for loop to generate every marker
for each in rs_geodata.iterrows():
    #lets define marker location, popup, and icon -> iterate -> add to empty marker_cluster
    mrk_location = list([each[1]['lat'], each[1]['lon']])
    mrk_popup = str('<h3>Nama: </h3>'+each[1]['nama']+'<br>'+'<h3>Alamat:</h3>'+str(each[1]['alamat'])+'<br>'+'<h3>Tipe:</h3>'+str(each[1]['tipe'])+'<br>'+'<h3>No. Telp:</h3>'+str(each[1]['telepon']))
    mrk_icon = folium.Icon(color='red', icon="ambulance", prefix="fa")

    folium.Marker(location=mrk_location, popup=mrk_popup, icon=mrk_icon).add_to(marker_cluster)

Penjelasan :

• Secara singkat kode diatas berfungsi untuk menambahkan marker untuk masing-masing data rumah sakit disertai dengan popup dan keterangan attribute.

10. Save pada format html dengan nama rumah_sakit.html

map.save("rumah_sakit.html")

Penjelasan :

• map.save(“rumah_sakit.html”) adalah perintah untuk menyimpan hasil pekerjaan pada file html dengan nama rumah_sakit

11. Berikut merupakan kode secara keseluruhan yang telah kita buat.

import folium
import pandas
from folium.plugins import MarkerCluster

#import csv data using pandas
rs_geodata = pandas.read_csv("rumah_sakit.csv")
rs_geodata.dropna(subset=["lat", "lon"], inplace=True)

#instatiate map wih center from csv_data
map = folium.Map(location=[rs_geodata.lat.mean(axis=0),rs_geodata.lon.mean(axis=0)+10], zoom_start=5)

#Create Empty MarkerCLuster
marker_cluster = MarkerCluster().add_to(map)

#create for loop to generate every marker
for each in rs_geodata.iterrows():
    #lets define marker location, popup, and icon -> iterate -> add to empty marker_cluster
    mrk_location = list([each[1]['lat'], each[1]['lon']])
    mrk_popup = str('<h3>Nama: </h3>'+each[1]['nama']+'<br>'+'<h3>Alamat:</h3>'+str(each[1]['alamat'])+'<br>'+'<h3>Tipe:</h3>'+str(each[1]['tipe'])+'<br>'+'<h3>No. Telp:</h3>'+str(each[1]['telepon']))
    mrk_icon = folium.Icon(color='red', icon="ambulance", prefix="fa")

    folium.Marker(location=mrk_location, popup=mrk_popup, icon=mrk_icon).add_to(marker_cluster)

map.save("rumah_sakit.html")

12. File rumah_sakit.html dapat dibuka pada browser localhost dan hasilnya adalah seperti berikut.

Web mapping yang telah kita buat sudah dapat menunjukan lokasi marker dari masing-masing data rumah sakit disertai dengan popup yang berisi attribute. Masih banyak perbaikan yang dapat kita lakukan seperti mengatur ukuran popup agar lebih baik, menambahkan basemap selain openstreetmap, dan masih banyak lagi.