topic Re: Zoom to Extent of Feature in Dynamic Map Service in ArcGIS JavaScript Maps SDK Questions

Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Wed, 06 Dec 2017 22:04:42 GMT

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.

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Wed, 06 Dec 2017 22:15:34 GMT

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

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Fri, 10 Dec 2021 20:21:45 GMT

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

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Thu, 07 Dec 2017 17:49:40 GMT

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

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Fri, 10 Dec 2021 20:21:48 GMT

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

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:21:51 GMT

Levi,

OK here is the corrected code then:

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

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Thu, 07 Dec 2017 18:21:09 GMT

Ah, thanks!

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Tue, 19 Dec 2017 22:08:21 GMT

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?

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Tue, 19 Dec 2017 22:18:20 GMT

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.

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Fri, 10 Dec 2021 20:21:54 GMT

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

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Wed, 20 Dec 2017 19:53:28 GMT

Levi,

Sure you are already returning the geometry in the identify task so just use that geometry from the identify result to set the map extent.

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Fri, 10 Dec 2021 20:21:56 GMT

I tried this, but it just zoomed to the middle of the globe. When I console logged extent, it gave me the layer name, of course.

var extent = feature.geometry;
map.setExtent(extent);‍‍

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Wed, 20 Dec 2017 20:36:15 GMT

Levi,

What spatial reference is the returned results in and what type of geometry is it?

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Wed, 20 Dec 2017 20:42:33 GMT

{type: "polygon", rings: Array(1), _ring: 0, spatialReference: {…}}
1. rings:[Array(170)]
2. spatialReference:
  1. latestWkid:3857
  2. wkid:102100
  3. __proto__:Object
3. type:"polygon"

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Wed, 20 Dec 2017 20:44:12 GMT

I need to figure out how to get the extent for the State attribute of the feature.

var state = feature.attributes['name'];‍

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Wed, 20 Dec 2017 20:47:22 GMT

Levi,

If the state attribute is just the name of the state then you will have to do a Query on the states layer to get the state geometry. I thought you were doing an identify on the state layer and you already had the geometry in the identify result.

Re: Zoom to Extent of Feature in Dynamic Map Service

deleted-user-1_r2dgYuILKY — Fri, 10 Dec 2021 20:22:00 GMT

There is one dynamic map service layer with rasters and polygons. I changed the identifyParams to layerIds = [1,2,3,4,5]; Those are the states layers. I'm still getting the same result. When I click on Colorado, map.setExtent(extent); zooms to the middle of the ocean.

Here is the script:

