kali ini kita akan membuat peta di website dengan mapbox gl js https://docs.mapbox.com/mapbox-gl-js/api/
untuk pertama buatlah akun mapbox https://account.mapbox.com/
lalu buat project/token baru dan copy token yang ada
jika sudah buatlah file html dengan struktur dasar html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peta</title>
</head>
<body>
</body>
</html>
kemudian di dalam body buatlah elemen div baru dengan id “peta” bisa di sesuaikan yang kalian mau
<div id="peta" style="width: 100%;height: 100vh;"></div>
kalian bisa mengatur ukuran mapnya dengan css
berikutnya kita akan menambah script dan link style dari mapboxnya
dibagian head tambahkan links style mapboxnya
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
kemudian di bagian body setelah elemen div peta tambahkan link script js mapboxnya
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
setelah itu buat tag script dan kita memasukan script untuk menampilkan map-nya
<script>
mapboxgl.accessToken = 'ACCESS_TOKEN_MU';
var map = new mapboxgl.Map({
container: 'peta',//id elemen html
style: 'mapbox://styles/mapbox/streets-v11',
center:[106.69972796989238, -6.238601629433243],//koordinat lokasi garis bujur dan lintang,longitude dan latitude
zoom: 9 // starting zoom
});
</script>
dibagian attribute container merupakan di elemen yang akan di beri peta oleh mapbox
attribute style merupakan style peta yang di sediakan mapbox
lalu atrribute center merupakan koordinat yang akan di jadikan view awal map jadi contohnya sekarang kita menggunakan koordinat wilayah sekitaran jawa barat,di mapbox format nilai koordinat adalah garis bujur,longtitude kemudian garis lintang/latitude sedangkan jika kita mengambil koordinat dari google map format koordinatnya adalah lintang dulu baru bujur
attribute zoom untuk mengatur zoom saat map di muat makin besar nilainya makin dekat mapnya
maka hasilnya kira-kira akan seperti ini
ok berikutnya kita akan menamhkan marker atau penanda di map
new mapboxgl.Marker().setLngLat([106.69972796989238, -6.238601629433243])
.addTo(map)
kalian bisa memberikan nilai koordinat sesuka kalian dan tentunya perlu di ingat bahwa nilai awalnya adalah garis bujur/longitude lalu garis lintang/latitude
maka hasilnya akan seperti ini
berikutnya kita akan menambahkan fitur pencarian di mapnya
pertama kita masukan link style fitur pencariannya di dalam tag head
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css">
lalu link script jsnya di dalam tag body
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
kemudian di kita panggil pluginnya
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
marker:false,
placeholder: 'Masukan kata kunci...',
zoom:20
});
map.addControl(
geocoder
);
hasilnya akan seperti ini,kita bisa lihat di pojok kanan atas akan ada inputan untuk pencarian lokasinya
ok kali ini sampai di sini dulu ya berikut script lengkapnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peta</title>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css">
</head>
<body>
<div id="peta" style="width: 100%;height: 100vh;"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<script>
mapboxgl.accessToken = 'ACCESS_TOKEN_MAPBOX_MU';
var map = new mapboxgl.Map({
container: 'peta',
style: 'mapbox://styles/mapbox/streets-v11',
center: [106.69972796989238, -6.238601629433243],
zoom: 9
});
new mapboxgl.Marker().setLngLat([106.69972796989238, -6.238601629433243])
.addTo(map)
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
marker:false,
placeholder: 'Masukan kata kunci...',
zoom:20
});
map.addControl(
geocoder
);
</script>
</body>
</html>
Yoi 
One thought on “Membuat peta atau map di web dengan mapbox”