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?

  • It would be like reproducing the same behaviour when clicking on a country in this map: maps.worldbank.org For example, you click on South Africa and inmediately you switch to a closer layer, where different information can be shown. Anyone? Thanks!
    – Irene
    Nov 13, 2012 at 8:49

1 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);

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

//do something when the click occurs
function mapOnClick(evt) {
    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

  • 1
    It simply works! I didn't know how to pick the new geometry to be set to the extent. Now it is clear. Thank you very much! PD: I removed the ".expand(10)" function, because it zoomed out til world full extent.
    – Irene
    Nov 15, 2012 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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