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?
Solved! Go to 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!
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
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!
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!
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:
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
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
Awesome!
Thank you very much for the help. Wish me luck!
-Akbar