Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tugas 7

    Diunggah oleh

    AZAM SAPUTRA
    21 tayangan6 halaman

    Judul Asli

    Tugas7

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    21 tayangan6 halaman

    Tugas 7

    Diunggah oleh

    AZAM SAPUTRA

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    TIF80543

    Sistem Informasi
    Geografis/Geographic
    Information System
    Tugas (assignment) 7: Visualisasi GeoJson dan Kelengkapan Interaktifitas Peta
    Dosen: Jumadi, S. Si., M. Sc., PhD.

    Pengantar
    Pada latihan dan tugas kali ini anda akan menggunakan Leaflet untuk
    memvisualisasikan GeoJson dan menambahkan perangkat-perangkat
    interaktifitas misalnya informasi, layer control.

    Material dan Data


    1. Software/library: plugin leaflet-ajax
    (https://github.com/calvinmetcalf/leaflet-ajax).
    2. Data: GeoJson Kecamatan dari Tugas 2.
    3. Script: web SIG script dari tugas 6.

    Kode-kode umum
    Menambahkan leaflet-ajax plugin:

    <script src="leaflet/leaflet.ajax.min.js"></script>

    Menambahkan layer dengan leaflet-ajax:

    var jsonmap = L.geoJson.ajax(URL).addTo(mymap);

    Menambahkan fungsi pada masing-masing fitur:

    function onEachFeatureFunction (feature, layer) {


    layer.on({
    click: onClickFunction
    });

    function onClickFunction(e)
    {
    //jika objek peta di klik akan menunjukan ID objek
    (e.sourceTarget.feature.properties.OBJECTID).
    alert(e.sourceTarget.feature.properties.OBJECTID);
    }
    var jsonmap = L.geoJson.ajax(URL,{onEachFeature:
    onEachFeatureFunction }
    ).addTo(mymap);

    Menambahkan layer kontrol:

    //catatan peta dasar harus diberi nama variabel basemaps lebih


    dahulu.
    var basemaps = {
    "Peta Dasar": basemap
    };
    var maps = {
    "Batas Kecamatan": jsonmap
    };

    L.control.layers(basemaps,maps).addTo(mymap);

    Langkah kerja
    1. Download leaflet ajax plugin dari https://github.com/calvinmetcalf/leaflet-
    ajax.
    2. Extract dan copy plugin leaflet-ajax/dist/leaflet.ajax.js pada folder
    applikasu anda misalnya latihan6/leaflet, sehingga file akan berada pada
    latihan6/leaflet/ leaflet.ajax.js.
    3. Load plugin pada applikasi dengan kode (tambahkan kode berikut pada
    <head> website setelah load leaflet.js.
    <script src="leaflet/leaflet.ajax.min.js"></script>
    4. Kopi data geojson kecamatan anda dari tugas 2 (misalnya
    kartasura.geojson) ke latihan 6. Misalnya: latihan6/ kartasura.geojson.
    5. Beri tambahan kode variabel pada saat load peta dasar (berguna untuk
    pemrograman selanjutnya).
    Kode awal:
    L.tileLayer("https://cartodb-basemaps-
    {s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
    { maxZoom: 18, attribution: '&copy; <a
    href="http://www.openstreetmap.org/copyright">OpenStreetMap</a
    > contributors, &copy; <a
    href="https://cartodb.com/attributions">CartoDB</a>'}).addTo(m
    ymap);
    Perubahan:
    var basemap=L.tileLayer("https://cartodb-basemaps-
    {s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
    { maxZoom: 18, attribution: '&copy; <a
    href="http://www.openstreetmap.org/copyright">OpenStreetMap</a
    > contributors, &copy; <a
    href="https://cartodb.com/attributions">CartoDB</a>'}).addTo(m
    ymap);

    6. Tambahkan geojson pada peta dengan kode:


    var URL = "http://localhost/latihan6/kartasura.geojson";//ubah
    dengan nama file anda
    var jsonmap = L.geoJson.ajax(URL).addTo(mymap);

    7. Coba reload website. Jika tampilan anda kira-kira seperti ini maka anda
    telah berhasil. Selamat.
    8. Menambahkan info pada masing-masing objek (jika diklik kan
    menampilkan informasi). Tambahkan fungsi berikut:
    function onClickFunction(e)
    {
    alert(e.sourceTarget.feature.properties.OBJECTID);
    }
    function onEachFeatureFunction (feature, layer) {
    layer.on({
    click: onClickFunction
    });
    }
    dan anda perlu melakukan perubahan kode pada saat load geojeson (lihat
    poin 6), menjadi seperti di bawah ini:
    var URL = "http://localhost/latihan6/kartasura.geojson";//ubah
    dengan nama file anda
    var jsonmap = L.geoJson.ajax(URL ,{onEachFeature:
    onEachFeatureFunction }).addTo(mymap);

    9. Coba reload website. Jika tampilan anda kira-kira seperti ini jika anda
    klik objek maka anda telah berhasil. Selamat.
    10. Menambahkan laye control. Tambahkan kode berikut pada javascript
    anda.
    var basemaps = {
    "Peta Dasar": basemap
    };

    var maps = {
    "Batas Kecamatan": jsonmap
    };

    L.control.layers(basemaps,maps).addTo(mymap);

    11. Reload website. Jika tampilan anda kira-kira seperti ini maka anda
    telah berhasil. Sekali lagi selamat.
    Tugas
    1. Lakukan desain yang menarik pada halaman web SIG anda dengan melakukan
    modifikasi tata letak, elemen, dan style sehingga menjadi lebih menarik dan
    interaktif. Bisa juga menambahkan berbagai template desain, Bootstrap
    misalnya.
    2. Upload hasilnya di Schoology.

    Anda mungkin juga menyukai