Tiles

JavaScript SDK

Initialize interactive maps with @gebeta/js and @gebeta/react — configure styles, controls, and access the underlying MapLibre instance.

Map Setup

Basic map

import { GebetaMaps } from '@gebeta/js';
 
const gebetaMap = new GebetaMaps({
  auth: { accessToken, refreshToken }
});
 
const map = gebetaMap.init({
  container: 'map',           // DOM element ID or HTMLElement
  center: [38.7685, 9.0161],  // [lng, lat] — defaults to Addis Ababa
  zoom: 12,
  navigationControl: true,    // adds zoom/compass controls
});

Map styles

import { API } from '@gebeta/api';
 
gebetaMap.init({
  container: 'map',
  style: API.Map.Constants.MAP_STYLES.STANDARD, // default
  // style: API.Map.Constants.MAP_STYLES.SATELLITE,
  // style: API.Map.Constants.MAP_STYLES.TERRAIN,
});

Accessing the underlying MapLibre instance

const map = gebetaMap.getMap();
 
// Now you can use any MapLibre GL JS API directly
map.on('click', (e) => {
  console.log(e.lngLat);
});

React

import { GebetaMap } from '@gebeta/react';
 
function App() {
  return (
    <GebetaMap
      accessToken={accessToken}
      refreshToken={refreshToken}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

TIP

The GebetaMap React component manages the map lifecycle automatically. Use the onReady callback to access the GebetaMaps instance and managers.

Previous

Overview

Next

Flutter SDK

On this page

Map SetupBasic mapMap stylesAccessing the underlying MapLibre instanceReact