How can I use an Esri Arcgis map in a ReactJs project?

Question

I'm trying to use esri card. To include the map in my project, here is what I found:

require([ "esri/map", "esri/dijit/Search", "esri/dijit/LocateButton", "esri/geometry/Point", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", 

But there is no esri folder or npm package. Therefore, I am confused here. How is esri imported into the project?

Answer 1

An alternative method to the above is the method described in esri-react-router-example . This application uses the esri-loader library to lazy load the ArcGIS API only in those components / routes where it is needed. Example:

First install the esri-loader library:

 npm install esri-loader --save 

Then import the esri-loader functions into any responsive module:

 import * as esriLoader from 'esri-loader' 

Then the lazy loading of the ArcGIS API:

 componentDidMount () { if (!esriLoader.isLoaded()) { // lazy load the arcgis api const options = { // use a specific version instead of latest 4.x url: '//js.arcgis.com/3.18compact/' } esriLoader.bootstrap((err) => { if (err) { console.error(err) } // now that the arcgis api has loaded, we can create the map this._createMap() }, options) } else { // arcgis api is already loaded, just create the map this._createMap() } }, 

Then download the ArcGIS API (Dojo) modules that are needed to create the map:

 _createMap () { // get item id from route params or use default const itemId = this.props.params.itemId || '8e42e164d4174da09f61fe0d3f206641' // require the map class esriLoader.dojoRequire(['esri/arcgis/utils'], (arcgisUtils) => { // create a map at a DOM node in this component arcgisUtils.createMap(itemId, this.refs.map) .then((response) => { // hide the loading indicator // and show the map title // NOTE: this will trigger a rerender this.setState({ mapLoaded: true, item: response.itemInfo.item }) }) }) } 

The advantage of using esri-loader over the above approach is that you do not need to use the loader and the Dojo toolchain to download and build the entire application. You can use the React toolchain of your choice (webpack, etc.).

This blog post explains how this approach works and compares it to other (similar) approaches used in applications like esri-redux .

Answer 2

Use esri-loader to load the required esri modules. This is a basic component rendering map.

 import React, { Component } from 'react'; import { loadModules } from 'esri-loader'; const options = { url: 'https://js.arcgis.com/4.6/' }; const styles = { container: { height: '100vh', width: '100vw' }, mapDiv: { padding: 0, margin: 0, height: '100%', width: '100%' }, } class BaseMap extends Component { constructor(props) { super(props); this.state = { status: 'loading' } } componentDidMount() { loadModules(['esri/Map', 'esri/views/MapView'], options) .then(([Map, MapView]) => { const map = new Map({ basemap: "streets" }); const view = new MapView({ container: "viewDiv", map, zoom: 15, center: [78.4867, 17.3850] }); view.then(() => { this.setState({ map, view, status: 'loaded' }); }); }) } renderMap() { if(this.state.status === 'loading') { return <div>loading</div>; } } render() { return( <div style={styles.container}> <div id='viewDiv' style={ styles.mapDiv } > {this.renderMap()} </div> </div> ) } } export default BaseMap; 

It displays the basemap, but it does not respond. If I delete the div around the div, or if I give the height and width of the outer div (the surrounding viewDiv) as relative ({height: '100%', width: '100%'}), the map does not display, I don’t know why. Any suggestions to make it responsive would be appreciated.

Answer 3

You do not need to import esri api as you do for ReactJS. Since the reaction file is finally compiled into the js file, you need to write the esri parts as is and mix the ReactJS part to handle the dom node, which is the main purpose of ReactJS.

A sample of the links below is here.

 define([ 'react', 'esri/toolbars/draw', 'esri/geometry/geometryEngine', 'dojo/topic', 'dojo/on', 'helpers/NumFormatter' ], function( React, Draw, geomEngine, topic, on, format ) { var fixed = format(3); var DrawToolWidget = React.createClass({ getInitialState: function() { return { startPoint: null, btnText: 'Draw Line', distance: 0, x: 0, y: 0 }; }, componentDidMount: function() { this.draw = new Draw(this.props.map); this.handler = this.draw.on('draw-end', this.onDrawEnd); this.subscriber = topic.subscribe( 'map-mouse-move', this.mapCoordsUpdate ); }, componentWillUnMount: function() { this.handler.remove(); this.subscriber.remove(); }, onDrawEnd: function(e) { this.draw.deactivate(); this.setState({ startPoint: null, btnText: 'Draw Line' }); }, mapCoordsUpdate: function(data) { this.setState(data); // not sure I like this conditional check if (this.state.startPoint) { this.updateDistance(data); } }, updateDistance: function(endPoint) { var distance = geomEngine.distance(this.state.startPoint, endPoint); this.setState({ distance: distance }); }, drawLine: function() { this.setState({ btnText: 'Drawing...' }); this.draw.activate(Draw.POLYLINE); on.once(this.props.map, 'click', function(e) { this.setState({ startPoint: e.mapPoint }); // soo hacky, but Draw.LINE interaction is odd to use on.once(this.props.map, 'click', function() { this.onDrawEnd(); }.bind(this)); }.bind(this)) }, render: function() { return ( <div className='well'> <button className='btn btn-primary' onClick={this.drawLine}> {this.state.btnText} </button> <hr /> <p> <label>Distance: {fixed(this.state.distance)}</label> </p> </div> ); } }); return DrawToolWidget; }); 

Below are links where you can find information in detail.

http://odoe.net/blog/esrijs-reactjs/

https://geonet.esri.com/people/odoe/blog/2015/04/01/esrijs-with-reactjs-updated