Auto zoom to combo box select

976
2
Jump to solution
08-23-2014 02:40 PM
MayJeff
Occasional Contributor

I try to select a State from a drop down menu then auto zoom to the State in map  instead of clicking the search button all the time to get the results.

Here is my code in JSFiddle.

Edit fiddle - JSFiddle

Can someone help me to take a look on the code?

Thank you.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

May Jeff,

  Sure here is the code working:

<!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>Select by state</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/dojo/dojox/grid/resources/Grid.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css">

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

  <style>

    html,

    body {

      height: 100%;

      width: 100%;

      margin: 0;

      padding: 0;

    }

  </style>

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

  <script>

    require([

        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/tasks/QueryTask",

        "esri/tasks/query",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol",

        "esri/Color",

        "dojo/on",

        "dojo/dom",

        "dijit/registry",

        "dojo/_base/array",

        "dojo/_base/connect",

        "dojox/grid/DataGrid",

        "dojo/data/ItemFileReadStore",

        "dijit/form/Button",

        "dojo/parser",

        'dojo/_base/lang',

        "dijit/layout/BorderContainer",

        "dijit/layout/ContentPane", "dijit/form/ComboBox",

        "dojo/domReady!"

      ], function (

      Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,

      Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, lang

    ) {

      var queryTask, query;

      var map, center, zoom;

      var grid, pageInfo, store;

      parser.parse();

      registry.byId("stateName").on("change", doQuery);

      var initExtent = new esri.geometry.Extent({

        "xmin": -125.0552,

        "ymin": 38.7130,

        "xmax": -70.2156,

        "ymax": 48.4081,

        "spatialReference": {

          "wkid": 4326

        }

      });

      map = new esri.Map("map", {

        extent: initExtent

      });

      var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...", {

        id: "usa"

      });

      map.addLayer(censusMapLayer);

      //Create Find Task using the URL of the map service to search

      queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

      function doQuery() {

        console.info("got here");

        //create the query

        var query = new Query();

        query.returnGeometry = true;

        query.outFields = ["*"];

        query.outSpatialReference = map.spatialReference;

        query.where = "(STATE_NAME) = ('" + dom.byId("stateName").value + "')";

        queryTask.execute(query, showResults);

      }

      function showResults(results) {

        map.graphics.clear();

        var symbol = new SimpleFillSymbol(

          SimpleFillSymbol.STYLE_SOLID,

          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),

          new Color([98, 194, 204, 0.5])

        );

        //create array of attributes

        var items = arrayUtils.map(results.features, function (result) {

          var graphic = result;

          graphic.setSymbol(symbol);

          map.graphics.add(graphic);

          return result.attributes;

        });

        //Create data object to be used in store

        var data = {

          identifier: "STATE_NAME", //This field needs to have unique values

          label: "    STATE", //Name field for display. Not pertinent to a grid but may be used elsewhere.

          items: items

        };

        //Create data store and bind to grid.

        store = new ItemFileReadStore({

          data: data

        });

        var grid = registry.byId("grid");

        grid.setStore(store);

        grid.on("rowclick", onRowClickHandler);

        //Zoom back to the initial map extent

        // map.centerAndZoom(center, zoom);

        var extent = esri.graphicsExtent(map.graphics.graphics);

        map.setExtent(extent, true);

        grid.resize();

      }

      //Zoom to the parcel when the user clicks a row

      function onRowClickHandler(evt) {

        var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).STATE_NAME;

        var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {

          return ((graphic.attributes) && graphic.attributes.STATE_NAME === clickedTaxLotId);

        });

        if (selectedTaxLot.length) {

          map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);

        }

      }

    });

  </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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">

      <table width="100%">

        <tr>

          <td align="center">

            <select id="stateName" dojoType="dijit.form.ComboBox">

              <!--working with search button-->

              <option>Choose State</option>

              <option>Arkansas</option>

              <option>Kansas</option>

              <option>California</option>

              <option>Florida</option>

              <option>Nevada</option>

            </select>

          </td>

        </tr>

      </table>

    </div>

    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>

    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">

      <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">

        <thead>

          <tr>

            <th field="STATE_NAME">State Name</th>

            <th field="STATE_FIPS">State FIPS</th>

          </tr>

        </thead>

      </table>

    </div>

  </div>

</body>

</html>

