xiakeweian/arcgis-react-redux-legend

:seedling: Legend control for ArcGIS JS v4 using React and Redux

ArcGIS JS API V4 Legend

Combined legend and layer list control for the ArcGIS JS API V4.6+ that uses React and Redux

Run locally

grab this repo (fork / download) then run npm install wait a while and then get running with npm start then go to http://localhost:3000. You can also append a webmap query paramter to load a webmap from ArcGIS Online http://localhost:3000?webmap=8e42e164d4174da09f61fe0d3f206641.

Usage

If you are using 4.3 or lower of the ArcGIS JS API then make sure you use version 1.x of this control, version 2.x is for the ArcGIS API v4.4 to v4.6., version 3.x is for v4.6 or higher

You can now achieve similar functionality using the base ArcGIS JS API with this example so consider that as an alternative to this component

To add to your site first make sure you have the dependencies installed, we assume you are using React, Redux and Esri Loader. For the full list refer to the package.json peerDependencies.

npm install esri-loader prop-types react react-dom react-redux redux redux-thunk arcgis-react-redux-legend

you can also use this with Preact by including preact-compat, see preact-legend

Now add the reducer

import {combineReducers} from 'redux';
import {reducer as mapLegendReducer} from 'arcgis-react-redux-legend';

const reducer = combineReducers(
  {    
    mapLegendConfig: mapLegendReducer
  }
);

then where you are creating your map control you need to add the MapLegend component and initialise it

import {MapLegend,setInitialLegend} from 'arcgis-react-redux-legend';

// bootstrap the Esri API using esri-loader and create your view
// mapId should be the unique name / id to identify the map. 
// You can add multiple maps and legends so long as the mapId is unique
this.props.dispatch(setInitialLegend(view, mapId));

// in your render function, use the ref to pass to the Esri JS API when creating the map and view
<div ref={node => (this.mapView = node)}>
  <MapLegend mapId={mapId} title='My awesome legend' />
</div>

setInitialLegend will listen for your view being ready and also watch the scale changing so that the legend scale dependency updates accordingly.

For a complete example check out the source in the docs folder for map-view

Currently supports MapImageLayers, FeatureLayers, GraphicsLayers, StreamLayers, SceneLayers, PointCloudLayers, and MapNotesLayers.