Add markers

[AkbarBakhshi]

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?

[WilliamCraft]

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 

[AnneFitz · Accepted solution]

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!

[AkbarBakhshi]

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!

[AnneFitz]

Hi Akbar, 

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

• Popup | ArcGIS API for JavaScript 4.14 
• Feature | ArcGIS API for JavaScript 4.14 

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

• Feature Widget | ArcGIS API for JavaScript 4.14 
• Feature widget in a side panel | ArcGIS API for JavaScript 4.14 
• Intro to popups | ArcGIS API for JavaScript 4.14 
• Intro to PopupTemplate | ArcGIS API for JavaScript 4.14 

[AkbarBakhshi]

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

[AnneFitz]

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

[AkbarBakhshi]

Awesome!

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

-Akbar