Tutorial

Belajar Cara Membuat WebGIS Menggunakan Leaflet.Js

Mari kita mulai dengan perkenalan dulu dengan leaflet. Leaflet adalah Library Javascript yang bersifat Open-Source yang memungkinkan kita untuk membuat peta di website. Kita akan berinteraksi dengan Leaflet melalui API yang terdokumentasi dengan baik.

Leaflet juga memiliki ukuran file yang kecil tetapi dikemas dengan fitur yang berguna dan dapat dimanfaatkan lebih jauh dengan pluin. Nah kalau sudah kenal, kalian harus unduh leaflet js disini.

Pada Tutorial kali ini kalian memerlukan:

  • Komputer
  • Akses Internet (Kita perlu internet untuk terhubung API Leaflet).
  • Browser (Mozilla, Chrome, Safari etc.)
  • Text Editor (Sublime Text, Atom Editor, atau Visual Studio Code

Kalian juga harus memahami dasar HTML, CSS dan JS.Hanya ada 5 langkah dasar yang harus kalian ikuti untuk membuat peta pertama kalian.

  1. Buka text editor kalian dan buat file baru dengan ekstensi HTML.
  2. Kemudian ketikkan kode dibawah
<html>
<head>
<title>Leaflet Web Map</title>
<style>
</style>
</head>
<body>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>  
<script>
</script>
</body>
</html>
  1. Setelah itu ketikkan kode CSS dan JS pada di bawah tag head
<!--Ini Css-->
   <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
<!--Ini JS-->
    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
  1. Kemudian kita beri style pada id=map yang sudah kita buat di awal. 
#map {
    width: 960px;
    height:500px;
}

Sekarang Dasar HTML dan CSS untuk MAP kita sudah selesai, tinggal memasukkan JS dan MAP pertama kita akan selesai.

  1. Berikut adalah kode JS untuk inisiliasi MAP
<!--Di sini saya memberi nama variabel L, Kalian bisa mengubahnya di bagian var-->
<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],  
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
</script>

Kode yang sudah lengkap akan terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>

   <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
<style>
#map {
    width: 960px;
    height:500px;
}
</style>
</head>
<body>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>
<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
</script>
</body>
</html>

Sekarang peta pertama kalian sudah selesai, pada tutorial berikutnya kita akan belajar membuat penanda(marker) pada peta leaflet.


Syarifullah Abdi

Share
Tags: GISjavascriptLeafletWebGIS