nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Nate,

Glad you got it working. Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:

NateRose

Robert,

Small oversight on my part. Thanks for your assistance. This will be very handy for multiple applications.

Nate

RobertScheitlin__GISP

Nate,

So if your points are the ones with the popup and you want to zoom to the lines then why are you querying the points again?

var featLay:FeatureLayer = new FeatureLayer("http://maps.co.stearns.mn.us/ArcGIS/rest/services/Construction/MapServer/0");

The lines are 1 and points are 0.

NateRose

I got all the code updated. It still doesn't zoom to the extent of the unique route number records but on records that have the same route number it zooms to the centroid of the two records. Say if you have Hwy 1 and two segments that are 1/2 mile apart, it will zoom so you can see both. The records that have one instance it zooms the same as original.

If you wish to look into this further its up to you.

Thanks,

Nate

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);
                        }
                    }
                }
            }

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;

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

popupRenderer.zip

NateRose

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

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

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 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

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,

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.