Hi can any body help me to resolve this problem...??? I create to input fields for x,y and on click event map should go to location of input coordinates but its not working yet. What i am missing in this code? please help...... let lon = document . getElementById ( "lon" ) ; let lat = document . getElementById ( "lat" ) ; let btnLocation = document . getElementById ( "btnlocation" ) ; btnLocation . addEventListener ( 'click' , ( ) = > { view . goTo ( { target : [ lon . value , lat . value ] } ) } )

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; } } }

goTo(location)

kawishabbas

can any body help me to resolve this problem...???

I create to input fields for x,y and on click event map should go to location of input coordinates but its not working yet.

What i am missing in this code? please help......

<SPAN class="keyword token">let</SPAN> lon <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"lon"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> lat <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"lat"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> btnLocation <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"btnlocation"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
btnLocation<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
       view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
             target<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN>lon<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">,</SPAN> lat<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">]</SPAN>
         <SPAN class="punctuation token">}</SPAN><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>

Find more posts tagged with

Accepted answers

Egge-Jan_Pollé

Hi kawish abbas,

In that case you might have a look at the ArcGIS REST API to add a feature directly through an HTTP POST request.

Let's take the Hazards service from the Editor widget example: https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Hazards_Uptown_Charlotte/FeatureServer/0 (This is a public service, maintained by Esri's jsapi_team. You can add records freely to this service, for testing purposes. I guess they remove the records every now and then...)

We want to report a hazard, a wild animal: let's pretend we have seen a tiger on the lawn of Lahore Fort!!

Go to https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Hazards_Uptown_Charlotte/FeatureServer/0/addFeatures and enter the feature you want to add:

<SPAN class="punctuation token">[</SPAN>
    <SPAN class="punctuation token">{</SPAN>
      <SPAN class="string token">"attributes"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="string token">"HazardType"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Dangerous Animal"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"Description"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"We saw a tiger on the lawn"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"SpecialInstructions"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"No Action"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"Status"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Active"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"Priority"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"High"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"geometry"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="string token">"x"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8272644.51</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"y"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3709258.71</SPAN>
      <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>‍</SPAN><SPAN>‍</SPAN></SPAN>

As soon as you click Add Features, your Tiger Warning will be added to the service and hence be added to the map.

Is this something you would like to investigate?

Best regards,

Egge-Jan

All comments

kawishabbas

Hi Egge-Jan Pollé

I don't want to use editor widget basically i don't want to click on map to create point, i just want to add row in database table and enter new data with coordinates in x,y fields, so point graphic should add to map with reference of x,y filed.

kawishabbas

Yes...

i add point object and pass parseFloat(lon.value), parseFloat(lat.value).

Egge-Jan_Pollé

Hi kawish abbas,

Regarding your new question in this thread:

Did you already have a look at the Editor widget? It has been introduced in version 4.11 of the ArcGIS API for JavaScript. There is a nice sample available: Edit features with the Editor widget | ArcGIS API for JavaScript 4.12. This sample allows you to actually edit and modify a sample data set provided by Esri. Nice 🙂

The widget automatically recognizes if there are any editable feature layer(s) within the map. If there are, the layer or layers will display within the widget. Based on the editing functionality set on the feature layer, you can Edit existing features and/or Add new features.

Does this suit your needs?

Best regards,

Egge-Jan

Egge-Jan_Pollé

Hi Kawish,

Did the above solution solve your original issue? Please be so kind to mark it as correct. This will help other JavaScript developers in the Esri Community to find useful and correct information.

Thanks in advance for your community spirit,

Egge-Jan

kawishabbas

Thank you so much Egge-Jan Pollé‌..

Can you give me another solution...???

Is there any possibility to add graphic to feature layer by entering coordinates in table..???

user want to add new row in table and enter new data to row so that point(feature) should automatically add to map, kindly give me solution if you can..

Thank you

Egge-Jan_Pollé

Hi Kawish,

I think you have to apply a parseFloat() function to your arguments to turn them into floating point numbers. So, essentially your code is correct, apart from this parsing that is missing. (By the way, please note that Internet Explorer 11 does not support the Arrow Function you are using... but maybe we should consider that a non-issue - LOL)

Based on the research I have done to investigate your issue I have published a sample app using the corrected code below: ArcGIS JavaScript Tutorial - Use view.goTo() to zoom to given location

If you enter the coordinates 74.315 and 31.588, it will fly you directly to Lahore Fort, the fortified 16th-century Mughal citadel in Lahore, Pakistan.

So, your code should become:

<SPAN class="keyword token">let</SPAN> lon <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"lon"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> lat <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"lat"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> btnLocation <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"btnlocation"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
btnLocation<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
       view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
             target<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>lon<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>lat<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">]</SPAN>
         <SPAN class="punctuation token">}</SPAN><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>

Does this solve your issue?

Best regards,

Egge-Jan

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.