Docs / Setup / React / ArcGIS

ArcGIS setup

How to use ArcGIS on the Web through MapConductor. @arcgis/core ships bundled, and the package imports Esri's theme CSS for you.

PACKAGE

react-for-arcgis

API KEY

Required

CSS

Automatic

REACT NATIVE

Available

Same provider, other platformsAndroid iOS

View demoStore Map · React ↗

Before you start

Node.js 18 or newer

An ArcGIS Location Platform API key

STEP 01

Install

@arcgis/core comes bundled, and the view imports Esri's theme CSS itself — you do not import it.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-arcgis

STEP 02

Pass the API key to the state hook

The key goes to the state hook, not to the view component's props — props tend to end up in test logs and snapshots.

ArcGISMap.tsxTypeScript · React

const state = useArcGISViewState({
  apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
  mapDesignType: ArcGISDesign.Streets,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

CAUTION

Feed the key from a build-time environment variable (import.meta.env.VITE_* under Vite) and keep it out of source control. It reaches the browser either way, so always restrict it by referrer or domain so exposure is harmless.

STEP 03

Choose between 2D and 3D

ArcGISMapView is the 3D scene view and ArcGISMapView2D the 2D map view. They share the state object, so you can flip between them at runtime.

VERIFY

What you should see

The setup is complete when the ArcGIS map renders.

ArcGISMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { ArcGISDesign, ArcGISMapView2D, useArcGISViewState } from '@mapconductor/react-for-arcgis';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function ArcGISMap() {
  const state = useArcGISViewState({
    apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
    mapDesignType: ArcGISDesign.Streets,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <ArcGISMapView2D state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </ArcGISMapView2D>
  );
}

Map designs

ArcGISDesign maps onto Esri's basemaps; this is a selection.

ArcGISDesign

Notes

Streets / StreetsNight / StreetsRelief

The street map and its variants

Imagery / ImageryLabels

Satellite imagery, with or without labels

Topographic / Terrain

Topographic and terrain

LightGray / DarkGray

Backdrops for your own data

Navigation / NavigationNight

Navigation styles

Oceans / ChartedTerritory / Nova

Further themed styles

Troubleshooting

The map does not appear

Check the key reaches the state hook.
Confirm the key has the ArcGIS services you need enabled.

The bundle is large

@arcgis/core is a big library — dynamically import just the screens that use ArcGIS to keep the initial load down.

Switching providers throws a hook-order error

React will not let the hook call order change. Make one small component per provider that calls its own hook — that is exactly how the sample app's providers/ directory is laid out.

ArcGIS is the choice when you have GIS assets to bring along. Where the shared API stops, pull the native view out of MapViewHolder and drive it directly.