Popup Zoom To

[NateRose]

I'd like to have the "zoom to" button on a point layer zoom to the extent of a layer of the line layer.  For example I have a road construction layer which is a line layer, at the full extent I have points symbolizing them (two operational layers).  I'd like to click the zoom to button on the point layer and have it zoom to the extent of that line layer. 

Any ideas would be great. 

Nate

[RobertScheitlin__GISP]

Nate,

   Your request is pretty odd and though possible would require quite a bit of work. So the whole zoom functionality is controlled by the PopUpRendererSkin.mxml with is part of the Flex API and not the viewer. The PopUpRendererSkin.mxml can be added to the viewer and customized though. The big issue is the zoomToButton_clickHandler in the mxml use the geometry of the host component graphic, so that will have to be changed to instead find the map layer that has the lines and find the relation that the clicked point has with the line that you want to zoom to instead. do you have a unique key field that can be used to link the points and lines?

[NateRose]

Robert,

I know its a bit odd but we want to hide the 5 mile stretches of roads and just have a clean map when it loads with the construction points.  I have the popupRendererSkin loaded and can change formatting in the popup and know where the zoomtobutton_clickhandler is located.  I could use the "Rt_num" field as a unique key.   If you have any suggestions that would be helpful. I'll look around in the API code for zoom to extent and see if I can find something that may work. 

Thanks

[RobertScheitlin__GISP]

Nate,

   So if the points layer has this Rt_num field and the line layer does as well, then it is doable. I have to say I am concerned about the interaction, because now they will click on the point and a query will have to be run back to the server to get the geometry of the line with the matching Rt_num before a zoom will occur. Are both of these layers part of a dynamic map service or are they feature type layers? Are you using ArcGIS 10 so you can get a faster return using AMF?

[NateRose]

They are both dynamic map services and we are using ArcGIS 10.  I could see the drawback of some delay during the query.  I'd have to do some research on AMF but sounds like it would be an option.

[RobertScheitlin__GISP]

Nate,

   So here it is tested and working using some data on my side.

import com.esri.ags.FeatureSet;
import com.esri.ags.utils.GraphicUtil;

            private function zoomToButton_clickHandler(event:MouseEvent):void
            {
                var graphic:Graphic = hostComponent.graphic;
                var map:Map = hostComponent.map;
                var geometry:Geometry = graphic.geometry;
                var extent:Extent = geometry.extent; // returns null for MapPoint or Multipoint's with only one point
                
                if (graphic.attributes.hasOwnProperty("Road_Id") && 
                    graphic.attributes.hasOwnProperty("Monument_Z")){
                    var featLay:FeatureLayer = new FeatureLayer("http://myserver/ArcGIS/rest/services/myservice/MapServer/5");
                    featLay.useAMF = true;
                    var query:Query = new Query();
                    query.outSpatialReference = map.spatialReference;
                    query.where = "ID = " + graphic.attributes.Road_Id;
                    query.returnGeometry = true;
                    
                    featLay.queryFeatures(query, new AsyncResponder(qResult, qFault));
                    
                    function qResult(featureSet:FeatureSet, token:XMLList = null):void
                    {
                        try{ 
                            extent = GraphicUtil.getGraphicsExtent(featureSet.features);
                            
                            if (extent)
                            {
                                map.extent = extent;
                                // make sure the whole extent is visible
                                if (!map.extent.contains(extent))
                                {
                                    map.level--;
                                }
                            }
                            else
                            {
                                var mapPoint:MapPoint;
                                if (geometry is MapPoint)
                                {
                                    mapPoint = geometry as MapPoint;
                                }
                                else if (geometry is Multipoint)
                                {
                                    var multipoint:Multipoint = geometry as Multipoint;
                                    if (multipoint.points && multipoint.points.length > 0)
                                    {
                                        mapPoint = multipoint.points[0];
                                    }
                                }
                                if (mapPoint)
                                {
                                    // Zoom to 1/16th the size of the current extent.
                                    // This is the same as calling map.zoomIn() four times.
                                    map.zoom(1 / 16, mapPoint);
                                }
                            }
                        }
                        
                        catch (error:Error){
                            trace(error.message);
                        }
                    }
                    
                    //on fault
                    function qFault(info:Object, token:Object = null):void
                    {                    
                        trace(info.toString());        
                    }
                }else{
                    if (extent)
                    {
                        map.extent = extent;
                        // make sure the whole extent is visible
                        if (!map.extent.contains(extent))
                        {
                            map.level--;
                        }
                    }
                    else
                    {
                        var mapPoint2:MapPoint;
                        if (geometry is MapPoint)
                        {
                            mapPoint2 = geometry as MapPoint;
                        }
                        else if (geometry is Multipoint)
                        {
                            var multipoint2:Multipoint = geometry as Multipoint;
                            if (multipoint2.points && multipoint2.points.length > 0)
                            {
                                mapPoint2 = multipoint2.points[0];
                            }
                        }
                        if (mapPoint2)
                        {
                            // Zoom to 1/16th the size of the current extent.
                            // This is the same as calling map.zoomIn() four times.
                            map.zoom(1 / 16, mapPoint2);
                        }
                    }
                }
            }

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

