Web GIS : Implementasi Leaflet dan Geojson Peta Indonesia

Pada artikel ini, gua mencoba sharing ke pembaca hasil coba coba gua belajar koding web yang berbasis GIS. Bisa dikatakan ini adalah kodingan pertama gua mengenai web GIS. Yaaa, meskipun pas kuliah juga sebenarnya sempat belajar sih mengenai web GIS ini, tapi baru sedikit paham setelah gua coba coba lagi saat ini.

Nah, pada proses belajar gua kali ini, gua mencoba untuk dapat menampilkan maps yang memusatkan titik koordinat nya pada peta Indonesia. Kemudian, melapisi peta Indonesia pada base maps tersebut dengan menggunakan data geojson. Sehingga, peta Indonesia yang ditampilkan dapat memiliki warna dasar yang berbeda.

Oke, langsung aja ini berikut langkah langkah persiapan dan kodingannya. Sebelumnya, seperti biasa pada artikel ini gua menggunakan Codeiginter 3, Jquery dan library javascript Leaflet.

1. Persiapan

Copy data geojson maps Indonesia melalui Link ini Download Geojson Data Maps Indonesia. Untuk data geojson ini gua coba mencari data yang sudah ada di Internet. Karena, jujur aja gua juga belum paham bagaimana cara membuat data geojson ini.

Nah, setelah kalian copy data geojson-nya, buat file baru di notepad atau aplikasi sejenisnya, paste data geojson-nya, kemudian save as file tersebut di folder assets projek kalian dengan format json.

2. Membuat file class Controller

Pada artikel ini, file controller sebenarnya hanya untuk me-load file view nya saja. Karena, belum ada proses apa apa yang dilakukan

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Maps_leaflet extends CI_Controller {
	public function index()
	{

		$this->load->view('maps_leaflet');
	}	
}

3. Membuat file View

File view mungkin inti dari kodingan pada artikel ini. Oke, langsung aja pada tag head, silahkan load script dan css bootstrap, jquery dan library leaflet

<!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- load script package jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- load script package bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<!-- load file css leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
<style type="text/css">
	#map { height: 500px; }
</style>
<!-- load file js leaflet -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

selanjutnya, pada tag body, buat tag div dengan id map untuk tempat menyisipkan maps

<div class="container">
	<div class="row" style="margin-top: 50px">
		<div class="col-sm-12">
			<!-- tag div dengan id map untuk menyisipkan maps -->
			<div id="map"></div>         
		</div>   
	</div>
</div>

Selanjutnya, buat tag script yang berisikan script seperti dibawah ini. Untuk penjelasannya, gua coba sertakan di setiap baris kodingan ya..

<script type="text/javascript">
	var geojson_id = '', map;

	// proses baca file json yang ada di path /asssets/files/
	// sesuaikan path ini dengan lokasi tempat kalian menyimpan file data geojson
	$.getJSON("/assets/files/geojson-id.json", function(data){
		//deklarasi variable map dengan fungsi L.map
		geojson_id = data;//variabel yang isinya data geojson
		var map = L.map('map', {
					scrollWheelZoom: false, //disable zoom melalui scroll pada mouse
					zoomControl: false //disable zoom control (static)
				}).setView([-3.1073741,117.4016219], 4.50); //set titik koordinat center dan zoom
															//sesuaikan titik koordinat dan zoom ini dengan posisi maps yang
															//ingin ditampilkan secara default 
		
		//set base maps menggunakan google maps
		L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
			attribution: 'Map &copy; <a href="https://maps.google.com/">Google Maps</a>',
			subdomains:['mt0','mt1','mt2','mt3']
		}).addTo(map);

		//style untuk geojson, silahkan ubah sesuai kebutuhan
		function style(feature) {
			return {
				fillColor: '#ff7800',
				weight: 2,
				opacity: 1,
				color: '#ff7800',
				dashArray: '3',
				fillOpacity: 0.7
			};
		}

		//fungsi untuk menggunakan geojson
		L.geoJSON(geojson_id, {
			style: style
		}).addTo(map);   

	}).fail(function(){
		console.log("An error has occurred.");
	});

</script>

dan berikut full kodingan file View nya

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Geojson dengan Leaflet.js</title>

        <!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
        <!-- load script package jquery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <!-- load script package bootstrap.js -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

        <!-- load file css leaflet -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
        <style type="text/css">
            #map { height: 500px; }
        </style>
        <!-- load file js leaflet -->
        <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    </head>
    <body>
        <div class="container">
            <div class="row" style="margin-top: 50px">
                <div class="col-sm-12">
                    <!-- tag div dengan id map untuk menyisipkan maps -->
                    <div id="map"></div>         
                </div>   
            </div>
        </div>
        <script type="text/javascript">
            var geojson_id = '', map;

            // proses baca file json yang ada di path /asssets/files/
            // sesuaikan path ini dengan lokasi tempat kalian menyimpan file data geojson
            $.getJSON("/assets/files/geojson-id.json", function(data){
                //deklarasi variable map dengan fungsi L.map
                geojson_id = data;//variabel yang isinya data geojson
                var map = L.map('map', {
                            scrollWheelZoom: false, //disable zoom melalui scroll pada mouse
                            zoomControl: false //disable zoom control (static)
                        }).setView([-3.1073741,117.4016219], 4.50); //set titik koordinat center dan zoom
                                                                    //sesuaikan titik koordinat dan zoom ini dengan posisi maps yang
                                                                    //ingin ditampilkan secara default 
                
                //set base maps menggunakan google maps
                L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
                    attribution: 'Map &copy; <a href="https://maps.google.com/">Google Maps</a>',
                    subdomains:['mt0','mt1','mt2','mt3']
                }).addTo(map);

                //style untuk geojson, silahkan ubah sesuai kebutuhan
                function style(feature) {
                    return {
                        fillColor: '#ff7800',
                        weight: 2,
                        opacity: 1,
                        color: '#ff7800',
                        dashArray: '3',
                        fillOpacity: 0.7
                    };
                }

                //fungsi untuk menggunakan geojson
                L.geoJSON(geojson_id, {
                    style: style
                }).addTo(map);   

            }).fail(function(){
                console.log("An error has occurred.");
            });

        </script>
    </body>
</html>

Nah, jika kita coba jalankan di browser, kira kira hasilnya akan menjadi seperti ini
Hasil Implementasi Data Geojson Indonesia dengan Leaflet