Bertemu lagi dengan saya, pada kesempatan kali ini teman-teman akan mempelajari bagaimana cara menambahkan tampilan peta ke dalam halaman website teman – teman. Banyak library yang bisa digunakan untuk menampilkan peta dalam website diantaranya Google Maps, Leaflet.js, GEO my WP, dan masih banyak lainnya.
Pada tutorial kali ini kita akan menggunakan library Leaflet untuk menampilkan Peta. Untuk yang belum tau mengenai Leaflet ini, Leaflet adalah sebuah library open source milik JavaScript yang digunakan untuk menampilkan peta interaktif yang diklaim oleh pembuatanya sangat “mobile friendly” atau ramah terhadap tampilan mobile.
Leaflet.js ini sangat ringan yaitu mempunyai bobot program JavaScriptnya hanya 39 KB, dengan mengandung banyak fitur pemetaan yang paling dibutuhkan oleh banyak pengembang web seperti marker. Leaflet.js juga men-support sebagian besar platform mobile atau dekstop, HTML5, CSS3, OpenLayer serta Google Map API. (Menurut saya pribadi yang telah menggunakan leaflet.js untuk membangun situs, Leaflet merupakan library untuk menampilkan peta paling mudah untuk orang yang belum memahami GIS).
Berikut Fitur-Fitur yang dimiliki Leaflet.js:
Sebelum membuat peta nya, seperti biasa kita perlu memasukkan library leaflet pada elemen head di script website, dengan alamat:
<!-- Untuk css leaflet --><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<!-- ini untuk Javascript leaflet, pastikan menaruh ini setelah css leaflet --><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
Untuk membuat tampilan peta sederhana masukkan script dibawah:
<!DOCTYPE html> <html> <head> <title>Peta</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--Ini library css leaflet--> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <!--script javascript leaflet, pastikan berada dibawah css leaflet--> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="" ></script> </head> <body> <h2>Menambahkan Peta Pada website</h2> <div id="mapid" style="width: 600px; height: 400px"></div> <script> var mymap = L.map("mapid").setView([-8.05923, 111.394501], 13); L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", { maxZoom: 18, 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>', id: "mapbox/streets-v11", tileSize: 512, zoomOffset: -1, } ).addTo(mymap); </script> </body> </html>
Penjelasan:
<div id="mapid" style="width: 600px; height: 400px"></div>Ini merupakan area untuk menampilkan peta dimana area ini harus memiliki id (disini saya menggunakan id mapid), sedangkan style="width: 600px; height: 400px" merupakan inline css untuk mengatur tinggi dan lebar dari area div ini.
var mymap = L.map("mapid").setView([-8.05923, 111.394501], 13);Pertama kita akan menginisialisasi tampilan peta dan mengatur tampilan ke koordinat geografis yang kita pilih serta tingkat zoom. mymap merupakan variabel untuk menyimpan data dari peta yang akan ditampilkan. L.map("mapid") digunakan untuk pointer tampilan peta pada element dengan id “mapid”. setView([-8.05923, 111.394501], 13) ini digunakan untuk mengatur koordinat tampilan pusat peta (awal saat halam website di tampilkan) serta untuk mengatur perbesaran peta. Angka -8.05923, 111.394501 adalah Latitude (Lat) dan Longitude (Lng) yang bisa teman – teman lihat pada Google Maps, sedangkan angka 13 adalah tingkat zoom dari peta yang akan ditampilkan.
Selanjutnya pada fungsi ini digunakan untuk menampilkan peta nya. Pada leaflet menggunakan tile layer milik Mapbox Street yaitu tile openstreet map. Untuk dapat menggunakan tile dari Mapbox kita lebih dahulu harus melakukan request token pada webiste mapbox. Jika teman – teman kesulitan membuat token dapat memakai milik dokumentasi dari leaflet seperti contoh diatas.
maxZoom:18 digunakan untuk membatasi perbesaran dari tampilan peta, Attribution:xxx digunakan untuk menampilkan text atribute di kanan bawah peta. id:"mapbox/streets-v11" merupakan fitur id GeoJSON, tileSize:512 digunakan untuk mengatur lebar dan tinggi dari grid peta, menggunakan angkat tertentu mis. 512 berarti mengatur lebar dan tinggi yang sama untuk tampilan grid peta, atau gunakan L.point(lebar,tinggi) untuk mengatur secara terpisah.
Sedangkan zoomOffset:-1 digunakan untuk mengimbangi tampilan zoom dari layar user. addTo(mymap) digunakan untuk menambahkan layer yang telah di atur pada L.tileLayer() ke tampilan peta.
Sekian Penjelasan mengenai dasar cara menambahkan peta ke dalam website dengan menggunakan Leaflet.js, semoga bermanfaat terima kasih.