ArcGIS Maps SDK¶

The ArcGIS Maps SDK for JavaScript is Esri's mapping library. Like OpenLayers it is fully modular, so the Terra Draw adapter receives the classes it needs via lib.

To use it locally:

pnpm install -D @arcgis/core terra-draw-arcgis-adapter

What changes vs MapLibre¶

1. Imports¶

import EsriMap from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer.js';
// ...plus the geometry/symbol classes the adapter needs (see below)
import { TerraDrawArcGISMapsSDKAdapter } from 'terra-draw-arcgis-adapter';

2. Map creation¶

ArcGIS separates the map (data) from the view (rendering):

const map = new EsriMap({ basemap });
const view = new MapView({
    container: 'map',
    map,
    center: [132.4553, 34.3966],
    zoom: 12
});

Basemaps and API keys

Esri's own basemaps (e.g. basemap: 'topo-vector') require an ArcGIS API key. The live example below instead builds a keyless basemap from CARTO raster tiles with a WebTileLayer, so it runs without any key.

3. The adapter — and when to start¶

The adapter wraps the view, not the map:

adapter: new TerraDrawArcGISMapsSDKAdapter({
    lib: {
        GraphicsLayer, Graphic, Point, Polyline, Polygon,
        SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
        PictureMarkerSymbol, Color
    },
    map: view
})

view.when(() => {
    draw.start();
});

Live example¶

What's Next?¶

One library left — and it is not a flat map at all: CesiumJS, a 3D globe.