4

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?

securecurve
  • 5,589
  • 5
  • 45
  • 80
  • If you use CDN links in the main.html, L is global. There is no need to import. Imports are processed by Browserify or WebPack and sometimes, have problems. – vijayst Jul 27 '16 at 15:55
  • Yes I know, I tried both ways, and still have the same problem – securecurve Jul 27 '16 at 17:16
  • I tried ArcGIS for an assignment with crossover. I did the assignment with the JavaScript API. https://developers.arcgis.com/javascript/latest/sample-code/get-started-mapview/index.html – vijayst Jul 27 '16 at 18:09

1 Answers1

6

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...
Igorsvee
  • 4,101
  • 1
  • 25
  • 21
  • 1
    Actually you were correct, I thought I already installed the latest version, but turned out it's not. I installed leaflet as you referred, and imported ESRI as you mentioned and the maps showed up! Thank you ... I'm giving you the bounty :) – securecurve Aug 02 '16 at 07:24
  • Just a final question: To set the map location I use this: `var map = L.map(this.refs.mapRef).setView([41.528, 30.680], 3)` but it throws this error: `Uncaught Error: Invalid LatLng object: (NaN, NaN)` .. why is that? – securecurve Aug 02 '16 at 07:26