Auto zoom to combo box select

MayJeff — Sat, 23 Aug 2014 21:40:15 GMT

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.

Re: Auto zoom to combo box select

RobertScheitlin__GISP — Sat, 23 Aug 2014 22:09:43 GMT

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/MapServer", {
        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/MapServer/2");

      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.

Re: Auto zoom to combo box select

MayJeff — Sun, 24 Aug 2014 00:49:06 GMT

Thank you very much. It works!

topic Re: Auto zoom to combo box select in ArcGIS JavaScript Maps SDK Questions

Auto zoom to combo box select

Re: Auto zoom to combo box select

Re: Auto zoom to combo box select