topic Re: Zoom to Selected Features in ArcGIS JavaScript Maps SDK Questions

Zoom to Selected Features

HabG_ — Thu, 04 Sep 2014 15:17:02 GMT

I have used the JavaScript code below and works well. What it does is, using the 'Select Fields' button I can draw a polygon to select features, and clear the selected features by clicking the 'Clear Selection' button. What I want now is to zoom to the selected features by clicking on the 'Zoom to Selected Features' (this is not in the code). Can anyone help me please with the write code?

map.on("load", initSelectToolbar);


var fieldsSelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));


var content = "<b>ID No: <a target='_blank' href=${xxxx}>${IDNo}</a></b><br/><b>Sv Type: ${Sv_type}</b>";


var infoTemplate = new InfoTemplate("HSB", content);


featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/webmapping/newboundary/xxxxxx", {
    mode: FeatureLayer.MODE_ONDEMAND,
    infoTemplate: infoTemplate,
    outFields: ["*"]
});




featureLayer.setSelectionSymbol(fieldsSelectionSymbol);


featureLayer.on("selection-clear", function () {


});
map.addLayer(featureLayer);


on(dom.byId("selectFieldsButton"), "click", function () {
    selectionToolbar.activate(Draw.EXTENT);
});


on(dom.byId("clearSelectionButton"), "click", function () {
    featureLayer.clearSelection();
});


function initSelectToolbar(event) {
    selectionToolbar = new Draw(event.map);
    var selectQuery = new Query();


    on(selectionToolbar, "DrawEnd", function (geometry) {
        selectionToolbar.deactivate();
        selectQuery.geometry = geometry;
        featureLayer.selectFeatures(selectQuery,
        FeatureLayer.SELECTION_NEW);


    });
}

Re: Zoom to Selected Features

TimWitt2 — Thu, 04 Sep 2014 15:36:00 GMT

It would be something like this:

Create a button called ZoomToButton

on(dom.byId("ZoomToButton"), "click", function () {
var SelecFeatures = featureLayer.getSelectedFeatures();
var SelecExtent = SelecFeatures.geometry.getExtent();
map.setExtent(SelecExtent);
});

Re: Zoom to Selected Features

KenBuja — Thu, 04 Sep 2014 15:40:38 GMT

You could also use the graphicUtils class to put this into a single line

map.setExtent(graphicsUtils.graphicsExtent(featureLayer.getSelectedFeatures()), true);

Re: Zoom to Selected Features

HabG_ — Thu, 04 Sep 2014 15:57:12 GMT

Thanks Tim

I tried your code, however, I couldn't be able to zoom to the selected features. Do I need to put all 5 lines of codes together or in different places?

Re: Zoom to Selected Features

ScottRutzmoser2 — Thu, 04 Sep 2014 16:42:24 GMT

I have had trouble with this as well, It seems like things should work but for some reason they don't.

In our case I created a little sub to build the extent from an array of graphics.

function getGraphicsExtent(graphics) {

var geometry, extent, ext;

dojo.forEach(graphics, function(graphic, i) {

geometry = graphic.geometry;

if (geometry instanceof esri.geometry.Point) {

ext = new esri.geometry.Extent(geometry.x - 1, geometry.y - 1,

geometry.x + 1, geometry.y + 1, geometry.spatialReference);

} else if (geometry instanceof esri.geometry.Extent) {

ext = geometry;

} else {

ext = geometry.getExtent();

}

if (extent) {

extent = extent.union(ext);

} else {

extent = new esri.geometry.Extent(ext);

}

});

return extent;

}

Then you should be able to set the extent of the map using something like.

map.setExtent(getGraphicsExtent(featureLayer.getSelectedFeatures).expand(200));

Re: Zoom to Selected Features

williamcarr — Thu, 04 Sep 2014 16:52:43 GMT

Hab,

Dumb question, did you include "esri/geometry/Extent" ?

Re: Zoom to Selected Features

BetsySchenck-Gardner — Thu, 04 Sep 2014 18:03:54 GMT

I don't mean to sound stupid but are you returning more than 1 feature. If your polygon selection only returns one feature then I don't believe you can get an extent on a single point. In that case you would have to return the geometry of the point and could then use map.centerAndZoom otherwise Ken's suggestion of getting the graphicsExtent should work.

Re: Zoom to Selected Features

HabG_ — Fri, 05 Sep 2014 09:41:14 GMT

Thanks everyone for your help. I tried to apply your suggestions, however, I couldn't solve it (I'm sure this is due to my lack of JavaScript knowledge). I changed my FeatureLayer source to that of Petroleum service from ArcGIS.com and posted the complete code below. Please place the working code (to zoom to the selected extent) in the right place.

Thanks

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Layer in a map service - [ON-DEMAND]</title>

<style>

html, body, #map {

padding:0;

margin:0;

height:100%;

}

</style>

var map;

require([

"esri/InfoTemplate",

"esri/map",

"esri/dijit/Scalebar",

"esri/dijit/BasemapGallery",

"esri/layers/FeatureLayer",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/tasks/query",

"esri/toolbars/draw",

"dojo/dom",

"dojo/on",

"dojo/parser",

"dojo/_base/array",

"esri/Color",

"dijit/form/Button",

"esri/geometry/Extent",

"dojo/domReady!"

function (

InfoTemplate, Map, Scalebar, BasemapGallery, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,

Query, Draw, dom, on, parser, arrayUtil, Color, Extent

) {

parser.parse();

var selectionToolbar, featureLayer;

map = new Map("map", {

basemap: "topo",

center: [-97.33, 37.68], // longitude, latitude

zoom: 10,

sliderStyle: "medium"

});

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual",

attachTo: "bottom-left"

});

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

basemapGallery.on("error", function(msg) {

console.log("basemap gallery error: ", msg);

});

map.on("load", initSelectToolbar);

var fieldsSelectionSymbol =

new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,

new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));

