Is it possible to load esri/geometry/coordinateFormatter non async way?

575
0
05-05-2020 03:21 PM
DaeYoon
New Contributor

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.

class Map extends React.Component {
  state = {
    show: false,
    layers: [],
    view: null,
    selectedLayer: null    
  }

  componentDidMount() {
    this.updateMap();
  }

  ...
  updateMap = () => {
    const { locations } = this.props;
    loadModules([
      'esri/layers/GraphicsLayer',
      'esri/Graphic',
      'esri/geometry/coordinateFormatter',      
    ])
      .then(([
        GraphicsLayer,
        Graphic,
        coordinateFormatter
      ]) => {
        const layers = locations.map(({ locName }) => {
          const points = [];                           
          const dms = [ '524301N', '1203342E', '524302N', '1203343E' ];
          
          // quick TEST
          for (let i = 0; i < dms.length; i += 2) {            
            let latlon = `${dms[i]} ${dms[i+1]}`;
            coordinateFormatter.load().then(function() {
              let pt = coordinateFormatter.fromLatitudeLongitude(latlon);
              console.log(`@@* point ${JSON.stringify(pt)}`); 
              points.push(pt);
            });                                                                                        
          };                                 
                              
          console.log(`points ${JSON.stringify(points)}`);

          return new GraphicsLayer({
            graphics: [new Graphic({
              geometry: {
                type: 'polygon',
                rings: points
              },
              symbol: {
                type: 'simple-line',
                color: [227, 139, 79, 0.8],
                outline: {
                  color: [255, 255, 255],
                  width: 1
                }
              }
            })],
            title: locName
          });
        });
        this.setState({
          layers
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

0 Kudos
0 Replies