Cara Membuat Webgis dengan QGIS - LeafletJS - Openlayers OL3 - Plugin QGIS2Web

Tutorial Membuat WebGIS Sederhana dengan QGIS2Web (Leaflet dan Openlayer/OL3)

August 27, 2017 10918 43

QGIS2Web adalah salah satu plugin gratis di software QuantumGIS (QGIS) dengan fungsi untuk membuat peta web (webgis). QGIS2Web bisa dikatakan sebagai plugin pengganti bagi QGIS2leaf (Baca: Cara Membuat WebGIS Sederhana dengan Plugin QGIS2Leaf di QuantumGIS) yang kini sudah tidak dikembangkan lagi. Hal ini karena pengembang QGIS2web salah satunya juga merupakan pengembang dari qgis2leaf, yakni Tom Chadwin. Dibandingkan dengan QGIS2leaf, plugin QGIS2web memiliki beberapa kelebihan. Salah satu yang paling menonjol adalah digunakannya OpenLayers (OL3) selain LeafletJS. Adapun OpenLayers sebagaimana LeafletJS merupakan library javascript open-source yang cukup banyak digunakan untuk membangun webgis.

Plugin QGIS2web dapat diinstall manual dengan mengcopypaste folder ke direktori plugin QGIS di komputer/laptop, maupun otomatis dengan tool “manage and install plugins” di QGIS.

Install Manual (OS Windows dengan QGIS versi 2.18.14, OS atau versi QGIS lain bisa menyesuaikan atau lakukan instalasi secara otomatis)
  1. Silakan buka laman QGIS Python Plugins Repository di plugins.qgis.org kemudian search “qgis2web”
  2. Anda bisa unduh versi berapapun, tapi saya sarankan untuk menggunakan saja versi yang paling baru (2.33.1 rilis 30 Januari 2018), sebagaimana yang akan kita gunakan pada tutorial kali ini.
  3. Ekstrak file .zip hasil unduhan dan copy folder “qgis2web” (ada didalam folder “qgis2web-2.33.1”).
  4. Buka file manager di komputer/laptop Anda, masuk ke direktori C:\Users\<nama komputer/laptop Anda>\.qgis2\python\plugins, kemudian paste folder “qgis2web”.
  5. Silakan buka software QGIS Anda dan aktifkan plugin qgis2web melalui menu Plugins >> Install and Manage Plugins… Pilih tab “All” atau “Installed” dan cari qgis2web, kemudian centang.
  6. QGIS2web siap digunakan.
See also  Relief Permukaan Bumi 3D Anaglyph Menggunakan TNTgis (TNTmips Free)
Install Otomatis
  1. Buka software QGIS Anda, masuk menu “Install and Manage Plugins” (Plugins >> Install and Manage Plugins…).
  2. Pilih tab “All” atau “Not installed” dan cari qgis2web, kemudian install plugin. Setelah terinstall, pastikan qgis2web sudah tercentang.
  3. QGIS2web siap digunakan.

Setelah perangkat lunak QGIS beserta plugin QGIS2webnya siap, maka yang kita perlukan selanjutnya untuk membuat webgis adalah data spasial digital (shp atau raster file) yang akan dipublikasikan. Silakan gunakan data yang Anda miliki, atau bisa juga menggunakan data sampel yang digunakan dalam tutorial ini. Data sampel berupa obyek garis (struktur geologi) dan area (peta geologi), serta data raster citra penginderaan jauh (citra ASTER) bisa diunduh melalui link ini: DOWNLOAD DATA. (Password: spasialkan.com)

  1. Input semua data ke dalam QGIS kemudian lakukan simbolisasi. Jika menggunakan data sampel, maka bisa langsung buka project spasialkan_data.qgs, atau input data raster dan shapefile satu persatu dengan style symbol file *.qml.
  2. Buka plugin QGIS2Web dan lakukan beberapa pengaturan tampilan webgis.Tutorial Membuat Webgis dengan QGIS - Leaflet JS - Openlayers OL3 - QGIS2Web
  3. Beberapa pengaturan yang dapat dilakukan adalah terkait layers yang ingin dimunculkan dalam webgis, popup data atribut (khusus data vektor/shapefile), basemap yang digunakan, library webgis yang dipakai (openlayers atau leaflet js), pengaktifan tools analisis webgis (seperti legenda, geolokasi, pencarian, pengukuran jarak, hingga minimal dan maksimal zoom).
  4. Untuk melihat perbedaan visualisasi dari penggunaan library openlayers dan leaflet js dapat dipilih melalui checkbox di bagian kiri-bawah halaman QGIS2Web kemudian klik ‘Update preview’.
    Lihat Gambar
    Cara Membuat Webgis dengan QGIS - Openlayers - OL3 - Plugin QGIS2Web
  5. Jika pengaturan tampilan webgis sudah selesai, webgis bisa segera dieksport dengan terlebih dahulu menentukan lokasi penyimpanannya (bisa ke dalam folder di komputer/laptop maupun ke FTP site).
  6. (Optional untuk keperluan SEO WebGIS ketika di publikasikan online) Untuk menambahkan favicon, deskripsi, dan keyword pada webgis silakan buka file index.html yang ada pada folder hasil export.
  7. Tambahkan beberapa baris kode berikut ini diantara tag <head> </head>, kemudian edit bagian yang tertulis merah sesuai kebutuhan.
