Skip to main content

Documentation

A TypeScript library that bridges Esri ArcGIS REST services with MapLibre GL JS and Mapbox GL JS, replicating Esri Leaflet's architecture patterns.

Quick Start​

esri-gl helps you create sources for use within MapLibre GL JS and Mapbox GL JS. It supports a range of raster and vector datasources provided by the Esri/ArcGIS ecosystem.

Installation​

npm install esri-gl

Basic Usage​

Import the desired service class and create sources that are automatically added to your map:

import { DynamicMapService } from 'esri-gl';

// Create the source
new DynamicMapService('usa-source', map, {
  url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer',
});

// Add it as a layer to your map
map.addLayer({
  id: 'usa-layer',
  type: 'raster',
  source: 'usa-source',
});

Authentication​

esri-gl runs every ArcGIS request through the official ArcGIS REST JS client. Pass a token, an apiKey, or an authentication manager to any service or task:

import { DynamicMapService, ArcGISIdentityManager } from 'esri-gl';

new DynamicMapService('source', map, { url, apiKey: 'AAPK…' });

const session = await ArcGISIdentityManager.signIn({ username, password });
new DynamicMapService('source', map, { url, authentication: session });

See the Authentication guide for details.

Resolve from a Portal item​

Don't have the service URL? Pass an ArcGIS portal item id (a 32-character hex string) anywhere a service url is expected, and await sourceReady before adding the layer:

import { DynamicMapService } from 'esri-gl';

const service = new DynamicMapService('usa-source', map, {
  url: 'd5e02a0c1f2b4ec399823fdd3c2fdebd', // portal item id
  apiKey: 'AAPK…',
});

await service.sourceReady;
map.addLayer({ id: 'usa-layer', type: 'raster', source: 'usa-source' });

A whole Web Map can be resolved into one service per operational layer with servicesFromWebMap. See the Portal Items guide.

CDN Usage​

Load the package via CDN:

<script src="https://unpkg.com/esri-gl/dist/index.umd.js"></script>
new esrigl.DynamicMapService('usa-source', map, {
  url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer',
});

map.addLayer({
  id: 'usa-layer',
  type: 'raster',
  source: 'usa-source',
});

What's Next?​

  • Authentication — Tokens, API keys, and auth managers
  • Portal Items — Resolve item ids and Web Maps to services
  • Services — Core service classes and API reference
  • Tasks — Identify, Query, and Find operations
  • Examples — Interactive demos and code samples