topic Re: Add markers in ArcGIS JavaScript Maps SDK Questions

Add markers

AkbarBakhshi — Fri, 21 Feb 2020 22:10:54 GMT

Hi guys. I am new to ArcGIS API, but have worked for a few months with Google Maps API. I was wondering if it's possible to add markers on a basemap (Client-side) with ArcGIS API, similar to dropping markers with click or double-clicking in Google Maps API?

Re: Add markers

WilliamCraft — Fri, 10 Dec 2021 22:41:22 GMT

Yes, you can add point, line, and polygon graphics client side using the Javascript API. Here is an example of how to add a point graphic:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
var point = { type: "point", longitude: -118.80657463861, latitude: 34.0005930608889 }; 
var simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // orange outline: { color: [255, 255, 255], // white width: 1 } };
var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); 
graphicsLayer.add(pointGraphic);‍‍‍‍‍‍‍‍‍‍‍‍‍
}‍‍‍‍‍‍‍‍‍‍‍‍‍

Source: Display point, line, and polygon graphics | ArcGIS for Developers

Re: Add markers

AnneFitz — Fri, 10 Dec 2021 22:41:25 GMT

Here's a Codepen for how to add a graphic on click: https://codepen.io/annefitz/pen/yLNVogB

If you wanted to change it to on double-click, you would do the following:

view.on("double-click", function(event){
   createGraphic(event.mapPoint.latitude, event.mapPoint.longitude);
});‍‍‍‍‍‍‍‍‍‍‍‍

Let me know if you have any questions!

Re: Add markers

AkbarBakhshi — Sat, 22 Feb 2020 23:16:59 GMT

Hi Anne,

Thanks for the help. I am trying to drop markers (which I now can with your help) and then open an infowindow type of thing (similar to google maps API - Info Windows | Maps JavaScript API | Google Developers ). Do you know of a topic in the documentation that I can take a look that explains these kind of things?

Thank you!

Re: Add markers

AnneFitz — Mon, 24 Feb 2020 18:15:24 GMT

Hi Akbar,

Yes, I'd recommend taking a look at the Popup or Feature Widget documentation:

Here's a couple samples that might be helpful as well:

Re: Add markers

AkbarBakhshi — Mon, 24 Feb 2020 20:56:12 GMT

Anne,

This is great info. Thanks a lot! One last question. Take this link as an example: ArcGIS API for JavaScript Sandbox . How can I have the user input the name, owner and other attributes of let's say the point that they add to the view (by double clicking on the map)? Let's say, I am the user and then I double click on the map to "drop a pin" and then click on the "pin" to add some attributes to it and then save it to my database. I tried replacing the attribute contents with an html "input" field, but didn't work.

FYI, I have built a website using Google maps API and then I realized that ArcGIS API is much richer. So, now I am trying to see if I can do this with ArcGIS API instead. Here is a very quick demo of the website:

Website_Demo.mkv - Google Drive

So, long story short, I just want to know if this is possible with ArcGIS API. Your help is much appreciated.

Thank you!

-Akbar

Re: Add markers

AnneFitz — Mon, 24 Feb 2020 21:13:20 GMT

Akbar,

I think you might want to look into using the Editor widget. Here's a sample: Edit features with the Editor widget | ArcGIS API for JavaScript 4.14

Also, here's a sample of using the Editor widget with Popups: Popup with edit action | ArcGIS API for JavaScript 4.14

Hopefully this helps!

- Anne

Re: Add markers

AkbarBakhshi — Mon, 24 Feb 2020 22:03:17 GMT

Awesome!

Thank you very much for the help. Wish me luck!

-Akbar