Geo-GIS

Tutorial Peta Web Sederhana

Kami membuat peta karena kami ingin mengirim pesan. Menempatkan data spasial Anda di web peta daripada peta offline memiliki keuntungan besar agar peta Anda dilihat dan pesan Anda dikirim ke khalayak yang lebih luas. Anda bisa menyebarkan URL web peta Anda dan minta orang menjelajahi peta indah Anda. Meskipun web map sangat terkait dengan pemrograman dan mengharuskan belajar hal khusus, ada alat di luar sana yang dapat Anda gunakan untuk membuat peta interaktif cukup mudah. Dalam tutorial ini kita akan menggunakan qgis2web.

Qgis2web adalah alat yang mengubah layer QGIS menjadi file HTML, Javascript, dan CSS. Anda akan belajar cara menggunakan qgis2web untuk membuat peta web interaktif yang memunculkan informasi bagi pengguna. Peta web final akan terlihat seperti ini:


Persyaratan:

Data: Kami akan menggunakan titik shp ini untuk memetakan lokasi supermarket dan poligon ini yang berisi data populasi pada tingkat kelompok blok.

Perangkat Lunak: Kami akan menggunakan qgis2web yang merupakan plugin dari perangkat lunak QGIS. Anda harus menginstal QGIS versi terbaru. Setelah Anda melakukannya, silakan instal plugin qgis2web dari dalam QGIS. Untuk melakukan itu, mulai QGIS dan buka Plugins -> Manage and Install Plugins … Kemudian cari qgis2web dan klik Install plugin.


Anda sekarang siap untuk mulai membuat peta web Anda

Qgis2web membaca layer QGIS dan stylenya dan mengubahnya menjadi file HTML, Javascript, dan CSS yang dapat dilihat dari browser. Itu berarti Anda harus terlebih dahulu menambahkan shapefile Anda ke dalam QGIS dan menyesuaikannya dengan style/legenda yang Anda inginkan. Untuk menambahkan shapefile, cukup buka Layer Add Layer Add Vector Layer … … dan kemudian pilih file .shp.

Shapefile memakai style default untuk saat ini dan mereka tidak menyampaikan informasi apa pun. Jadi, mari sesuaikan stylenya. Pertama, pastikan titik shapefile berada di atas poligon shapefile di Panel Layers, jika tidak poligon akan menutupi titik-titik dan Anda tidak akan dapat melihatnya.


Mari sesuaikan layer titik

Kami akan mengubah titik-titik ke berbagai ukuran tergantung pada jumlah karyawan dan masing-masing supermarket diwakili oleh Adanya dot. Untuk melakukan itu, klik kanan pada layer titik di Panel Layers dan pergi ke Properties. Lalu, buka tab Style dan ubah parameternya sehingga terlihat seperti pada gambar berikut:


Perhatikan bahwa setelah Anda mengatur semua parameter, Anda harus menekan tombol Classify dan kemudian tombol OK untuk menutup jendela. Titik-titik itu sekarang memiliki ukuran yang berbeda-beda:


Anda sekarang harus mengubah style poligon sehingga mewakili jumlah populasi untuk setiap kelompok blok.

Sekali lagi, buka Properties untuk layer poligon dan kemudian ke tab Style dan atur parameter ke nilai yang Anda lihat di screenshot berikut:


Dengan style yang ditentukan, peta QGIS Anda sekarang siap untuk dikonversi menjadi peta HTML dengan qgis2web. Untuk melakukannya, buka Web -> qgis2web dan atur parameter di jendela qgis2web seperti yang Anda lihat dalam gambar berikut:


Pastikan Anda telah menentukan direktori keluaran di opsi Export Folder. Menekan tombol Export akan menghasilkan file index.html dan tiga folder dengan file Javascript dan CSS yang terkait.

Jika Anda ingin menerbitkan peta ini secara online, Anda harus mendapatkan akun hosting web dan cukup mengunggah file index.html dan tiga folder terkait ke direktori html publik utama.