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

Question

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?

Answer 1

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/

Answer 2

It depends if the data from your select menu comes from a query of the map layer, or if it's hard coded. If the layer was queried first for the building names, you can create an object that stores the building names and polygon information, and refer to that when someone selects from the dropdown menu. Otherwise, you'll have to query the map layer for a building with that name, and use the callback from the query to zoom the map to the extent of the building.

It looks like the example from UCSB uses a combobox connected to an ItemFileReadStore. There, the data was queried from the map layer, and both the building name and geometry were stashed in the ItemFileReadStore data. When you pick the building name, use the ItemFileReadStore to get the corresponding polygon, and zoom to it's extent.