topic Re: Activating the mapClick function through a component. in ArcGIS API for Flex Questions

Activating the mapClick function through a component.

JasonLevine — Wed, 10 Nov 2010 19:03:38 GMT

Hello all,
I've created a simple map (not the sample viewer) with the ability to identify a layer and added four buttons through a component. The first three buttons are Zoom In, Zoom Out, and Pan. I'd like the fourth button to activate the Identify tool by setting the mapClick function of the main map (myMap). I don't want the identify function to always be active, but im not sure how to activate it with my identify function, and then deactivate it when one of the other buttons are clicked.

here is my main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:components="components.*"
      pageTitle="Identify Features on the Map">
 <!--
 This sample shows how to identify features with a MapClick and the Identify task.
 
 The IdentifyParameters designate which layers are being identified.
 Identify operations can potentially return a lot of information
 depending on the number of layers being identified and a given tolerance.
 The tolerance is the number of pixels a feature is allowed to lie away
 from the clicked point in order to be counted as a result.
 
 In this sample, when user clicks the map, an "Identify" task is executed.
 
 When the task finishes executing, the executeCompleteHandler function loops
 through the features in the IdentifyResult and adds them to the map.
 -->
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.MapMouseEvent;
   import com.esri.ags.geometry.Geometry;
   import com.esri.ags.symbols.InfoSymbol;
   import com.esri.ags.tasks.supportClasses.IdentifyParameters;
   import com.esri.ags.tasks.supportClasses.IdentifyResult;
   
   import mx.controls.Alert;
   import mx.rpc.AsyncResponder;
   
   [Bindable]private var lastIdentifyResultGraphic:Graphic;
   
   private function mapClickHandler(event:MapMouseEvent):void
   {
    clickGraphicsLayer.clear();
    
    var identifyParams:IdentifyParameters = new IdentifyParameters();
    identifyParams.returnGeometry = true;
    identifyParams.tolerance = 3;
    identifyParams.width = myMap.width;
    identifyParams.height = myMap.height;
    identifyParams.geometry = event.mapPoint;
    identifyParams.mapExtent = myMap.extent;
    identifyParams.spatialReference = myMap.spatialReference;
    
    var clickGraphic:Graphic = new Graphic(event.mapPoint, clickPtSym);
    clickGraphicsLayer.add(clickGraphic);
    
    identifyTask.execute(identifyParams, new AsyncResponder(myResultFunction, myFaultFunction, clickGraphic));
   }
   
   private function myResultFunction(results:Array, clickGraphic:Graphic = null):void
   {
    if (results && results.length > 0)
    {
     var result:IdentifyResult = results[0];
     var resultGraphic:Graphic = result.feature;
     switch (resultGraphic.geometry.type)
     {
      case Geometry.MAPPOINT:
      {
       resultGraphic.symbol = smsIdentify;
       break;
      }
      case Geometry.POLYLINE:
      {
       resultGraphic.symbol = slsIdentify;
       break;
      }
      case Geometry.POLYGON:
      {
       resultGraphic.symbol = sfsIdentify;
       break;
      }
     }
     lastIdentifyResultGraphic = resultGraphic;
     
     // update clickGraphic (from mouse click to returned feature)
     clickGraphic.symbol = new InfoSymbol(); // use default renderer
     clickGraphic.attributes = resultGraphic.attributes;
    }
   }
   
   private function myFaultFunction(error:Object, clickGraphic:Graphic = null):void
   {
    Alert.show(String(error), "Identify Error");
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:NavigationTool id="navTool" map="{myMap}"/>
  
  <!-- Symbol for where the user clicked -->
  <esri:SimpleMarkerSymbol id="clickPtSym"
         color="0xFF0000"
         size="12"
         style="x"/>
  
  <!-- Symbol for Identify Result as Polyline -->
  <esri:SimpleLineSymbol id="slsIdentify"
          width="2"
          alpha="1"
          color="0x00FF00"
          style="solid"/>
  
  <!-- Symbol for Identify Result as Point -->
  <esri:SimpleMarkerSymbol id="smsIdentify"
         color="0x00FF00"
         size="15"
         style="diamond"/>
  
  <!-- Symbol for Identify Result as Polygon -->
  <esri:SimpleFillSymbol id="sfsIdentify"/>
  
  <!-- Identify Task -->
  <esri:IdentifyTask id="identifyTask"
         concurrency="last"
         url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer"/>
 </fx:Declarations>
 
 <esri:Map id="myMap"
  <esri:extent>
   <esri:WebMercatorExtent minlon="-120" minlat="30" maxlon="-100" maxlat="50"/>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer graphicProvider="{lastIdentifyResultGraphic}"/>
  <esri:GraphicsLayer id="clickGraphicsLayer"/>
 </esri:Map>
 <components:buttons left="10" navTool="{navTool}" myMap="{myMap}"/>

 
</s:Application>

And here is my buttons.mxml component:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

 <fx:Script>
  <![CDATA[
   import com.esri.ags.Map;
   public var myMap:Map;
   
   import com.esri.ags.tools.NavigationTool;   
   public var navTool:NavigationTool;
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
<s:HGroup>
 <s:Button label="Zoom In" click="navTool.activate(NavigationTool.ZOOM_IN)"/>
 <s:Button label="Zoom Out" click="navTool.activate(NavigationTool.ZOOM_OUT)"/>
 <s:Button label="Pan" click="navTool.activate(NavigationTool.PAN)"/>
 <s:Button label="Identify" click="WHAT DO I PLACE HERE TO SET THE MAPCLICK FOR myMap?"/>
</s:HGroup>
</s:Group>

Thanks for your help,
Jason

Re: Activating the mapClick function through a component.

DavidElies — Wed, 10 Nov 2010 21:05:02 GMT

While I don't know enough about scope in Flex to know if this will work from your external buttons.mxml, I think I would use:

myMap.addEventListener(MapMouseEvent.MAP_CLICK,mapClickHandler);

Then you could put the reverse in the clickHandler for one of the other buttons:

myMap.removeEventListener(MapMouseEvent.MAP_CLICK,mapClickHandler);

Re: Activating the mapClick function through a component.

ReneRubalcava — Sat, 11 Dec 2021 08:38:07 GMT

If I understand you right, what you'd probably want to do is add an EventListener to the Map on that button click.

// For arguments sake, let's say a user clicks the Identify button twice.
// Call your remove function before adding another listener
removeMapListener(); // you can reuse this function for each of your other button clicks
map.addEventListener(MapMouseEvent.MAP_CLICK, onMapClicked_handler);

protected function onMapClicked_handler(event:MapMouseEvent):void {
    // grab your event.mapPoint and use it for your Identify tool
    // you can call removeMapListener() again if you'd like
}

protected function removeMapListener():void {
    if (map.hasEventListener(MapMouseEvent.MAP_CLICK))
        map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClicked_handler);
}

I think that makes sense, and that's similar to how I handle it for my Identify Tool.

Re: Activating the mapClick function through a component.

JasonLevine — Wed, 10 Nov 2010 22:11:37 GMT

Hi Rene,
I understand using the event listener for the map click, but how do I call the mapClickHandler function (the identify function) in the Main.mxml from the event listener in the buttons.mxml?

Thanks,
Jason

Re: Activating the mapClick function through a component.

ReneRubalcava — Sat, 11 Dec 2021 08:38:09 GMT

This is probably how I would handle it. You can create one function to capture all the button clicks and let that function handle what happens. You can also make sure the Identify Task will not fire when you just want to zoom or pan.

<fx:Script>
 <![CDATA[
  protected static const IDENTIFY:String = "identify";
  
  protected function activateIdentify():void {
   map.addEventListener(MapMouseEvent.MAP_CLICK, onMapClicked_handler);
  }
  
  protected function onMapClicked_handler(event:MapMouseEvent):void {
   var idParams:IdentifyParameters = new IdentifyParameters();
   idParams.layerIds = [layerId];
   idParams.tolerance = 2;
   idParams.returnGeometry = true;
                                      // grab your event.mapPoint and use it for your Identify tool
   idParams.geometry = event.mapPoint; 
   idParams.width = _map.width;
   idParams.height = _map.height;
   idParams.mapExtent = _map.extent;
   idParams.spatialReference = _map.spatialReference;
   idParams.layerOption = "all";
   var idSym:SimpleMarkerSymbol = new SimpleMarkerSymbol("x", 12, 0xFF0000);
   var g:Graphic = new Graphic(event.mapPoint, idSym);
   // idLayer is a graphicsLayer I use to
   // just show where I clicked on the map
   idLayer.clear();
   idLayer.add(g);

   idTask.url = "urlForIdentifyTaskToUse";

   idTask.execute(idParams, new AsyncResponder(onIdentifyResults_handler, onFault, g));
  }

  protected function removeMapListener():void {
   if (map.hasEventListener(MapMouseEvent.MAP_CLICK))
    map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClicked_handler);
  }
  
  protected function navigate(type:String):void {
   removeMapListener(); // you can reuse this function for each of your other button clicks
   switch(type) {
    case NavigationTool.ZOOM_IN:
     navTool.activate(NavigationTool.ZOOM_IN);
     break;
    case NavigationTool.ZOOM_OUT:
     navTool.activate(NavigationTool.ZOOM_OUT);
     break;
    case NavigationTool.PAN:
     navTool.activate(NavigationTool.PAN);
     break;
    case IDENTIFY:
     activateIdentify();
     break;
   }
  }
 ]]>
</fx:Script>
<s:HGroup>
 <s:Button label="Zoom In" click="navigate(NavigationTool.ZOOM_IN)"/>
 <s:Button label="Zoom Out" click="navigate(NavigationTool.ZOOM_OUT)"/>
 <s:Button label="Pan" click="navigate(NavigationTool.PAN)"/>
 <s:Button label="Identify" click="navigate(IDENTIFY)"/>
</s:HGroup>

Re: Activating the mapClick function through a component.

JasonLevine — Fri, 12 Nov 2010 15:48:06 GMT

Hi Rene,
I sort of see what you're suggesting. You moved the entire identify function over to the buttons.mxml. I'll have to bind all of the graphics layers over to my main.mxml.

when you say "// grab your event.mapPoint and use it for your Identify tool", what do you mean, and how do I do that?

Thanks,
Jason

Re: Activating the mapClick function through a component.

ReneRubalcava — Fri, 12 Nov 2010 17:13:11 GMT

Sorry, I meant to remove those comments. You just need to use the event.mapPoint as the geometry for your IdentifyParameters you send to your IdentifyTask.
http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/tasks/supportClasses/IdentifyParameters.html

idParams.geometry = event.mapPoint;

Hope that helps.

Re: Activating the mapClick function through a component.

JasonLevine — Tue, 16 Nov 2010 16:21:10 GMT

Thanks for your help with this Rene, I got it working.

-Jason