ArcGIS Flex Viewer map initialization change to read query params

README.md

This gist is an example of how to change the ArcGIS Flex viewer to accept query string parameters and initialize the map accordingly. It checks for "ll" and "z" query string parameters (e.g. "?ll=-99.3489,38.6983&z=11"), parses them, and reprojects the coordinates.

The getQueryParams() function should be generic enough to use for other purposes, and the changes to map_loadHandler() should provide some guidance for handling its results in practice.

Resources

• Example that this one is built from: https://geonet.esri.com/message/169604#169604
• Example that the query string parameter parsing is based on: http://www.summus.io/web-development/access-query-string-arguments-as3/
• Place in Esri's ArcGIS Flex viewer where this code should go: https://github.com/Esri/arcgis-viewer-flex/blob/develop/src/com/esri/viewer/managers/MapManager.mxml#L405

MapManager.mxml.as

// leave the preceding code unchanged...

private function map_loadHandler(event:MapEvent):void
{
  map.removeEventListener(MapEvent.LOAD, map_loadHandler);
  
  // Get query string parameters for "z" and "ll", convert them to the necessary
  // format, and attempt to set some map parameters to them.
  var queryParams:Object = getQueryParams();
  if (queryParams.z && queryParams.ll)
  {
    var level:Number = parseInt(queryParams.z);
    var latLng:String = queryParams.ll;
    var centerPoint:MapPoint = createMapPoint(latLng.split(",").reverse().concat([4326]));
    
    if (centerPoint)
    {
      project(centerPoint, new mx.rpc.Responder(projectPoint_resultHandler, project_faultHandler));
      
      function projectPoint_resultHandler(center:MapPoint):void
      {
        map.centerAt(center);
        if (level >= 0)
        {
          map.level = level;
        }
      }
      
      return;
    }
  }
  
  if (m_initialExtent)
  {
    project(m_initialExtent, new mx.rpc.Responder(project_resultHandler, project_faultHandler));
  }
  else
  {
    applyCenter();
  }
  function project_resultHandler(extent:Extent):void
  {
    map.extent = extent;
    applyCenter();
  }
  function project_faultHandler(fault:Fault):void
  {
    applyCenter();
  }
}

private function getQueryParams():Object
{
  var params:Object = new Object();
  try
  {
    var queryString:String = ExternalInterface.call("window.location.search.substring", 1);
    if(queryString)
    {
      var allParams:Array = queryString.split('&');
      
      for(var i:int = 0; i < allParams.length; i++)
      {
        var index:int = -1;
        var keyValuePair:String = allParams[i];
        if((index = keyValuePair.indexOf("=")) > 0)
        {
          var paramKey:String = keyValuePair.substring(0,index);
          var paramValue:String = keyValuePair.substring(index+1);
          params[paramKey] = decodeURIComponent(paramValue);
        }
      }
    }
  }
  catch(e:Error)
  {
    trace("Some error occured. ExternalInterface doesn't work in Standalone player.");
  }
  
  return params;
}

// leave the subsequent code unchanged...