Skip to main content

MapLibre Integration

Installation​

npm install maplibre-gl

Basic Map​

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

const map = new maplibregl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      arohon: {
        type: 'vector',
        tiles: ['https://map.arohon.co/tiles/{z}/{x}/{y}'],
        minzoom: 0,
        maxzoom: 14
      }
    },
    layers: [
      { id: 'water', type: 'fill', source: 'arohon', 'source-layer': 'water', paint: { 'fill-color': '#aad3df' } },
      { id: 'roads', type: 'line', source: 'arohon', 'source-layer': 'roads', paint: { 'line-color': '#019157', 'line-width': 2 } }
    ]
  },
  center: [90.41, 23.81],
  zoom: 12
});

Auth for Tiles​

Add transformRequest to pass your API key:

const map = new maplibregl.Map({
  // ...
  transformRequest: (url, resourceType) => {
    if (resourceType === 'Tile' && url.startsWith('https://map.arohon.co'))
      return { url, headers: { 'Authorization': 'Bearer ' + apiKey } };
    return { url };
  }
});

Coordinates​

Use [longitude, latitude] (GeoJSON order). Dhaka: [90.41, 23.81].