To add a feature layer on map with ES Modules

820
3
05-23-2021 10:48 PM
Status: Open
Labels (3)
Valgenmap
New Contributor III

I wanted to build an example app using ReactJS and JS API 4.x  with ES Modules. 

I followed few examples provided by ESRI as below,

1. https://github.com/odoe/jsapi-react-template 

2. https://github.com/Esri/nearby-javascript

3. https://github.com/odoe/esrijs4-vm-react

4. https://github.com/Esri/react-arcgis

But I'm not able to get it, coz each one is following different approaches.

Even I tried by requesting a case with ESRI technical team, but I didn't received a proper solution.

So, can I get any exmaple source so that I can get clear knowledge How to add the Map and a FeatureLayer with ES Modules using React core and Reacthooks.

Regards,

Valgen Map

3 Comments
JuliePowell

Hello @Valgenmap ! Have you seen this sample? It is the best and most recent one for working with the API's ES modules & React. 

ESM samples / jsapi-create-react-app 

Julie

Valgenmap

Hi @JuliePowell ,

Yes, I had gone through with the sample provided by ESRI. But in that sample they are adding the map and layer through the portal id, so I didn't mention that in my first comment.

I need help to get  an idea in How to add the Map and  FeatureLayer with ES Modules using React core and Reacthooks.

Regards,

ValgenMap

RichardMoussopo

Hi Valgenmap, this should be a question to the ArcGIS API for JavaScript Community

https://community.esri.com/t5/arcgis-api-for-javascript/ct-p/arcgis-api-for-javascript 

But you can achieve this by using esri-loader module

 

import { loadModules } from 'esri-loader';

const initMap = () => {
      loadModules([
        "esri/Map",
        "esri/views/MapView"
      ])
        .then(([Map, MapView]) => {

          const map = new Map({
            basemap: 'streets-night-vector',
          });
          const view = new MapView({
            container: "viewDiv",
            map,
            center: [-82.515401, 40.771119],
            zoom: 10,
        });
      })
    }