topic Re: Setting extent of selected features in ArcGIS JavaScript Maps SDK Questions

Setting extent of selected features

BhavinSanghani — Wed, 06 Aug 2014 17:42:30 GMT

How to evaluate extent after selecting features on the map? The scenario is - I search for equipment withing given radius (e.g. 100 feet, 100 miles etc). After they found, I highlight them on map. Once I highlight them then I want to show them (or set an extent) such a way so, all highlighted features appear on the map that appears on the screen. This can be for point, polygon or polyline features and can be on multiple layers. I am using ArcGISDynamicServiceLayer to show the map.

I thought one way to use union of Extent class but it doesn't seem to work in all the cases. It's not zooming in/out at sufficient level. Also, how the extent of the feature is evaluated?

Re: Setting extent of selected features

JakeSkinner — Wed, 06 Aug 2014 20:16:32 GMT

Hi Bhavin,

You can zoom to the selected graphics using the graphicsExtent method for the graphicsUtils class. Below is an example. You can select multiple points in different areas and then click the 'Zoom' button. It will zoom to all of the selected graphics.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Shapes and Symbols</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
     
      #buttons {
        top: 10px;
        font-family: arial;
        right: 50px;
        position: absolute;
        width: 300px;
        z-index: 40;
      }
    </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, tb, polygon, query, featureSet;

      require([
        "esri/map", "esri/toolbars/draw", "esri/layers/FeatureLayer", "esri/tasks/query", "esri/graphicsUtils",
        "esri/tasks/FeatureSet", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", 
        "esri/graphic", "esri/geometry/Polygon", "esri/SpatialReference",
        "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, Draw, FeatureLayer, Query, graphicsUtils,
        FeatureSet, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,     
        Graphic, Polygon, SpatialReference,
        Color, dom, on, array
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.792107, 26.150807],
          zoom: 8
        });
        map.on("load", initToolbar);
       
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
        });
       
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);

        map.addLayer(featureLayer);
       
        query = new Query();
        polygon = new Polygon(new SpatialReference({wkid:102100}));
        featureSet = new FeatureSet();
       
        on(dom.byId("clear"), "click", function(){
          map.graphics.clear();
          featureLayer.clearSelection();
          polygon = new Polygon(new SpatialReference({wkid:102100}));
        })
       
        on(dom.byId("zoom"), "click", zoom);

     
      var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
            new Color([255,0,0]), 2)
        );


        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);
          tb.activate(Draw.FREEHAND_POLYGON);         
        }

        function addGraphic(evt) {
          map.graphics.add(new Graphic(evt.geometry, fillSymbol));
         
          polygon.addRing(evt.geometry.rings[0]);                         
          query.geometry = polygon.getExtent();
         
          console.log(query.geometry);
         
          featureLayer.queryFeatures(query, selectInBuffer);                                 
        }
       
        function selectInBuffer(response){                   
          var feature;
          var features = response.features;
                   
          featureSet.features = features;

       
        for (var i = 0; i < features.length; i++) {         
            feature = features;                                                                                                     
           
            if(polygon.contains(feature.geometry)){
              var highlightGraphic = new Graphic(feature.geometry, symbol);
              map.graphics.add(highlightGraphic);
            }
          }           
        }
       
        function zoom(){
          var myFeatureExtent = graphicsUtils.graphicsExtent(featureSet.features);
          map.setExtent(myFeatureExtent, true);
        }

      });
    </script>
  </head>

  <body>
   
    <div id="mapDiv"></div>
    <div id="buttons">
          <input type="button" id="zoom" value="Zoom"/>
          <input type="button" id="clear" value="Clear Graphics"/>
    </div>

  </body>
</html>

Re: Setting extent of selected features

BhavinSanghani — Thu, 07 Aug 2014 13:39:06 GMT

graphicsUtils.graphicsExtent(featureSet.features) looks good! But one more question - it does zoom and set extent properly even if I pan/zoom out (after deactivating toolbar) to keep selected features out of the screen and then click Zoom button. How that can be achieved when showing map using ArcGISDynamicMapServiceLayer? I see from your example that you are using cached service and it has zoom level specified. Similar way, looking for ArcGISDynamicMapServiceLayer.

Re: Setting extent of selected features

JakeSkinner — Thu, 07 Aug 2014 14:27:20 GMT

Not sure I'm following you. The sample is using a FeatureLayer and a Basemap. Are you trying to have this functionality with an ArcGISDynamicMapServiceLayer rather than a FeatureLayer?

Re: Setting extent of selected features

BhavinSanghani — Thu, 07 Aug 2014 15:20:22 GMT

No. Instead of basemap, I am showing map using ArcGISDynamicMapServiceLayer. To select features, I am using FeatureLayer only.

map = new Map("mapDiv", {

basemap: "streets",

center: [-81.792107, 26.150807],

zoom: 8

});

I have code as follows:

map = new Map("mapDiv");

map.addLayer(new ArcGISDynamicMapServiceLayer(mapserviceurl));

I did little more investigation on your example. Let's say instead of zoom: 8, you keep zoom: 3 with the map. Then draw polygon over Florida. Click on Zoom button. You will notice that the polygon doesn't appear properly on the screen. Let's say if you keep zoom: 6 then it might show the polygon properly. Idea is to show the selected features with the polygon outline and adjust zoom level (or factor) automatically for the user.

In my case, I am using ArcGISDynamicMapServiceLayer and it's zoom factor value depends upon whether I want to zoom-in or zoom-out. Now, once I get extent of all the selected features using graphicsUtils.graphicsExtent(featureSet.features) then I can use getCenter() of the extent but how to identify whether I need to zoom-in or zoom-out? I am trying to use following code with ArcGISDynamicMapServiceLayer but not sure how to identify zoom factor parameter.

function zoom(){

var myFeatureExtent = graphicsUtils.graphicsExtent(featureSet.features),

vExtentCenterPoint = myFeatureExtent.getCenter();

map.setExtent(myFeatureExtent, true);

map.centerAndZoom(vExtentCenterPoint, ?);

}

Re: Setting extent of selected features

JakeSkinner — Thu, 07 Aug 2014 16:12:00 GMT

Ok, I believe I'm following you. A portion of the drawn polygon may not display after you zoom. You can resolve this by converting the polygon to a graphic, and then adding this to the featureSet. Take a look at the updated code below:

Edit fiddle - JSFiddle‌

Re: Setting extent of selected features

BhavinSanghani — Thu, 07 Aug 2014 17:29:44 GMT

Perfect, thanks!

Re: Setting extent of selected features

JakeSkinner — Thu, 07 Aug 2014 18:02:57 GMT

If you can, please mark this thread as answered to help other users in the community. Thanks!