Complete guide to integrating Gomap with MapLibre GL JS for your maritime applications.

Overview

GOMAP is an Indonesia maritime map service built on BIG (Badan Informasi Geospasial) data.

Data Source BIG (Indonesia Geospatial Information Agency)
Attribution © BIG, Enhanced by AMIGOID
Coverage Indonesia, Singapore, Timor-Leste

API Endpoints

Purpose 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

Technical Specifications

Item Value
MBTiles Size ~154MB
Zoom Level 0-12 (map supports up to 14 with overzoom)
Coordinate System WGS 84 (EPSG:4326)
Font Noto Sans (Regular/Bold/Italic)
Glyphs Server OpenFreeMap
CORS Enabled

Integration Methods

Method 1: Using Hosted Style JSON (Recommended)

The simplest way to integrate Gomap. Just point to our hosted style:

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],  // Indonesia center
  zoom: 5,
  attributionControl: false,
});

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

Method 2: With API Key Authentication

For applications requiring API key authentication:

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 };
  },
});

Method 3: Custom Style Configuration

For full control over your map styling: