Panduan lengkap untuk mengintegrasikan Gomap dengan MapLibre GL JS untuk aplikasi maritim Anda.

Ikhtisar

GOMAP adalah layanan peta maritim Indonesia yang dibangun berdasarkan data BIG (Badan Informasi Geospasial).

Sumber Data BIG (Badan Informasi Geospasial)
Atribusi © BIG, Enhanced by AMIGOID
Cakupan Indonesia, Singapura, Timor-Leste

Endpoint API

Kegunaan URL
Health Check https://gomap.amigo.my.id/health
Style JSON https://gomap.amigo.my.id/styles/gomap/style.json
Vector Tiles https://gomap.amigo.my.id/data/gomap/{z}/{x}/{y}.pbf
TileJSON https://gomap.amigo.my.id/data/gomap.json
Sprite https://gomap.amigo.my.id/styles/gomap/sprite
Glyphs https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf

Spesifikasi Teknis

Item Nilai
Ukuran MBTiles ~154MB
Level Zoom 0-12 (peta mendukung hingga 14 dengan overzoom)
Sistem Koordinat WGS 84 (EPSG:4326)
Font Noto Sans (Regular/Bold/Italic)
Server Glyphs OpenFreeMap
CORS Diaktifkan

Metode Integrasi

Metode 1: Menggunakan Style JSON yang Di-host (Direkomendasikan)

Cara termudah untuk mengintegrasikan Gomap. Cukup arahkan ke style yang di-host:

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new [maplibregl.Map](http://maplibregl.Map)({
  container: 'map',
  style: '[https://gomap.amigo.my.id/styles/gomap/style.json](https://gomap.amigo.my.id/styles/gomap/style.json)',
  center: [118, -2.5],  // Pusat Indonesia
  zoom: 5,
  attributionControl: false,
});

// Atribusi (Wajib)
map.addControl(
  new maplibregl.AttributionControl({
    customAttribution: '© BIG, Enhanced by AMIGOID',
    compact: false,
  }),
  'bottom-right'
);

Metode 2: Dengan Autentikasi API Key

Untuk aplikasi yang memerlukan autentikasi API key:

const map = new [maplibregl.Map](http://maplibregl.Map)({
  container: 'map',
  style: '[https://gomap.amigo.my.id/styles/gomap/style.json](https://gomap.amigo.my.id/styles/gomap/style.json)',
  transformRequest: (url, resourceType) => {
    if (url.includes('[gomap.amigo.my.id](http://gomap.amigo.my.id)')) {
      return {
        url,
        headers: { 'X-API-Key': YOUR_API_KEY },
      };
    }
    return { url };
  },
});

Metode 3: Konfigurasi Style Kustom

Untuk kontrol penuh atas styling peta Anda: