repositioning map div breaks QueryTask until the extent changes (eg zoom)

[JamesBurton]

Hi, I have a layer with a querytask to do an indentify on click and show the infoWindow. This works OK at first but then there is a sequence of events which turns the layer off, zooms in, changes the position of the map div, then turns the layer on again, zooms out and nudges the map div again, due to loading bits of content on the page. After this, the queryTask stops working until the map extent changes, eg zooming or panning. I think my problem is due to repositioning the map div, but calling reposition() and resize() doesn't help. This is the sequence of events:

. the map displays a layer of shape data,
. user clicks on a feature: this shows the infoWindow, and draws a "highlight" graphic with the same geometry as the selected feature,
. the user then follows a link to zoom in on that feature: zooming in on the feature hides the layer, sets the extent to that of the graphic added in the previous step and uses ajax to load some various bits of content on the page (which results in the map div being repositioned).

The user then follows a link to zoom out:

. clear the graphics layer,
. display the original shape layer,
. set the extent to initial extent,
. make changes to the content on the page, meaning the map div is nudged around again.

As I say, this sequence of events breaks the queryTask until the user zooms or otherwise changes the extent, when the queryTask works again. Here's some of the code:

var map, queryTask, query, feature, featureSet, selectionLayer, shapeLayerID;

function init() {
    try {
        //draw a tiled layer on the map
 Utils.mapAndBaseLayer(CWLSettings.cityExtent);
 //add a dynamic layer to the map
 var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
 imageParameters.layerIds = [];
        var ms = appSettings.MapServices[2];
 var layer = new esri.layers.ArcGISDynamicMapServiceLayer(ms.Url, {"imageParameters":imageParameters});
 Utils.addLayer(layer);
 dojo.connect(map, "onLoad", initialHandlers);
    } catch (ex) {
        console.log(ex);
    }
}

/* code to call when loading the map for the first time or zooming back out to full extent */
function initialHandlers() {
    dojo.connect(map, "onClick", executeQueryTask);
    dojo.connect(map.infoWindow, "onHide", function() {
 if (!zoomedIn) map.graphics.clear();});
}

/* setup the queryTask for the active layer */
function setQueryTask() {
    queryTask = new esri.tasks.QueryTask(appSettings.MapServices[2].Url + '/' + shapeLayerID);
    query = new esri.tasks.Query();
    query.returnGeometry = true;
    query.outFields = ["NAME", "LAYER", "SITE", "SHAPE_ID"];
}

/* turn on a layer in the CWL map service: either the layer whose id is supplied, or the active
shapeLayerID  */
function layerOn(id) {
    if(id) {
 shapeLayerID = id;
    } else {
 id = shapeLayerID;
    }
    zoomLayer = id;
    var service = appSettings.MapServices[2];
    for(var j = 0; j < map.layerIds.length; j++) {
 var layer = map.getLayer(map.layerIds);
 if(layer.url == service.Url){ //the CWL service
     layer.setVisibleLayers([id]);
     layer.refresh();
     break;
 }
    }
    setQueryTask();
    for(var i=0;i<11;i++) {
 $('#areaSelectorLabel'+i).removeClass('selected');
    }
    $('#areaSelectorLabel'+id).addClass('selected');
}

/* run the query task to identify a feature on the active layer */
function executeQueryTask(evt) {
    
    map.infoWindow.hide();
    map.graphics.clear();
    featureSet = null;

    //onClick event returns the evt point where the user clicked on the map.
    //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
    //set query geometry = to evt.mapPoint Geometry
    query.geometry = evt.mapPoint;

    //Execute task and call showResults on completion
    queryTask.execute(query, function(fset) {
        console.log(fset);
 if (fset.features.length === 1) {
            showFeature(fset.features[0],evt);
        } else if (fset.features.length !== 0) {
            showFeatureSet(fset,evt);
        }
    });
}

function showFeature(feature,evt) {
    map.graphics.clear();

    //set symbol
    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
             new dojo.Color([255,0,0]), 2), 
        new dojo.Color([255,255,0,0.5]));
    feature.setSymbol(symbol);
    selectedFeature = feature;
    selectedPolys = [];
    selectedPolys.push(selectedFeature.geometry);
    //construct infowindow title and content
    var attr = feature.attributes;
    var title = attr.NAME ? attr.NAME : attr.LAYER;
    var content = title;
    var column = 'NAME';
    if(attr.SITE) {
 content = attr.SITE;
 column = 'SITE';
    } 

    var href = "fbx_index.cfm?fuseaction=area.name&name="+encodeURIComponent(content)+"&lv_id="+shapeLayerID+"&action=zoomto&column="+column;
    if (attr.NAME || attr.SITE){
 content = content + "<br /> <a href='#' onClick='return zoomToFeature();'>More</a>";
    }
    map.graphics.add(feature);

    map.infoWindow.setTitle(title);
    map.infoWindow.setContent(content);

    (evt) ? map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)) : null;
}

function showFeatureSet(fset,evt) {
    //remove all graphics on the maps graphics layer
    map.graphics.clear();
    var screenPoint = evt.screenPoint;

    featureSet = fset;

    var numFeatures = featureSet.features.length;

    //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the infowindow.
    var title = "You have selected " + numFeatures + " fields.";
    var content = "Please select desired field from the list below.<br />";
    var graphic, name;

    for (var i=0; i<numFeatures; i++) {
        graphic = featureSet.features;
 if(graphic.attributes.NAME) {
     name = graphic.attributes.NAME;
 } else if (graphic.attributes.SITE) {
     name = graphic.attributes.SITE;
 } else {
     name = graphic.attributes.LAYER;
 }
        content = content + "<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>" + name + "</A><br/>";
    }
    map.infoWindow.setTitle(title);
    map.infoWindow.setContent(content);
    map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}

/* functions that deal with zoomed in features */

var selectedFeature, zoomedIn;

/* Find a feature on the map in the zoomLayer, using the NAME
 * attribute, then add a layer highlighting that feature and zoom
 * in on it, */
function zoomToFeature() {

    //hide infoWindow and all other features
    zoomedIn = true;
    map.infoWindow.hide();
    var service = appSettings.MapServices[2];
    for(var j = 0; j < map.layerIds.length; j++) {
 var layer = map.getLayer(map.layerIds);
 if(layer.url == service.Url){ //the CWL service
     layer.setVisibleLayers([]);
     layer.refresh();
     break;
 }
    }
    // zoom in on selectedFeature
    var featureExtent = selectedFeature.geometry.getExtent().expand(2.0);
    map.setExtent(featureExtent);

    //disable the standard infoWindow mouse events
    //map.graphics.disableMouseEvents();

    //disable the layer selection radio buttons
    jQuery("#frmLayerSelector input:radio").attr('disabled',true);

    //load the new content for this feature
    $('#placesIntro').addClass('hidden');
    var name = selectedFeature.attributes.NAME;
    var nameEnc = encodeURIComponent(name);
    $('#landingTitle').html(name + '  << <a href="#" onClick="return unZoomify();">Back</a>');
    $('#zoomedInLinks').load("fbx_index.cfm",
        {fuseaction: "plain.zoomedInLinks",
         feature_name: nameEnc});
    $('#zoomedInContent').load("fbx_index.cfm",
        {fuseaction: "plain.zoomedInContent",
         feature_name: nameEnc});
    map.resize();
    map.reposition();//the map div has moved
}

function unZoomify() {
    //activate the layer selector form
    jQuery("#frmLayerSelector input:radio").attr('disabled', false);
    //reset the content
    $('#placesIntro').removeClass('hidden');
    $('#landingTitle').html('Places');
    $('#zoomedInLinks').html('');
    $('#lscapePhotoForm').html('');
    $('#lscapePhotoForm').removeClass('form-highlight');
    $('#zoomedInContent').html('');
    //redraw the active layer and nothing else
    map.graphics.clear();
    layerOn();
    //zoom out to full extent
    map.setExtent(new esri.geometry.Extent(CWLSettings.cityExtent));
    map.graphics.enableMouseEvents();
    zoomedIn = false;
    initialHandlers();
    map.resize();
    map.reposition();//the map div has moved
    return false;//called from anchor links
}

Sorry for the long post and TIA.