<meta name=”description” content=”Tulis deskripsi WebGIS disini” />
<meta name=”keywords” content=” Tulis keyword WebGIS disini” />
<link rel=”icon” href=”URL LOGO” type=”image/x-icon”/>
<link rel=”shortcut icon” href=”URL LOGO” type=”image/x-icon”/>

Sekian tutorial membuat webgis dengan Plugin QGIS2Web di QGIS, jangan lupa simak tutorial lainnya. Hasil pembuatan webgis dengan qgis2web ini dapat di lihat di laman berikut ini:

See also  E-book: Tutorial Data Analysis using QGIS and InaSAFE [Beginner Level]

Simak cara membuat webgis berbasis openlayers (OL3) dan Leaflet JS dalam bentuk video tutorial berikut ini:

UPDATE TUTORIAL BASEMAPS
    • Peta dasar (basemaps) pada webgis dapat diatur lebih dari satu dengan cara men-select beberapa jenis basemaps yang telah tersedia. Sebagai contoh, misalnya basemaps yang diaktifkan adalah OSM, OSM B&W, Stamen Toner, OSM DE, dan OSM HOT seperti terlihat pada gambar berikut ini. Cara Membuat Webgis dengan QGIS - LeafletJS - Plugin QGIS2Web - Basemaps
    • Selain melalui GUI dari QGIS2Web, basemaps juga dapat ditambahkan melalui script hasil export dari QGIS2Web.
    • Pada penggunaan library OpenLayers, basemaps dapat ditambahkan dengan mengedit script pada file layers.js‘ yang berada dalam folder ‘layers’ (data webgis hasil export QGIS2Web). Dengan cara ini, bisa pula ditambahkan basemaps selain yang disediakan oleh QGIS2Web (selama tahu url sourcenya). Berikut adalah contohnya:
See also  Tutorial Menambahkan Data WMS - WFS ke dalam ArcGIS Pro

See the Pen qgis2web-layers.js-basemapsOL by Spasialkan.com | Peta Digital & WebGIS (@spasialkan).

    • Pada penggunaan library Leaflet JS, basemaps dapat ditambahkan dengan mengedit script pada file index.html‘ (data webgis hasil export QGIS2Web). Sama dengan OpenLayers, dengan cara ini, bisa pula ditambahkan basemaps selain yang disediakan oleh QGIS2Web (selama tahu url sourcenya). Berikut adalah contohnya:

See the Pen qgis2web-index.html-basemapsLeafletJS by Spasialkan.com | Peta Digital & WebGIS (@spasialkan).

Bagi yang ingin menyertakan gambar atau foto dalam popup atribut Web GIS, silakan simak update tutorialnya berikut ini:

  • Tambahkan field baru dengan nama Gambar, Photo, atau lainnya (terserah sesuai kebutuhan), melalui Layer Properties > Field.
Cara-Mudah-Membangun-Web-GIS-dengan-QGIS-Photo-Field-Properties
  • Pilih “Edit Widget” dan ganti menjadi Photo. Silakan sesuaikan untuk pengaturannya, mulai dari bagian width, height, hingga default value.
  • Buka attribute table dan tambahkan gambar atau tuliskan path directory foto yang diinginkan ke setiap objek.