var content = "<b>Status</b>: ${STATUS}" +

"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +

"<br><b>Total Acres</b>: ${APPROXACRE}" +

"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";

var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);

featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",

{

mode: FeatureLayer.MODE_ONDEMAND,

infoTemplate: infoTemplate,

outFields: ["*"]

});

featureLayer.setSelectionSymbol(fieldsSelectionSymbol);

featureLayer.on("selection-clear", function () {

});

map.addLayer(featureLayer);

on(dom.byId("selectFieldsButton"), "click", function () {

selectionToolbar.activate(Draw.EXTENT);

});

on(dom.byId("clearSelectionButton"), "click", function () {

featureLayer.clearSelection();

});

function initSelectToolbar (event) {

selectionToolbar = new Draw(event.map);

var selectQuery = new Query();

on(selectionToolbar, "DrawEnd", function (geometry) {

selectionToolbar.deactivate();

selectQuery.geometry = geometry;

featureLayer.selectFeatures(selectQuery,

FeatureLayer.SELECTION_NEW);

});

}

});

</script>

</head>

<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>

<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button>

<button id="ZoomToSelectionButton" data-dojo-type="dijit/form/Button">Zoom to Selected Features</button><br>

<div id="map"data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'"

style="padding:0;">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

</body>

</html>

Re: Zoom to Selected Features

KenBuja — Fri, 05 Sep 2014 12:38:05 GMT

This code works. Note that you had left off the "Button" argument in the require function.

<!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>Layer in a map service - [ON-DEMAND]</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />

    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>

    <script>
        var map;
        require([
          "esri/InfoTemplate",
          "esri/map",
          "esri/dijit/Scalebar",
          "esri/dijit/BasemapGallery",
          "esri/layers/FeatureLayer",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/tasks/query",
          "esri/toolbars/draw",
          "dojo/dom",
          "dojo/on",
          "dojo/parser",
          "dojo/_base/array",
          "esri/Color",
          "dijit/form/Button",
          "esri/geometry/Extent",
          "esri/graphicsUtils",
          "dojo/domReady!"
        ],
          function (
            InfoTemplate, Map, Scalebar, BasemapGallery, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
            Query, Draw, dom, on, parser, arrayUtil, Color, Button, Extent, graphicsUtils
          ) {
              parser.parse();

              var selectionToolbar, featureLayer;

              map = new Map("map", {
                  basemap: "topo",
                  center: [-97.33, 37.68], // longitude, latitude
                  zoom: 10,
                  sliderStyle: "medium"
              });

              var scalebar = new Scalebar({
                  map: map,
                  scalebarUnit: "dual",
                  attachTo: "bottom-left"
              });

              var basemapGallery = new BasemapGallery({
                  showArcGISBasemaps: true,
                  map: map
              }, "basemapGallery");

              basemapGallery.startup();

              basemapGallery.on("error", function (msg) {
                  console.log("basemap gallery error:  ", msg);
              });

              map.on("load", initSelectToolbar);

              var fieldsSelectionSymbol =
                new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));

              var content = "<b>Status</b>: ${STATUS}" +
                            "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
                            "<br><b>Total Acres</b>: ${APPROXACRE}" +
                            "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";

              var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);

              featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
                {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: infoTemplate,
                    outFields: ["*"]
                });

              featureLayer.setSelectionSymbol(fieldsSelectionSymbol);

              featureLayer.on("selection-clear", function () {

              });

              map.addLayer(featureLayer);

              on(dom.byId("selectFieldsButton"), "click", function () {
                  selectionToolbar.activate(Draw.EXTENT);
              });

              on(dom.byId("clearSelectionButton"), "click", function () {
                  featureLayer.clearSelection();
              });

              function initSelectToolbar(event) {
                  selectionToolbar = new Draw(event.map);
                  var selectQuery = new Query();

                  on(selectionToolbar, "DrawEnd", function (geometry) {
                      selectionToolbar.deactivate();
                      selectQuery.geometry = geometry;
                      featureLayer.selectFeatures(selectQuery,
                        FeatureLayer.SELECTION_NEW, function () {
                            map.setExtent(graphicsUtils.graphicsExtent(featureLayer.getSelectedFeatures()), true);
                        });
                  });
              }
          });

    </script>

</head>

<body class="claro">
    <button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
    <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button>
    <button id="ZoomToSelectionButton" data-dojo-type="dijit/form/Button">Zoom to Selected Features</button><br>
    <div id="map" data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="padding:0;">
        <div style="position:absolute; right:20px; top:10px; z-Index:999;">
            <div data-dojo-type="dijit/TitlePane"
                 data-dojo-props="title:'Switch Basemap', closable:false, open:false">
                <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
                    <div id="basemapGallery"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Re: Zoom to Selected Features

HabG_ — Fri, 05 Sep 2014 13:13:11 GMT

Thanks Ken, that is what I was looking for.

Re: Zoom to Selected Features

DavidChrest — Tue, 06 Oct 2015 05:46:48 GMT

Thanks Ken, for this handy tip. Was just looking for this. Gotta love a one-line-of-code solution.