topic Re: To add a feature layer on map with ES Modules in ArcGIS JavaScript Maps SDK Questions

To add a feature layer on map with ES Modules

Valgenmap — Mon, 24 May 2021 05:48:57 GMT

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

Re: To add a feature layer on map with ES Modules

JuliePowell — Mon, 24 May 2021 16:06:05 GMT

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

Re: To add a feature layer on map with ES Modules

Valgenmap — Tue, 25 May 2021 03:53:28 GMT

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

Re: To add a feature layer on map with ES Modules

RichardMoussopo — Fri, 17 Dec 2021 18:05:22 GMT

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, }); }) }