I am experimenting with calling fromLatitudeLongitude(latlon) method from coordinateFormatter module. Surely it works as the example describes: coordinateFormatter | ArcGIS API for JavaScript 4.15
Currently this is logic to process a list of DMS values in an array then convert each pair to latitude and longitude in react JS component.
<SPAN class="keyword token">class</SPAN> <SPAN class="token class-name">Map</SPAN> <SPAN class="keyword token">extends</SPAN> <SPAN class="token class-name">React<SPAN class="punctuation token">.</SPAN>Component</SPAN> <SPAN class="punctuation token">{</SPAN>
state <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
show<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
view<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN>
selectedLayer<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="token function">componentDidMount</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">updateMap</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>
updateMap <SPAN class="operator 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>
<SPAN class="keyword token">const</SPAN> <SPAN class="punctuation token">{</SPAN> locations <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>props<SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">loadModules</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">'esri/layers/GraphicsLayer'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">'esri/Graphic'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">'esri/geometry/coordinateFormatter'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
GraphicsLayer<SPAN class="punctuation token">,</SPAN>
Graphic<SPAN class="punctuation token">,</SPAN>
coordinateFormatter
<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>
<SPAN class="keyword token">const</SPAN> layers <SPAN class="operator token">=</SPAN> locations<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> locName <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>
<SPAN class="keyword token">const</SPAN> points <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">const</SPAN> dms <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="string token">'524301N'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'1203342E'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'524302N'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'1203343E'</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// quick TEST</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">let</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> dms<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> latlon <SPAN class="operator token">=</SPAN> <SPAN class="template-string token"><SPAN class="string token">`</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>dms<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>dms<SPAN class="punctuation token">[</SPAN>i<SPAN class="operator token">+</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">;</SPAN>
coordinateFormatter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">load</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> pt <SPAN class="operator token">=</SPAN> coordinateFormatter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromLatitudeLongitude</SPAN><SPAN class="punctuation token">(</SPAN>latlon<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`@@* point </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">)</SPAN><SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
points<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>pt<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>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`points </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>points<SPAN class="punctuation token">)</SPAN><SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
graphics<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation 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> <SPAN class="punctuation token">{</SPAN>
type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'polygon'</SPAN><SPAN class="punctuation token">,</SPAN>
rings<SPAN class="punctuation token">:</SPAN> points
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-line'</SPAN><SPAN class="punctuation token">,</SPAN>
color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">227</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">139</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">79</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</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>
title<SPAN class="punctuation token">:</SPAN> locName
<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">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setState</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
layers
<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">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>err<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></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>Problem I'm having is the way coordinateFormatter is loaded in asynchronous way (Promise - JavaScript | MDN ) so that when a program hits line number 40, the array is empty.
This sounds very silly but is there another way to load this module non-async way so that I can execute stmts in determined way (sequential) to collect each converted Point into the array (points)?
1. load coordianteFormatter
2. call its method with passed parameter of dms value
3. capture returned point then add it to an array
