securecurve securecurve - 4 months ago 27
React JSX Question

I can't get esri-leaflet to work with ReactJS --> basemapLayer of undefined

After npm installing

esri-leaflet
, and
leaflet
packages, I get the following error

enter image description here

This is my maps component:

import React from 'react'
import ReactDOM , {render} from 'react-don'

import L from 'esri-leaflet'
// import L from 'leaflet' <-- won't work as well


class Map extends React.Component{

componentDidMount(){

let element = this.refs.mapRef

// let map = L.map(element).setView([-41.2858, 174.78682], 14);
var map = L.map(this.refs.mapRef).setView([45.528, -122.680], 13)

L.esri.basemapLayer("Streets").addTo(map);

console.log("ESRI::",L.esri);

var parks = L.esri.featureLayer({
url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
style: function() {
return {
color: "#70ca49",
weight: 2
};
}
}).addTo(map);
}


render(){
return(
<div>
<h1>Maps page</h1>
<div id='map' ref="mapRef" style={{height: "380px"}}></div>
</div>
)
}

}

export default Map


What can be the problem?

Answer

Install the 1.0.0-rc.1 version of the leaflet with npm i leaflet@1.0.0-rc.1 command, esri-leaflet doesn't require to specify a version so it's just npm i esri-leaflet.Here are your requires for the component:

require('leaflet');
import esri from 'esri-leaflet';

And then use the layers via esri and it should work:

esri.basemapLayer...
esri.featureLayer...