0.2.1 • Published 6 years ago
react-arcgis-js v0.2.1
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: