I want to retain popupdata which i filled in it, when i close the popup coming from marker symbol , and again open it, my popup refreshed.??
Rajni,
You have a lot of unneeded redundancy in your code right now.
view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>x<SPAN class="punctuation token">:</SPAN>evt<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
This portion produces a point class in WKID 102100 (web mercator).
So there is no need for all this code:
<SPAN class="keyword token">var</SPAN> coords <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Lat/Lon "</SPAN> <SPAN class="operator token">+</SPAN> pt<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="operator token">+</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="operator token">+</SPAN>pt<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* console.log(markertype+" "+comment);*/</SPAN> <SPAN class="keyword token">var</SPAN> p <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> longitude<SPAN class="punctuation token">:</SPAN> pt<SPAN class="punctuation token">.</SPAN>latitude<SPAN class="punctuation token">,</SPAN> latitude<SPAN class="punctuation token">:</SPAN> pt<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</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>
So your code would look like this instead:
view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>getmarkerclick<SPAN class="operator token">==</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> p <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>x<SPAN class="punctuation token">:</SPAN>evt<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> changedSymbol <SPAN class="operator token">=</SPAN> <SPAN class="token function">changedsymbol</SPAN><SPAN class="punctuation token">(</SPAN>markertype<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> g <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> p<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> changedSymbol<SPAN class="punctuation token">,</SPAN> attributes<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> newDevelopment<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new marker"</SPAN><SPAN class="punctuation token">,</SPAN> state<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new"</SPAN><SPAN class="punctuation token">,</SPAN> uniquetype<SPAN class="punctuation token">:</SPAN> markertype<SPAN class="punctuation token">,</SPAN> markerId<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"static"</SPAN><SPAN class="punctuation token">,</SPAN> comment<SPAN class="punctuation token">:</SPAN> comment <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="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//End view click</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></SPAN><SPAN></SPAN></SPAN>
I assume that "markertype" is a global var somewhere else in your code?
It is as simple as saving that text as an attribute to the graphic in your database and then when you recreate from the DB you you set the popup content to that attribute.
can you pls give one example, as i have multiple markers with popup, each have different popup values in its textbox. how can i differentiate between each of them
This is what the popup has always been designed to do. Show unique data based on the feature clicked. It does this using the features attributes.
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addMarker</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> getmarker <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> x<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"172.49720789367655"</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"-43.48319644512304"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"This popup one content"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> x<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"172.50933147842412"</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"-43.48894119812065"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN><SPAN class="string token">"This popup two content"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN> getmarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>marker<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> p <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> longitude<SPAN class="punctuation token">:</SPAN> marker<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> latitude<SPAN class="punctuation token">:</SPAN> marker<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> g <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> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geographicToWebMercator</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> textSymbol<SPAN class="punctuation token">,</SPAN> attributes<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> newDevelopment<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new marker"</SPAN><SPAN class="punctuation token">,</SPAN> state<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> popupTemplate <SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> marker<SPAN class="punctuation token">.</SPAN>content <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> markerGL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>g<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></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><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Sir,
I think you haven't understood, user will enter any value in textbox of popup and on save buton i am saving it in db, but when i again open that popup my popup do contain content body,but data gone entered by user???
actually i m looking for tht data to stay. Your example only change body of popup
Are you saying that you already have the part of entering and saving to the database working? If so then my code above should work for you as it takes values from your database and adds them as the content of the features popup.
Yes, i have already done entering and saving data in db, i have one textbox which takes data from user and save in db, but your code do not work, as i am already defining body for in its content popup for all markers and and this code below of urs wiill replace my basic editable html. actually i have to see those popup data on my same editing mode popup
content<SPAN class="">:</SPAN> marker<SPAN class="">.</SPAN>content
Without seeing how you are defining the markers popup to begin with I am not sure how I would know what you are doing.
OK, Here is my tested solution:
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addMarker</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> getmarker <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> x<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"172.49720789367655"</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"-43.48319644512304"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"This popup one content"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> x<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"172.50933147842412"</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"-43.48894119812065"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN><SPAN class="string token">"This popup two content"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN> getmarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>marker<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> p <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> longitude<SPAN class="punctuation token">:</SPAN> marker<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> latitude<SPAN class="punctuation token">:</SPAN> marker<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> g <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> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geographicToWebMercator</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> textSymbol<SPAN class="punctuation token">,</SPAN> attributes<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> newDevelopment<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new marker"</SPAN><SPAN class="punctuation token">,</SPAN> state<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> marker<SPAN class="punctuation token">.</SPAN>content <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//add content of popup body here</SPAN> g<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> title <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">' '</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> setContentInfo <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> markerGL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>g<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="keyword token">function</SPAN> <SPAN class="token function">setContentInfo</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> popup_html <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div class="be-form-wrapper">'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<textarea cols="4" rows="4" class="form-control b_radius mt-20 write_comment" id="write_comment" name="write_comment" placeholder="Write a comment">'</SPAN> <SPAN class="operator token">+</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>content <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</textarea>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<button class="btn btn-width" data-url="">Cancel</button>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<button class="btn btn-width" data-url="">Save</button>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> node <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN>popup_html<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN> node<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></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><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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
sir Robert Scheitlin, GISP
The issue in it, is that data from db come on my page when my editor page is refreshed it, but what if i do not refresh page.
At the time, when i save data in db and without refreshing page, i want my data to stay in my popup, so when i close popup and again open and check it to edit , at that time my popup is empty.
I want to retain data of popups in it without refreshing page even it is saved in db or user close that popup in between without saving.
Is their any way to get any unique ids of popup or markers dropped, so that i can try to access them individually when searching through layer
The simple answer is that you assign a unique id as an attribute to the graphic when it is added to the GL.
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.