<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Forecast Analysis</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
      html, body, .container, #map {
            height: 700px;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "arial";
        }          
          
          #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
     
     <!-- #layerListPane {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 230px;
      z-index: 101;
      padding: 0px;
      bottom: 720px;
      box-shadow: 0 0 5px 0 #DDD;
      background-color:;
        }
     
     .esriLayerList .esriList {
      background-color:white;
        }

     .esriLayerList .esriTitle 
      background-color: ;
      border-bottom: none;
        }

     .esriLayerList .esriList ul {
      background-color: ;
        } -->
          
       .esriScalebar {
        padding: 20px 20px;
      }
       
        .esriLayer {
            background-color:;
        }
          
          .esriPopup .titleButton.maximize {
        display: none;
      }
       
              .esriPopup .zoomTo {     display: none; } 

          .attachmentsSection div:first-child{
        display:none;
      }

       
    </style>
     <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.23/"></script>
    <script>
      var map;

      require([
         "esri/config",
        "esri/map",
          "esri/geometry/webMercatorUtils",
          "esri/graphicsUtils",
          "esri/tasks/GeometryService",
          "esri/geometry/Point",
          "esri/geometry/Extent",
          "esri/InfoTemplate",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/dijit/Popup",
          "esri/dijit/LayerList",
          "esri/arcgis/utils",
        "esri/dijit/PopupTemplate",
          "esri/layers/FeatureLayer",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/tasks/query",
          "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
          "esri/tasks/QueryTask",
          "esri/dijit/BasemapGallery",
          "esri/dijit/HomeButton",
          "esri/graphic",
          "dojo/dom-construct",
        "esri/Color",
          "dojo/dom",     
          "dojo/parser",
          "dojo/_base/array",
          "dojo/dom-class",  
          "dojo/query",
          "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
          "dijit/TitlePane",
        "dojo/domReady!"
      ], function (
        esriConfig, Map, webMercatorUtils,graphicsUtils,
          GeometryService, Point, Extent,InfoTemplate, 
          ArcGISDynamicMapServiceLayer,
        Popup, LayerList, arcgisUtils, PopupTemplate, FeatureLayer, 
          SimpleMarkerSymbol, Query,IdentifyTask, IdentifyParameters, QueryTask,
          BasemapGallery, HomeButton, Graphic, domConstruct, 
          Color, dom, parser,arrayUtils, domClass,query
      ) {

          parser.parse();
            
            esriConfig.defaults.geometryService = new GeometryService("http://<ourserver>/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            
            var popupOptions = {
            markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
              new Color([0, 0, 0, 0.25])),
            marginLeft: "20",
            marginTop: "20"
          };
          
          var popup = new Popup(popupOptions, domConstruct.create("div"));

           

            map = new Map("map", {
            basemap: "gray",
               center: [-85, 38.5],
            zoom: 4,
               maxZoom: 8,
               minZoom: 4,
               infoWindow: popup
               
          });
            
          map.on("load", mapReady);
            

            
            var home = new HomeButton({
               map: map
               }, "HomeButton");
               home.startup();

 
            
            var roadsURL = "http://<ourserver>/arcgis/rest/services/Snow_Roads/MapServer";
          var roadsLayer = new ArcGISDynamicMapServiceLayer(roadsURL,{ opacity: .85});

          map.addLayer(roadsLayer);
           
            
          //create layer list widget  
          var myWidget = new LayerList({
          map: map,
          layers: [{
               layer: roadsLayer,
               id: "Interstate Snow Conditions",
               showsubLayers: true,
               showLegend: false
               }],
          }, "layerList");
          
          myWidget.startup();     
     
 
          function expandLayerList() {  
          query('.esriLayer').forEach(function(node){  
          domClass.add(node, "esriListExpand");  
          });  
          query('.esriToggleButton').forEach(function(node){  
          domClass.replace(node, "esri-icon-down", "esri-icon-right");  
          });  
     }
     
          myWidget.on('load', function(){  
          expandLayerList();  
          });  
          
       
       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 = [1,2,3,4,5];

           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 extent = feature.geometry;
                    map.setExtent(extent);
                    
                    console.log(extent);
                    
                    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;
            });
          });

          // InfoWindow expects an array of features from each deferred
          // object that you pass. If the response from the task execution
          // above is not an array of features, then you need to add a callback
          // like the one above to post-process the response and return an
          // array of features.
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
            map.infoWindow.resize(225,200)
        }
       
       map.on("load", function() {
          //after map loads, connect to listen to mouse move & drag events
          map.on("mouse-move", showCoordinates);
          map.on("mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          //display mouse coordinates
          dom.byId("info").innerHTML = "Longitude: " + mp.x.toFixed(3) + "    " + "Latitude: " + mp.y.toFixed(3);
        }
            

      });
    </script>
  </head>

  <body class="claro">
  
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
         style="width: 100%; height: 100%; margin: 0;">
           
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
       
       <div id="layerListPane">
               <div id="layerList"></div>
        </div>
             
             <span id="info" style="font-family:arial;position:absolute;left:15px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
             
              <div id="HomeButton"></div>

          <div style="position:absolute; left:75px; top:20px; z-Index:999;">
     
               
             </div>
          </div>   
      </div>
    </div>
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Zoom to Extent of Feature in Dynamic Map Service

RobertScheitlin__GISP — Wed, 20 Dec 2017 21:56:39 GMT

Levi,

You are attempting to set the maps extent inside the identify results loop (not good). You should test to see if you have the states layer using an if and only then set the maps extent.