When using AMD you have to make sure your functions that you are calling from dijits are in scope. Normally you would just add the event to the dijit in the code and not in the html.

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

May Jeff,

  Sure here is the code working:

<!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>Select by state</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/dojo/dojox/grid/resources/Grid.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css">

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

  <style>

    html,

    body {

      height: 100%;

      width: 100%;

      margin: 0;

      padding: 0;

    }

  </style>

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

  <script>

    require([

        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/tasks/QueryTask",

        "esri/tasks/query",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol",

        "esri/Color",

        "dojo/on",

        "dojo/dom",

        "dijit/registry",

        "dojo/_base/array",

        "dojo/_base/connect",

        "dojox/grid/DataGrid",

        "dojo/data/ItemFileReadStore",

        "dijit/form/Button",

        "dojo/parser",

        'dojo/_base/lang',

        "dijit/layout/BorderContainer",

        "dijit/layout/ContentPane", "dijit/form/ComboBox",

        "dojo/domReady!"

      ], function (

      Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,

      Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, lang

    ) {

      var queryTask, query;

      var map, center, zoom;

      var grid, pageInfo, store;

      parser.parse();

      registry.byId("stateName").on("change", doQuery);

      var initExtent = new esri.geometry.Extent({

        "xmin": -125.0552,

        "ymin": 38.7130,

        "xmax": -70.2156,

        "ymax": 48.4081,

        "spatialReference": {

          "wkid": 4326

        }

      });

      map = new esri.Map("map", {

        extent: initExtent

      });

      var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...", {

        id: "usa"

      });

      map.addLayer(censusMapLayer);

      //Create Find Task using the URL of the map service to search

      queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

      function doQuery() {

        console.info("got here");

        //create the query

        var query = new Query();

        query.returnGeometry = true;

        query.outFields = ["*"];

        query.outSpatialReference = map.spatialReference;

        query.where = "(STATE_NAME) = ('" + dom.byId("stateName").value + "')";

        queryTask.execute(query, showResults);

      }

      function showResults(results) {

        map.graphics.clear();

        var symbol = new SimpleFillSymbol(

          SimpleFillSymbol.STYLE_SOLID,

          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),

          new Color([98, 194, 204, 0.5])

        );

        //create array of attributes

        var items = arrayUtils.map(results.features, function (result) {

          var graphic = result;

          graphic.setSymbol(symbol);

          map.graphics.add(graphic);

          return result.attributes;

        });

        //Create data object to be used in store

        var data = {

          identifier: "STATE_NAME", //This field needs to have unique values

          label: "    STATE", //Name field for display. Not pertinent to a grid but may be used elsewhere.

          items: items

        };

        //Create data store and bind to grid.

        store = new ItemFileReadStore({

          data: data

        });

        var grid = registry.byId("grid");

        grid.setStore(store);

        grid.on("rowclick", onRowClickHandler);

        //Zoom back to the initial map extent

        // map.centerAndZoom(center, zoom);

        var extent = esri.graphicsExtent(map.graphics.graphics);

        map.setExtent(extent, true);

        grid.resize();

      }

      //Zoom to the parcel when the user clicks a row

      function onRowClickHandler(evt) {

        var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).STATE_NAME;

        var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {

          return ((graphic.attributes) && graphic.attributes.STATE_NAME === clickedTaxLotId);

        });

        if (selectedTaxLot.length) {

          map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);

        }

      }

    });

  </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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">

      <table width="100%">

        <tr>

          <td align="center">

            <select id="stateName" dojoType="dijit.form.ComboBox">

              <!--working with search button-->

              <option>Choose State</option>

              <option>Arkansas</option>

              <option>Kansas</option>

              <option>California</option>

              <option>Florida</option>

              <option>Nevada</option>

            </select>

          </td>

        </tr>

      </table>

    </div>

    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>

    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">

      <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">

        <thead>

          <tr>

            <th field="STATE_NAME">State Name</th>

            <th field="STATE_FIPS">State FIPS</th>

          </tr>

        </thead>

      </table>

    </div>

  </div>

</body>

</html>

When using AMD you have to make sure your functions that you are calling from dijits are in scope. Normally you would just add the event to the dijit in the code and not in the html.

0 Kudos
MayJeff
Occasional Contributor

Thank you very much.  It works!

0 Kudos