Bekerja Membuat Peta Digital Dengan Leafletjs

Bekerja Membuat Peta Digital Dengan Leafletjs – Leaflet js adalah sebuah library javascript yang digunakan untuk menampilkan peta berbasis aplikasi web dengan lisensi open source alias geratis. Pertama rilis tahun 2011. Diciptakan oleh Vladimir Agafonkin.

Dengan memanfaatkan leaflet, developer yang tidak memiliki latar belakang GIS pun dapat dengan mudah menampilkan peta interaktif berbasis web pada server. Leaflet mampu menampilkan layer dari file geojson, memberi style dan membuat layer yang interaktif seperti menampilkan marker yang menampilkan popup informasi ketika di klik.

Cara Membuat Peta Digital Dengan Leaflet

membuat peta digital dengan leaflet, di localhost, atau server local dibutuhkan.

XAMPP Control Panel v3.3.0
Vs Code
https://leafletjs.com/

membuat sebuah file, misal namnya peta.php

masukkan CSS pada bagian head

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

masukkan Javascript setelah CSS

 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

masukkan ditempat kamu ingin memunculkan map, letakkan didalam tag <body></body>

 <div id="mapid"></div>

buat sebuah tag <script> untuk memasukkan java script kemudian ditutup dengan tag </script> menentukan letak tengah peta yang akan ditampilkan

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

menggunakan peta dari openstreetmap

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);

untuk menambahkan marker

var marker = L.marker([51.5, -0.09]).addTo(mymap);

code lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
   <style>
       #mapid { height: 180px; }
   </style>
    <title>Document</title>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

	var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);

	var marker = L.marker([51.5, -0.09]).addTo(mymap);
</script>



</body>
</html>

hasil

dengan membuat SIG ini, kalian dapat menanfaatkan untuk beberapa keperuan, bagi kalian belum tau mengenai manfaat Sistem Informasi Geografis, kalian dapat membaca manfaat sistem informasi geografis