sistem informasi geografis

Leafletjs tutorial: membuat sistem informasi geografis tower sederhana

Pada artikel sebelumnya kita telah berkenalan dengan Leaflet JS, mulai dari menentukan koordinat latitude dan longitude sampai membuat marka atau penanda. Untuk lebih jalasnya dapat dibaca pada postingan https://framelian.com/leafletjs-tutorial-membuat-peta-online-dengan-mudah-hanya-pakai-notepad/.

Dalam artikel ini kita akan mencoba membuat sebuah Sistem Informasi Geografis sederhana. Contoh yang saya gunakan dalam artikel ini adalah membuat informasi peta lokasi tower. Saya masih menggunakan HTML dan javascript sehingga sistem ini belum memiliki fitur menyimpan data atau bersifat statis.

Fitur yang digunakan dalam sistem informasi ini hanya berisi fitur ikon kustom. Kita akan menggunakan ikon tower atau menara telekomunikasi

Membuat ikon tower kustom Leaflet

Dalam aplikasi ini kita membutuhkan sebuah ikon sebagai representasi simbol tower untuk menggantikan ikon marka bawaan Leafletjs.

Berikut contoh ikon yang saya buat sendiri :

sistem informasi geografis
Contoh icon menara dengan ukuran 30×45 pixel

Anda bebas membuat atau mengkreasikan sendiri ikon custom sesuai dengan selera anda.

Marka dengan ikon menara di atas nantinya akan dipasangkan pada koordinat di lokasi menara-menara.

Menyiapkan dokumen HTML

Langkah berikutnya tentu saja menyiapkan template dokumen dasar HTML agar kode-kode leaflet kita nantinya bisa dijalankan di browser.

Membuat file index.html

Buat sebuah file dengan nama index.html dengan editor kode kesayangan anda. Masukkan kode html seperti berikut ini:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Sistem Informasi Geografis Menara Telekomunikasi</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <main>
    <section>
      <div id="petaku"></div>
    </section>
  </main>

  <footer>
    <p> Hak cipta © Framelian 2020. All rights reserved. License GNU-GPLv3</p>
  </footer>

</body>

</html>

Menambah style pada html

Buat sebuah folder baru pada folder kerja anda, dan beri nama css. Kemudian buatlah sebuah file baru dan beri nama style.css . Buka file style.css kemudian masukkan kode seperti berikut ini:

#petaku { 
   height: 480px; 
}

Menambah tag pemanggil Leafletjs

Tambahkan kode berikut ke dalam bagian akhir pada tag <head>.

// ........Kode sebelumnya
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>
//.........Kode sesudahnya

Kemudian tambahkan kode javascript pada bagian paling akhir tag body, tepat sebelum penutup tag.

<script>
// Kode javascript akan diletakkan di sini
</script>

Mendefinisikan Leaflet untuk membuat Sistem Informasi Geografis

Tambahkan kode inisialisasi leaflet pada tag script seperti pada kode berikut ini:

var petaku = L.map('petaku').setView([-8.789645,120.9735248], 16);

Tile Layer mapbox leafletjs

Tile Layer yang saya gunakan adalah mapbox. Untuk dapat menggunakan tilelayer mapbox, dapatkan token gratisnya dengan mendaftar di website resminya dan copas token di https://account.mapbox.com/

Masukkan kode untuk inisialisasi tilelayer

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 21,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken:  {{ isikan kode token akses dari mapbox }} 
    }).addTo(petaku);

Menampilkan data menara telekomunikasi

Buat sebuah folder baru bernama img. Kemudian taruh file ikon menara di dalam folder tersebut agar ikon tersebut dapat digunakan kemudian. Dalam contoh ini file ikon menara saya beri nama tower-osm.png. Saya menyarankan untuk menggunakan gambar dengan format .png karena file png memiliki fitur transparan sehingga tampilannya lebih oke.

leafletjs tutorial: sistem informasi geografis menara telekomunikasi
Lokasi ikon menara pada folder img

Buka kembali file index.html, kemudian tambahkan kode berikut untuk membuat variabel ikon yang akan ditampilkan pada sistem informasi geografis data tower.

var TowerCredo = L.icon({
        iconUrl: 'img/tower-osm.png',
        iconSize:     [30, 45], // size of the icon
        iconAnchor:   [15, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    var TowerSMPN1 = L.icon({
        iconUrl: 'img/tower-osm.png',
        iconSize:     [30, 45], // size of the icon
        iconAnchor:   [15, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    var TowerTelkom = L.icon({
        iconUrl: 'img/tower-osm.png',
        iconSize:     [30, 45], // size of the icon
        iconAnchor:   [15, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

Kemudian tambahkan kode untuk menampilkan variabel-variabel ikon menara tersebut di dalam peta:

L.marker([-8.786195, 120.973341], {icon: TowerCredo}).addTo(petaku).bindPopup("Tower Credo cafe");
    L.marker([-8.789579, 120.973099], {icon: TowerSMPN1}).addTo(petaku).bindPopup("Tower SMPN 1 Bajawa");
    L.marker([-8.787376, 120.975841], {icon: TowerTelkom}).addTo(petaku).bindPopup("Tower PT.Telkom Bajawa");

Kode lengkap leafletjs tutorial ini seperti berikut :

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Sistem Informasi Geografis Menara Telekomunikasi</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>
</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <main>
    <section>
      <div id="petaku"></div>
    </section>
  </main>

  <footer>
    <p> © Framelian 2020. All rights reserved. </p>
  </footer>
  <script>
    var petaku = L.map('petaku').setView([-8.789645,120.9735248], 16);
    var TowerCredo = L.icon({
        iconUrl: 'img/tower-osm.png',
        iconSize:     [30, 45], // size of the icon
        iconAnchor:   [15, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    var TowerSMPN1 = L.icon({
        iconUrl: 'img/tower-osm.png',
        iconSize:     [30, 45], // size of the icon
        iconAnchor:   [15, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    var TowerTelkom = L.icon({
        iconUrl: 'img/tower-osm.png',
        iconSize:     [30, 45], // size of the icon
        iconAnchor:   [15, 45], // point of the icon which will correspond to marker's location
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    L.marker([-8.786195, 120.973341], {icon: TowerCredo}).addTo(petaku).bindPopup("Tower Credo cafe");
    L.marker([-8.789579, 120.973099], {icon: TowerSMPN1}).addTo(petaku).bindPopup("Tower SMPN 1 Bajawa");
    L.marker([-8.787376, 120.975841], {icon: TowerTelkom}).addTo(petaku).bindPopup("Tower PT.Telkom Bajawa");

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 21,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: {{ token mapbox }}
    }).addTo(petaku);

  </script>

</body>

</html>

Download kode leafletjs tutorial membuat sistem informasi geografis sederhana

Kode dalam tutorial ini dapat diunduh di repository Github saya: https://github.com/Framelian/simenara

Leave a Reply