Cara-Mudah-Membangun-Web-GIS-dengan-QGIS-Menambahkan-Gambar-Foto
  • Save edit, dan silakan buka QGIS2Web-nya.
  • Lakukan pengaturan sesuai kebutuhan, preview, lalu export. Berikut adalah contoh hasil previewnya (*gambar masjid dari Wikipedia).
4.9/5 - (13 votes)

Tags: leafletjs, openlayer, qgis, tutorial, webgis Categories: GIS, Sistem Informasi Geografi (SIG), Tutorial, Tutorial WebGIS, WebGIS
share TWEET PIN IT share share
identicon Rifki Fauzi

Alumni kampus biasa-biasa saja, yang mulai menemukan minatnya di dunia pemetaaan, khususnya WebGIS.

Related Posts
Comments
  1. -

    setelah install qgis2web trus buat webgis gmn ? trima kasih mohon infonya

    1. identicon

      -

      Sudah saya lengkapi Mas tutorial webgis dengan qgis2web-nya…

  2. -

    Mas rifky makasih tutorialnya.
    Kantor saya pingin buat webgis seperti di web portal esdm http://geoportal.esdm.go.id/peng_umum/
    itu kira2 pakai aplikasi apa aja ya?
    Apa bisa kalau pakai qgis?

    1. identicon

      -

      Itu pakai Web AppBuilder ArcGIS buatnya (dan ArcGIS Server untuk nyimpan datanya).

      Platform mahal boleh dibilang itu,

      Kalau boleh tahu kerja dimana ya, Mbak?

  3. -

    Malam pak Rifki
    pak mau bertanya, untuk memunculkan pilihan basemaps (OSM, OSM B&W, OSM DE, OSM HOT dll.) pada saat setting export webgis bagaimana ya pak ?
    Terimakasih

    1. identicon

      -

      Bisa langsung di select lebih dari satu basemaps sebelum webgis di export, Pak. Nanti pada layerslist webgis akan otomatis muncul pilihan basemaps yang sudah diselect sebelumnya.

      Detailnya juga sudah saya tambahkan (Update) ke tulisan di atas, Pak.
      Terima kasih,

      1. -

        Selamat sore pak Rifki

        pak mohon bantuannya, bagaimana cara agar layer bisa di hide/unhide pasca di export ?
        apakah ada plugin khususnya ?, saya menggunakan QGIS 3.0

        1. identicon

          -

          Sebelum export, aktifkan fitur “layer list”nya Mas, bisa pilih tampilan ‘expanded’ atau ‘collapsed’.
          Layerlist

  4. -

    siang mas rifki..
    koding yang di notepad++ itu dari hasil export web yang kita buat ya? kalau nggak apakah mas berkenan untuk share

    1. identicon

      -

      Siang Mbak,

      Maaf, yang dimaksud koding notepad++ apakah yang ada di codepen (di bagian “update tutorial basemap”)?
      Kalau iya, itu hasil eksport dari QGIS2Web (setelah diedit), dan bisa dicopy langsung itu dari codepen..

  5. -

    Can you please help me how to put for each layer the sign “+” and “-” to reduce the legend of each layer.

    How to add a logo in the webmap?

    1. identicon

      -

      To reduce the legend of each layer, you can add this code to your webgis file
      tutorial webgis leaflet js dan openlayers qgis logo legend

      To add logo you can use bootstrap,
      For demo [click on the layer list name (bold text) to show and hide the legend] and full sourcecode: Leaflet & OpenLayers

  6. -

    Can you please help me how to put for each layer the sign “+” and “-” to reduce the legend of each layer.

    How to add a logo in the webmap?

  7. -

    Siang Mas mau tanya saya pakai QGIS 3.6.1, pas mau pakai plugin qgis2web, bagian basemap nya kok tidak muncul ya? Lalu saya coba install plugin QuickMapServices muncul notif kalo phyton nya error. Itu kenapa ya Mas?
    Terima kasih.

    1. identicon

      -

      Malam Mas,
      Saya sejauh ini masih nyaman dengan QGIS2web versi 2.34 di QGIS 2.18 Mas, dan tidak ada masalah.
      Untuk yang pakai QGIS 3 ke atas (versi QGIS2Web juga di atas 3 biasanya), memang entah kenapa basemaps-nya nggak ada.

      Solusinya (khususnya jika pakai yang library leaflet) bisa diedit file “index.html” hasil export dan tambah script basemap sendiri, misalnya seperti ini (basemap OSM):

      var basemap0 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors,CC-BY-SA'
      }).addTo(map);

      1. -

        Terima kasih Mas atas responnya. Sekarang basemapnya bisa keluar, tapi malah data shp nya yang tidak keluar. Itu kenapa ya?

        1. identicon

          -

          Itu basemapnya ditambah manual lewat edit file “index.html” hasil export, Mas?

          Mungkin bisa dicek lagi di script pemanggilan datanya (data di QGIS2Web diubah jadi *.js). Untuk mempermudah melacak errornya bisa sekalian buka Console (Inspect Element) ketika ngeload webgis hasil eksportnya di browser.

  8. -

    mas mohon bantuanya saya menggunakan qgis versi 2.14 tetapi menggunakan qgis2web yang versi lebih terbaru (mungkin 3)
    kendala saya disini
    1. beberapa layer di satu grup tidak muncul apabila menggunakan openlayer, bahkan saya pindahkan ke grup yg ada dibawahnya layer layer tersebut tidak muncul juga di mapnya
    2. apabila saya rubah menggunakan leaflet layer layer tersebut mncul dan dapat dihide dan unhide tetapi query info dari semua layer tidak muncul setiap saya klik
    mohon solusinya,,
    apakah ada kesalahan atau memang versi qgis2web atau qgis nya yg error
    terimakasih sebelumnya mohon bantuanya

    1. identicon

      -

      Untuk QGIS versi 2, kalau saran Saya pakai saja plugin QGIS2Web yang versi 2 (terbaru 2.34.00). Sebagai acuan bisa disesuaikan dengan yang ada di plugins.qgis.org/plugins/qgis2web di bagian tab “Versions”.

  9. -

    malam kak, mau menanyakan di atribut data bisa tidak kalau kita menyertakan link gmap, jadi pas kita klik point muncul atribut, sekalian hyperlink yang bisa langsung di klik menuju gmap, mohon bantuannya trimakasih

    1. identicon

      -

      Untuk membuat popup link, bisa tambahkan field dengan type ‘Text (String)’ di layernya, kemudian isikan script dengan format seperti ini:

      Attribute Link QGIS2Web

      1. -

        sip makasih kak

  10. -

    maaf mas kalo kita mau nyertain atribut gambar bisa gak ?
    sebelumnya terima kasih mas tutorialnya sangat bermanfaat

    1. identicon

      -

      Bisa Mas.
      Terkait caranya sudah Saya update/tambahkan tutorialnya di atas, kalau mau langsung silakan ke sini

      1. -

        terima kasih banyak mas

      2. -

        Gimana caranya supaya hasil raster bisa di download oleh orang yang ngakses kita ya mas ?

        1. identicon

          -

          Kalau mau mesti edit sedikit di script hasil export WebGIS-nya, Mas.
          Tapi karena di QGIS2Web ini data raster dikonversi jadi *.png dan vector jadi *.js setelah diexport (cek folder ‘layers’ untuk versi leaflet, dan folder ‘data’ di versi OpenLayers). Jadi, sebaiknya copy-paste ulang data vector dan raster yang sudah diarchivekan (*.zip / *.rar) ke dalam folder tadi.

          Nah kalau sudah tambahkan script ini:
          – Versi Leaflet (buka file “layers.js” dari folder ‘layers’)
          – Versi OpenLayers (buka file “index.html”)
          Tutorial Gratis Membuat WebGIS dengan QGIS - Download Data

          Hasilnya kurang lebih seperti ini, selebihnya silakan disesuaikan dengan kebutuhan Mas:
          Tutorial Gratis Membuat WebGIS dengan QGIS - Tampilan Download Data

  11. -

    Bang saya masih pemula ni…. Kira2 gimana upload QGIS2Web hasil export ke hosting online?

    1. identicon

      -

      Sudah sewa hosting&domainnya? (kalau belum bisa sewa di sini).
      Kalau sudah sewa, biasanya di hosting sudah terinstall cPanel. Kalau mau upload cukup masuk ke menu “File Manager” cPanel, kemudian gunakan fitur upload.

  12. -

    Assalammualiakum, wr, wb
    Mas, Apakah mas rifki memberikan pelatihan atau private?
    dan kalo boleh bisa minta nomor kontaknya mas?

    1. identicon

      -

      Wa’alaikumsalam wr.wb.,

      kontak bisa lihat di bio IG, Mas Rahmat..
      (ini link IGnya: https://www.instagram.com/webgisindonesia)

  13. -

    Mas mau nanya
    saya pake Qgis 3.10
    pake fitur atribut gambarnya udah bisa tapi, gambarnya munculnya gede banget di webgisnya.
    itu cara ngecilinya gimana ya?

    1. identicon

      -

      Kalau untuk cara mudahnya mungkin bisa diubah ukuran asli gambarnya menjadi ukuran thumbnail (kecil).
      Atau kalau mau mengedit lewat code webgis hasil exportnya, bisa dengan menambahkan attribute height dan width pada script popupContent, khususnya untuk field gambarnya.

  14. -

    misi pak, ijin bertanya. apakah bisa QGIS2WEB itu memasang basemap sendiri / foto udara milik sendiri sebagai basemapnya? kalau bisa, mohon tutorialnya. terimakasih banyak.

    1. identicon

      -

      Untuk membuat basemap dari citra/foto udara sendiri, bisa dipublish dulu Pak datanya jadi GIS Services. Misal bisa publish data raster (geotiff) menggunakan Geoserver, atau publish custom style diMapbox Studio. Setelah terpublish kemudian dipanggil (edit script output dari QGIS2Web) GIS Servicesnya jadi basemap (misal kalau dilibrary leaflet menggunakan L.tileLayer atau L.tileLayer.wms).

  15. -

    menu measure saya ketika digunakan kok berada dibawah layers basmap ya, jadi gak kelihatan dipeta jadinya klau basemapnya diaktifkan. bagiaman cara memperbaikinya di file index.html ya mas.

    terimakasih

  16. -

    Mas, saya membuat web gis peta kab dengan field filed kecamatan, desa, dan data2 per desa, sudah berhasil. Cuma saya ingin memodifikasi hasil QGIS2WEB nya dimana saya peta shpnya adalah se kab dengan polygonmenurut desa. Nah saya memasukkan attribut filter kecamatan, sehingga kalau difilter hanya polygon desa-desa pada kec tsb saja yang muncul.
    Masalahnya ketika di filter tampilannya adalah berdasarkan zoom yang terakhir posisi petanya. Saya bertujuan kalau diaktifkan filter kecamatan muncul desa-desa di kecamatan tsersebut TETAPI dengan posisi tampilan Zoom full extent pada desa-desa di kecamatan tsb, artinya tampil semua polygon desa tsb tanpa kita perlu menggeser petannya.

    Terima kasih sebelumnya

  17. -

    Mas, mohon bantuannya. Gimana ya caranya menampilkan menu/widget print di webgis qgis?

    1. identicon

      -

      Kalau menu print setahu saya mesti custom di script output dari QGIS2Webnya, bisa pakai plugin print/export di OpenLayers atau Leaflet.

  18. -

    Mau Rifki, klo mau buat data hasil exportnya dinamis bagaimana caranya? menghubungkan data web gis dengan database. saat data pada database berubah maka tampilah web juga menyesuaikan. terima kasih jawabannya

    1. identicon

      -

      Kalau mau pakai database, menurut saya mending develop webgis sendiri pakai leaflet/openlayers (diluar plugin QGIS2Web) mas. Datanya nanti bisa ditarik ke WebGIS pakai PHP, atau dipublish dulu ke Geoserver.

  19. -

    Mohon sarannya Pak Rifki
    Saya sudah instal Qgis 2.18.10 tapi setelah saya pakai beberapa bulan ada peringatan seperti ini

    “update of view in private qgis.db failed” dan setiap saya tutup kemudian saya gunakan file yang sudah saya buat tidak bisa disimpan, apa yang harus saya lakukan agar sile yang saya buat bisa disimpan?

    terimakasih

    1. identicon

      -

      Saran Saya mungkin bisa beralih saja ke versi terbaru Pak Agus. Per januari 2023 ini, saya cek versi LTR (long-term repositories) QGIS 3.22.14 ‘Białowieża’.

Leave a reply

Leave a Reply to hastigerina pingkan Cancel reply

Your email address will not be published. Required fields are marked *