Panduan lengkap untuk mengintegrasikan Gomap dengan JavaScript dan TypeScript menggunakan MapLibre GL JS.

🚀 Quick Start

Instalasi

Via CDN:

<script src='[https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>](https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>)
<link href='[https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css](https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css)' rel='stylesheet' />

Via npm:

npm install maplibre-gl

Basic Map

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

const map = new [maplibregl.Map](http://maplibregl.Map)({
  container: 'map',
  style: '[https://gomapapi.amigo.id/api/tiles/style.json](https://gomap-api.amigo-e73.workers.dev/api/tiles/style.json)',
  center: [106.8456, -6.2088], // Jakarta
  zoom: 10,
  transformRequest: (url) => {
    return {
      url: url,
      headers: { 'X-API-Key': 'YOUR_API_KEY' }
    }
  }
});

TypeScript Setup

Install Types

npm install --save-dev @types/maplibre-gl

TypeScript Config

import maplibregl from 'maplibre-gl';

interface GomapConfig {
  apiKey: string;
  center: [number, number];
  zoom: number;
}

class GomapClient {
  private map: [maplibregl.Map](http://maplibregl.Map);
  
  constructor(config: GomapConfig) {
    [this.map](http://this.map) = new [maplibregl.Map](http://maplibregl.Map)({
      container: 'map',
      style: '[https://gomapapi.amigo.id/api/tiles/style.json](https://gomap-api.amigo-e73.workers.dev/api/tiles/style.json)',
      center: [config.center](http://config.center),
      zoom: config.zoom,
      transformRequest: (url: string) => {
        return {
          url,
          headers: { 'X-API-Key': config.apiKey }
        }
      }
    });
  }
}

// Usage
const gomap = new GomapClient({
  apiKey: process.env.GOMAP_API_KEY!,
  center: [106.8456, -6.2088],
  zoom: 10
});

Framework Integration

React

import { useEffect, useRef } from 'react';
import maplibregl from 'maplibre-gl';

export function GomapComponent() {
  const mapContainer = useRef<HTMLDivElement>(null);
  const map = useRef<[maplibregl.Map](http://maplibregl.Map) | null>(null);

  useEffect(() => {
    if (!mapContainer.current) return;

    map.current = new [maplibregl.Map](http://maplibregl.Map)({
      container: mapContainer.current,
      style: '[https://gomapapi.amigo.id/api/tiles/style.json](https://gomap-api.amigo-e73.workers.dev/api/tiles/style.json)',
      center: [106.8456, -6.2088],
      zoom: 10,
      transformRequest: (url) => ({
        url,
        headers: { 'X-API-Key': process.env.REACT_APP_GOMAP_API_KEY! }
      })
    });

    return () => map.current?.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />;
}

Vue 3

<template>
  <div ref="mapContainer" style="width: 100%; height: 400px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import maplibregl from 'maplibre-gl';

const mapContainer = ref<HTMLDivElement>();
let map: [maplibregl.Map](http://maplibregl.Map);

onMounted(() => {
  if (!mapContainer.value) return;

  map = new [maplibregl.Map](http://maplibregl.Map)({
    container: mapContainer.value,
    style: '[https://gomapapi.amigo.id/api/tiles/style.json](https://gomap-api.amigo-e73.workers.dev/api/tiles/style.json)',
    center: [106.8456, -6.2088],
    zoom: 10,
    transformRequest: (url) => ({
      url,
      headers: { 'X-API-Key': import.meta.env.VITE_GOMAP_API_KEY }
    })
  });
});

onUnmounted(() => map?.remove());
</script>

Angular