[NateRose]

Hey Thanks Robert.  I'll give it a try.

[NateRose]

I got the code in and imported top two lines.  I'm getting these errors.  I attached my current popuprendererskin.mxml if that helps.  I'm not sure why the query would error out when its called on that line.  The FeatureLayer reference and the attributes were updated with our data.

Errors under each line.

var query:Query = new Query();
  -1046: Type was not found or was not a compile-time constant: Query.
  -1180: Call to a possibly undefined method Query.

featLay.queryFeatures(query, new AsyncResponder(qResult, qFault));
  -1180: Call to a possibly undefined method AsyncResponder.

Thanks

[RobertScheitlin__GISP]

Nate,

   Those errors just mean that I forgot to mention two other imports:

import com.esri.ags.tasks.supportClasses.Query;
import mx.rpc.AsyncResponder;

[RobertScheitlin__GISP]

Nate,

   So here are some other issues I see in the code (you need to update the code to fit your fields):

            private function zoomToButton_clickHandler(event:MouseEvent):void
            {
                var graphic:Graphic = hostComponent.graphic;
                var map:Map = hostComponent.map;
                var geometry:Geometry = graphic.geometry;
                var extent:Extent = geometry.extent; // returns null for MapPoint or Multipoint's with only one point
                
                //This if is used to make sure you are only doing this if it is the right layer
                //that is why we check for the existance of two different fields
                if (graphic.attributes.hasOwnProperty("Rt_num") && 
                    graphic.attributes.hasOwnProperty("TARGET_FID")){
                    var featLay:FeatureLayer = new FeatureLayer("http://maps.co.stearns.mn.us/ArcGIS/rest/services/Construction/MapServer/0");
                    featLay.useAMF = true;
                    var query:Query = new Query();
                    query.outSpatialReference = map.spatialReference;
                    //Your attribute is a string where mine was a number
                    query.where = "Rt_num = '" + graphic.attributes.Rt_num + "'";
                    query.returnGeometry = true;
                    
                    featLay.queryFeatures(query, new AsyncResponder(qResult, qFault));
                    
                    function qResult(featureSet:FeatureSet, token:XMLList = null):void
                    {
                        try{ 
                            extent = GraphicUtil.getGraphicsExtent(featureSet.features);
                            
                            if (extent)
                            {
                                map.extent = extent;
                                // make sure the whole extent is visible
                                if (!map.extent.contains(extent))
                                {
                                    map.level--;
                                }
                            }
                            else
                            {
                                var mapPoint:MapPoint;
                                if (geometry is MapPoint)
                                {
                                    mapPoint = geometry as MapPoint;
                                }
                                else if (geometry is Multipoint)
                                {
                                    var multipoint:Multipoint = geometry as Multipoint;
                                    if (multipoint.points && multipoint.points.length > 0)
                                    {
                                        mapPoint = multipoint.points[0];
                                    }
                                }
                                if (mapPoint)
                                {
                                    // Zoom to 1/16th the size of the current extent.
                                    // This is the same as calling map.zoomIn() four times.
                                    map.zoom(1 / 16, mapPoint);
                                }
                            }
                        }
                        
                        catch (error:Error){
                            trace(error.message);
                        }
                    }
                    
                    //on fault
                    function qFault(info:Object, token:Object = null):void
                    {                    
                        trace(info.toString());        
                    }
                }else{
                    if (extent)
                    {
                        map.extent = extent;
                        // make sure the whole extent is visible
                        if (!map.extent.contains(extent))
                        {
                            map.level--;
                        }
                    }
                    else
                    {
                        var mapPoint2:MapPoint;
                        if (geometry is MapPoint)
                        {
                            mapPoint2 = geometry as MapPoint;
                        }
                        else if (geometry is Multipoint)
                        {
                            var multipoint2:Multipoint = geometry as Multipoint;
                            if (multipoint2.points && multipoint2.points.length > 0)
                            {
                                mapPoint2 = multipoint2.points[0];
                            }
                        }
                        if (mapPoint2)
                        {
                            // Zoom to 1/16th the size of the current extent.
                            // This is the same as calling map.zoomIn() four times.
                            map.zoom(1 / 16, mapPoint2);
                        }
                    }
                }
            }