Learn how to integrate Gomap into your JavaScript or TypeScript applications using MapLibre GL JS.

Installation

Via NPM

npm install maplibre-gl

Via Yarn

yarn add maplibre-gl

Via CDN

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

Basic Integration

JavaScript

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, resourceType) => {
    if (url.includes('gomap-api')) {
      return {
        url: url,
        headers: {
          'X-API-Key': process.env.GOMAP_API_KEY
        }
      };
    }
  }
});

// Add navigation controls
map.addControl(new maplibregl.NavigationControl());
map.addControl(new maplibregl.ScaleControl());

TypeScript

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

interface MapConfig {
  container: string;
  center: [number, number];
  zoom: number;
}

const config: MapConfig = {
  container: 'map',
  center: [106.8456, -6.2088],
  zoom: 10
};

const map: [maplibregl.Map](http://maplibregl.Map) = new [maplibregl.Map](http://maplibregl.Map)({
  ...config,
  style: '[https://gomapapi.amigo.id/api/tiles/style.json](https://gomap-api.amigo-e73.workers.dev/api/tiles/style.json)',
  transformRequest: (url: string, resourceType?: string) => {
    if (url.includes('gomap-api')) {
      return {
        url: url,
        headers: {
          'X-API-Key': process.env.GOMAP_API_KEY!
        }
      };
    }
  }
});

React Integration

Function Component

import { useEffect, useRef } from 'react';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

function MapComponent() {
  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, resourceType) => {
        if (url.includes('gomap-api')) {
          return {
            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: '600px' }} 
    />
  );
}

export default MapComponent;

Vue Integration

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

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

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

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, resourceType) => {
      if (url.includes('gomap-api')) {
        return {
          url: url,
          headers: {
            'X-API-Key': import.meta.env.VITE_GOMAP_API_KEY
          }
        };
      }
    }
  });
});

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

<style scoped>
.map-container {
  width: 100%;
  height: 600px;
}
</style>

Adding Markers

// Simple marker
const marker = new maplibregl.Marker()
  .setLngLat([106.8456, -6.2088])
  .addTo(map);

// Marker with popup
const popup = new maplibregl.Popup({ offset: 25 })
  .setHTML('<h3>Jakarta</h3><p>Capital of Indonesia</p>');

const markerWithPopup = new maplibregl.Marker()
  .setLngLat([106.8456, -6.2088])
  .setPopup(popup)
  .addTo(map);

// Custom marker
const el = document.createElement('div');
el.className = 'custom-marker';
[el.style](http://el.style).backgroundImage = 'url(/marker-icon.png)';
[el.style](http://el.style).width = '32px';
[el.style](http://el.style).height = '32px';

const customMarker = new maplibregl.Marker({ element: el })
  .setLngLat([106.8456, -6.2088])
  .addTo(map);