Clicking on feature to create particular new map using ArcGIS API for JavaScript?

Question

I have a polygon layer visible from scales 0 to 8 (bigger to smaller). The thing is that I would like to click on a SINGLE feature of this polygon layer and then going to a different map (but in same div), where only this feature is highlighted.

For example, imagine that you see a map of the USA states. Then you click on South Carolina state and see something similar to this ESRI example: http://help.arcgis.com/en/webapi/javascript/arcgis/samples/query_hover/index.html.

So the thing would be, clicking on the feature and switching automatically (without pressing any button) from the general map of the USA to a particular map for a particular feature where more specific operations can be applied, in this case, to South Carolina state.

Is this possible?

Answer 1

You could do this in different ways, but the basics are connecting the map click event, finding what was clicked and then either zooming to the extent of the polygon (easiest) or creating a new map on top of the old map (or it could be below or to the side or a new page) -- you'll have to play around with the div where you define another map.

I would keep it simple to start and just zoom in to the detail layers. Set scale dependencies in your map to display details only at the zoomed in levels.

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 any polygon layer such as US states.

//Define a feature layer
var subblockQueryFeatureLayer = new esri.layers.FeatureLayer("http://server/featurelayername", {
    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);

//define mapclick event
var mapClickEvent

//connect map click event 
function activateSubblockMapClick() {
    if (!mapClickEvent) {
        mapClickEvent = dojo.connect(map, "onClick", mapOnClick);
    }
    subblockQueryFeatureLayer.setSelectionSymbol(selectionSymSubblocks);
}

//disconnect map click event
function deactivateSubblockMapClick() {
    if (mapClickEvent) {
        dojo.disconnect(mapClickEvent);
        mapClickEvent = null;
    }
}

//do something when the click occurs
function mapOnClick(evt) {
    subblockQueryFeatureLayer.clearSelection();
    var selectQuery = new esri.tasks.Query();
    selectQuery.geometry = evt.mapPoint;
    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) {
            map.setExtent(features[0].geometry.getExtent().expand(10), true);
        }
    });
}

Check out this identifytask snippet for querying scale dependent layers http://www.spatialexception.org/posts/arcgis-javascript-identifytask-returns-scale-dependent-layers