Berikut ini adalah seri tulisan tentang Mengenal Mapbox Maps,
- Mengenal Mapbox Maps - Bagian 1.
- Mapbox Maps dengan Mapbox GL JS V2 - Bagian 2 (tulisan ini).
- Geolokasi Dan Mapbox GL JS - Bagian 3.
Melanjutkan tulisan sebelumnya mengenai peta 3D kustom memakai layanan dari Mapbox, kali ini kita pakai SDK Javascript dari Mapbox untuk membuat peta kustom di web.
MAPBOX GL JS V2
Mapbox GL JS adalah SDK JavaScript yang menyediakan developer akses terhadap data peta dari Mapbox khusus untuk aplikasi web, peta ditampilkan melalui teknologi vektor dan WebGL.
Penggunaannya sangatlah mudah baik secara manual yaitu memakai CDN maupun memakai bundler seperti webpack (tetapi disini Saya tidak akan memakai webpack tetapi snowpack 😉).
Beberapa langkah awal harus dilakukan seperti membuat direktori dan file, bisa memakai cara dibawah ini atau langsung saja pake Explorer di Windows atau OS lain.
mkdir mapbox-web
cd mapbox-web
npm init
npm install --save mapbox-gl
npm install --save-dev snowpack
npx snowpack init
mkdir publik
mkdir src
HTML & CSS + JavaScript
Buat file index.html
, main.js
, dan main.css
di folder src
dengan isi file main.js
seperti berikut
import mapboxgl from 'mapbox-gl';
const lokasiOrigin = [112.52785395580702, -7.871242863671398]; // [lng, lat]
mapboxgl.accessToken = '<TULIS_TOKENMU>';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/pra-pangurakan/ckkuetovf32ei17plyiinmtxo',
center: lokasiOrigin,
zoom: 11, // zoom level,
pitch: 55,
bearing: -35,
logoPosition: 'bottom-left',
antialias: true
});
Kemudian persiapkan akses token yang perlu disikan pada properti mapboxgl.accessToken
diatas.
Akses Token Publik
Token hanya diperlukan jika ingin memakai layanan Mapbox dengan memakai SDK. Developer bisa memperoleh token pada akun di account.mapbox.com dan perlu diingat bahwa token ini bersifat publik sehingga aman jika diekspos ke sisi klien.
Map Object
Untuk membuat peta dengan Mapbox GL JS sangatlah mudah hanya diperlukan membuat objek dari fungsi Map().
Dengan beberapa pilihan (options) seperti
container
untuk id container tag HTML dimana peta akan diletakkan.style
yang akan digunakan pada peta (lihat tulisan sebelumnya tentang membuat style melalui Mapbox Studio).- Default lokasi peta dengan pilihan
center
. - Pilihan
zoom
pada saat peta ditampilkan. - Dan atur pilihan
bearing
danpitch
agar peta terlihat 3D pada saat pertama kali peta dibuka oleh pengguna.
Pada kode diatas peta akan diletakkan pada container ber-id map
dan jangan lupa untuk membuat file index.html
yang merupakan file utama yang akan diakses oleh klien.
index.html
<!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 href='https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.css' rel='stylesheet' />
<link href='main.css' rel='stylesheet' />
<title>Peta 3D Indonesia</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="main.js"></script>
</body>
</html>
CSS hanya diperlukan untuk mengatasi margin dan memposisian peta secara absolute pada koordinat (0,0) sehingga peta akan fullscreen di jendela browser.
main.css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Snowpack
Snowpack disini hanya dijalankan sebagai development server.
Mengapa tidak memakai Webpack atau Rollup?
Jawabannya sangat bergantung tetapi alasan Saya tidak memakai Rollup apalagi Webpack karena menurut Saya kedua tool tersebut terlalu overkill dan hampir lebih dari 90 persen browser sudah mendukung EcmaScript Module sehingga pengembangan apikasi web sekarang sebenarnya gak terlalu bergantung pada bundler.
Konfigurasi
snowpack.config.js
// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/reference/configuration
/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
"src": "/"
},
plugins: [
],
packageOptions: {
},
devOptions: {
},
buildOptions: {
},
};
Konfigurasi snowpack yang perlu diperhatikan adalah mounting yaitu mengekspos direktori sehingga bisa diakses dengan path URL yang telah disetting, pada konfigurasi diatas path URL ada pada root /
.
Untuk menjalankan server development ketik saja perintah berikut
npx snowpack dev
Kemudian snowpack secara otomatis akan membuka default browser dan mengakses peta dari Mapbox.
Tulisan kali ini sangat singkat tetapi semoga menjadi manfaat. Selalu semangat & pantang menyerah Dev! 😁