[GIS] How to zoom to feature when clicking on drop-down list box item with ArcGIS JS API

arcgis-javascript-apiarcgis-server

I am developing a web application with ArcGIS JS Api that is similar to this smart campus: UCSB Interactive Campus Map. Here, in the Building drop down list box, you can select a building, and the service map next to the sidebar will simply zoom and select that polygon feature.

The thing is that in my application, I do have a sidebar with a drop down list box, where you can select buildings as well. But I don't know how to make the map service to zoom-and-select that building when the user clicks on a determined Building code, such as "Library" or "Engineering".

How to make this correspondence between a text item and a polygon?

Please, could you provide any ideas on how to make this web application behave the same as UCSB?

Best Answer

You could prepopulate a list of objects such as ItemFileReadStore or just grab them as needed. There won't likely be that much overhead. I'm using a feature layer below in selection mode. You could just use a ArcGISDynamicMapServiceLayer or Tiled if you want.

Where I am using subblock, substitute your building polygon layer.

//html
<select id="building_code">
    <option selected="selected" value="">Select Building</option>
    <option value="Engineering">Engineering</option>
    <option value="Library">Library</option>
</select>

//Define a feature layer
var subblockQueryFeatureLayer = new esri.layers.FeatureLayer("http://server/ArcGIS/rest/services/folder1/FeatureServer/0", {
    id: 'subblockQueryFeatureLayer',
    mode: esri.layers.FeatureLayer.MODE_SELECTION,
    outFields: ["*"]
});

// Define the selection symbol for feature layer
var outlineColor = new dojo.Color(dojo.Color.named.red.concat(0.8));
var outlineSym = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, outlineColor, 3.0);
var selectionColor = new dojo.Color(dojo.Color.named.red.concat(0.35));
var selectionSymSubblocks = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, outlineSym, selectionColor);

//connect event to onchange of building select dropdown
dojo.connect(dojo.byId('#building_code'), "onchange", function(evt) {
     console.log("option changed to: " + evt.target.value);

    subblockQueryFeatureLayer.clearSelection();
    var selectQuery = new esri.tasks.Query();
    selectQuery.where = "BUILDING_CODE = '" + evt.target.value + "'";
    selectQuery.outFields = ["*"];
    subblockQueryFeatureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function (features) {
        //after highlighting feature (or not), zoom to feature to show detailed map
        if (features !== undefined && features.length !== 0) {
            //should be only one result returned, so using first array value [0]
            map.setExtent(features[0].geometry.getExtent(), true);
        }
        else {
            alert("Building not found.")
        }
    });
    dojo.stopEvent(evt);
});

Check out my website at http://www.spatialexception.org/

Related Question