nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

AnneFitz

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);
});‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Let me know if you have any questions!

All comments

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

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:

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

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);
});‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Let me know if you have any questions!

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:

<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
  <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> graphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> point <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">,</SPAN> longitude<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">118.80657463861</SPAN><SPAN class="punctuation token">,</SPAN> latitude<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">34.0005930608889</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> 
<SPAN class="keyword token">var</SPAN> simpleMarkerSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">226</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">119</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// orange outline: { color: [255, 255, 255], // white width: 1 } };</SPAN>
<SPAN class="keyword token">var</SPAN> pointGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> geometry<SPAN class="punctuation token">:</SPAN> point<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> simpleMarkerSymbol <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>pointGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.