Zoom to Extent of Feature in Dynamic Map Service

4192
17
Jump to solution
12-06-2017 02:04 PM
deleted-user-1_r2dgYuILKY
Occasional Contributor III

I've found some examples of what I want to do, but none of them seem to work. I have a dynamic map service layer that is several polygon regions. When the user clicks on a region, I want the map to zoom to the extent of the region. I tried map.centerAndZoom(feature,1) and it did zoom, but the map went blank.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Levi,

  OK here is the corrected code then:

            Layer.on("click", function(evt){
               map.setExtent(evt.graphic.geometry.getExtent(), true);
            });‍‍‍

View solution in original post

0 Kudos
17 Replies
RobertScheitlin__GISP
MVP Emeritus

Levi,

   That is because the second parameter in the centerAndZoom method when using a esri base map would be the Level (factor is only non tiled basemaps)

https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#centerandzoom 

You would be better off setting the maps extent to the features extent (expanded a little).

deleted-user-1_r2dgYuILKY
Occasional Contributor III

I tried this and it didn't work. I need to find the extent of the layers within the dynamic map service. 

Layer.on("click", function(){
                 
               var layerExtent = graphicsUtils.graphicsExtent(Layer.graphics);
               map.setExtent(layerExtent, true);
          
               
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

What errors if any are shown in the browsers web console?

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

I tried this, with the evt being the click. The console logged "null."

var extent = graphicsUtils.graphicsExtent(evt.graphics);
               console.log(extent);

If I do this, the console logs the object ID:

var Id = evt.graphic.attributes["OBJECTID"]‍
console.log(Id);
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Levi,

  OK here is the corrected code then:

            Layer.on("click", function(evt){
               map.setExtent(evt.graphic.geometry.getExtent(), true);
            });‍‍‍
0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

Ah, thanks!

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

Now I have a dynamic map service layer with multiple rasters and continental US polygons inside. I'd like to be able to zoom to each individual state when clicked. Is this possible?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

You could query the map service for the extent of the clicked polygon using the map.click as the queries geometry and the QueryTask executeForExtent method.

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

Could I also do this inside an identify task? Right now I'm clicking on the state to get statistics in the popup. 

var identifyTask, identifyParams;
       
       function mapReady () {
          map.on("click",executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(roadsURL);

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 7;
          identifyParams.returnGeometry = true;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        };
          
          function executeIdentifyTask (event) {
            map.infoWindow.clearFeatures();
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;
            identifyParams.layerIds = roadsLayer.visibleLayers;

           var deferred = identifyTask
            .execute(identifyParams);
            deferred.addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                var feature = result.feature;
                var layerName = result.layerName;
          
                    
                    var iTemplate;
               
                    if(result.layerName === "Forecast 18 Hours" 
                    || result.layerName === "Past 6 Hours" 
                    || result.layerName === "Past 24 Hours"
                    || result.layerName === "Past 48 Hours"
                    || result.layerName === "Past 72 Hours"){
                    

                    iTemplate = new InfoTemplate(layerName,"State: ${name}<br>No Snow: ${No_Snow}<br>Trace: ${Trace}<br>0.1 to 1 Inch: ${One_Inch}<br>1 to 2 Inches: ${Two_Inch}<br>2 to 6 Inches: ${Six_Inch}<br>6 to 12 Inches: ${Twelve_In}<br>12 to 18 Inches: ${Eightn}<br>Above 18 Inches: ${Above_18}"          
                    );
                    
                    feature.setInfoTemplate(iTemplate);
                    
                    }
                              
               return feature;
            });
          });

          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
            map.infoWindow.resize(225,200)
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos