react-arcgis-js

A set of React components for the 4.0 version of the ArcGIS API for JavaScript

Installation

Add the package from npm:

$ npm install --save react-arcgis-js
# or
$ yarn add react-arcgis-js

Load the JS API styles:

<link href="https://js.arcgis.com/4.6/esri/css/main.css" rel="stylesheet">

Basic Usage

Render a Map:

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-arcgis-js';

ReactDOM.render(
  <Map />,
  document.getElementById('root')
);

Render a Map and FeatureLayer

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Feature } from 'react-arcgis-js';

ReactDOM.render(
  <Map>
    <Feature itemId="8444e275037549c1acab02d2626daaee"/>
  </Map>,
  document.getElementById('root')
);

Examples available at https://brygrill.github.io/react-arcgis-js

Components

Map

Render a Map or WebMap. Pass an itemId prop to render WebMap via Portal Item ID or pass a baseMap prop to render a Map.

Props:

| Property | Type | Required | Default | Description | | --- | --- | --- | --- | ----- | | itemId | string | false | None | Id of webmap to load | | baseMap | string | false | streets-navigation-vector | Basemap to load | | height | string | false | 500px | height of map container in px or % | | width | string | false | 100% | width of map container in px or % | | center | array | false | [-122.41, 37.77] | coordinates to center the map on | | zoom | number | false | 10 | starting zoom level of the map | | webGL | boolean | false | false | load dojo config to enable WebGL Feature Layers | | onLoadingContent | any | false | Loading... | string or component to render while loading map | | onErrorContent | any | false | Error loading map... | string or component to render on error | | onError | function | false | None | Will return on error to handle as you wish | | onMapClick | function | false | None | Will return mapPoint and graphics object on map click |

Map Children:
The following props are passed to child components of <Map/>:

| Property | Type | Description | | --- | --- | ----- | | map | object | Map or WebMap object | | view | object | MapView object | | loading | boolean | loading status | | error | boolean | error status |

Feature

Render a FeatureLayer as a child of <Map/> component. Pass a url prop to render via service URL or itemId to render via Portal Item ID.

Props:

| Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | url | string | false | None | render FeatureLayer via service URL | | itemId | string | false | None | render FeatureLayer via Portal Item ID |

Acknowledgments

Wouldn't be possible without these projects:

• react-arcgis
• esri-loader