Mapbox Maps di Aplikasi Web - Bagian 2

MAPBOXPETA 3DPETA INDONESIAMAPBOX MAPSMAPBOX MAPS GL

Berikut ini adalah seri tulisan tentang Mengenal Mapbox Maps,

  1. Mengenal Mapbox Maps - Bagian 1.
  2. Mapbox Maps dengan Mapbox GL JS V2 - Bagian 2 (tulisan ini).
  3. 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 dan pitch 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.

peta 3d

Tulisan kali ini sangat singkat tetapi semoga menjadi manfaat. Selalu semangat & pantang menyerah Dev! 😁

Komentar