Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

Thanks for your help,

share|improve this question
    
Related gis.stackexchange.com/questions/28394/… –  Mapperz Nov 19 '12 at 14:23
add comment

3 Answers

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/

share|improve this answer
add comment

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.

share|improve this answer
add comment

I am working on a similar project, trying to filter the graphics on my map based on the user input into a FilteringSelect. The overall methodology of how my app is set up is that I go from a queryTask into a forEach loop that calls map.graphics.add(graphic) for each encountered feature returned from the queryTask.

I was hoping to be able to use the map.getLayer("dynamic").setLayerDefinitions(...) function to filter the map results based on user input, but from what I can tell that's not possible here since I don't define layers. Is there any way to accomplish this filtering with the setup I am currently using?

share|improve this answer
    
This is not an answer. You should post your own question. –  Derek Swingley Jan 20 '13 at 23:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.