How to plot a marker point in esri arcgis map using react js

2428
5
04-15-2021 08:50 PM
lijoshabraham
Emerging Contributor
 

I am trying to add a point/line in arcgis map using react JS. Now my map is working fine. I'm referring https://developers.arcgis.com/javascript/latest/add-a-point-line-and-polygon/#run-the-app link. But they are using ARCGIS API for JavaScript for adding points on the map with Graphic and GraphicsLayer. I've followed this method for displaying the map https://www.esri.com/about/newsroom/arcuser/react-arcgis/ I'm trying to add Graphic and Graphics layer module for adding points on the map. Could anyone help me how to add Graphic and GraphicsLayer? Here is my app.js code looks like..

import WebMap from "esri/WebMap";
import MapView from "esri/views/MapView";
import Search from "esri/widgets/Search";
import FeatureLayer from "esri/layers/FeatureLayer";

const noop = () => {};

export const webmap = new WebMap({
portalItem: {
id: "974c6641665a42bf8a57da08e607bb6f"
}
});

export const view = new MapView({
map: webmap
});

export const search = new Search({ view });
view.ui.add(search, "top-right");

export const initialize = (container) => {
view.container = container;
view
.when()
.then(_ => {
console.log("Map and View are ready");
})
.catch(noop);
return () => {
view.container = null;
};
};


Thank you. 

0 Kudos
5 Replies
ReneRubalcava
Honored Contributor

There's a number of ways to use the JSAPI with React. Do you have a sample project to look at? Is it class based? Hooks? Importing API in the Component? In Context? Could be a number of issues related to component state or hooks loops.

0 Kudos
lijoshabraham
Emerging Contributor

I'm following this project https://github.com/odoe/jsapi-react

0 Kudos
ReneRubalcava
Honored Contributor

That demo is really old. The concepts from that blog post still apply. I don't recommend mixing JSAPI imports in React components, but using some sort of layer between the API and your components. Whether that is Context or some other state management.

Here is a more up-to-date demo of using the latest ESM build of the JSAPI with React. It includes a way to add graphics to the map.

https://github.com/odoe/jsapi-esm-react

lijoshabraham
Emerging Contributor

HI, @RE I've tried this demo, and  I am able to add points on the map. But it is asking me to log in for getting the second point. Is there any way to display the route and directions without login?

0 Kudos
ReneRubalcava
Honored Contributor

Routing and directions are premium services. You can use an API key with your free developer account.

https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/

0 Kudos