Query result extent not centering in map

[GeoffSchwitzgebel]

I have various query tasks that will zoom to the result in the map in my application.  The extent that is zoomed to is offset towards the bottom if a single result is returned and if there are multiple results, all of them are not shown on the map.  When I resize the footer, for some reason everything then works as it is supposed to.  My script that zooms to the points is:

                function showResults(featureSet) {                     var filterArray = [];                     map.graphics.clear();//clear graphics from map                     map.infoWindow.hide();//hide infowindow                                    var resultFeatures = featureSet.features;//Performance enhancer - assign featureSet array to a single variable.                     for (var i = 0, il = resultFeatures.length; i < il; i++) {//loop through all features                         if (resultFeatures.length == 1) {                             var graphic = resultFeatures;                             graphic.setSymbol(symbol);                             nameGraphic = map.graphics.add(graphic);                             var thePoint = resultFeatures[0].geometry;//get single point                             map.centerAndZoom(thePoint, 4);//can add zoom level too                         }                         else if (resultFeatures.length > 1) {                             graphic = resultFeatures                             //var extent = resultFeatures[0].geometry.getExtent().expand(1.5);                             var extent = esri.graphicsExtent(graphic);//get graphics extent of more than 1 feature                             map.setExtent(extent, true); //use to get whole extent//map.setExtent(extent.expand(3));                          }                         else {                             var myFeatureExtent = esri.graphicsExtent(resultFeatures);                             map.setExtent(myFeatureExtent);                         }                             if (resultFeatures.length == 1) {                                 msg = resultFeatures.length + " Feature Selected"                                 document.getElementById('selectedPane').innerHTML = msg;                             }                             else {                                 msg = resultFeatures.length + " Features Selected"                                 document.getElementById('selectedPane').innerHTML = msg;                             }                     }                    }

I'm not sure if this is a map resize or CSS issue.  Has anyone encountered something similar?  Here are a couple screenshots as examples:

Before resize:[ATTACH=CONFIG]29768[/ATTACH]

After resize: [ATTACH=CONFIG]29769[/ATTACH]

Thanks,
Geoff

[Anonymous User]

Original User: kenbuja

It may not be the underlying issue, but do you need to do that in a for loop? Unless you have additional code, you're looping through them needlessly.

function showResults(featureSet) {
    var filterArray = [];
    map.graphics.clear();//clear graphics from map
    map.infoWindow.hide();//hide infowindow               
    var resultFeatures = featureSet.features;//Performance enhancer - assign featureSet array to a single variable.
    if (resultFeatures.length == 1) {
        var graphic = resultFeatures[0];
        graphic.setSymbol(symbol);
        nameGraphic = map.graphics.add(graphic);
        var thePoint = resultFeatures[0].geometry;//get single point
        map.centerAndZoom(thePoint, 4);//can add zoom level too
    }
    else if (resultFeatures.length > 1) {
        graphic = resultFeatures
        //var extent = resultFeatures[0].geometry.getExtent().expand(1.5);
        var extent = esri.graphicsExtent(graphic);//get graphics extent of more than 1 feature
        map.setExtent(extent, true); //use to get whole extent//map.setExtent(extent.expand(3)); 
    }
    else {//this will only get hit if there are no features in resultFeatures
        var myFeatureExtent = esri.graphicsExtent(resultFeatures);
        map.setExtent(myFeatureExtent);
    }
    if (resultFeatures.length == 1) {
        msg = resultFeatures.length + " Feature Selected"
        document.getElementById('selectedPane').innerHTML = msg;
    }
    else {
        msg = resultFeatures.length + " Features Selected"
        document.getElementById('selectedPane').innerHTML = msg;
    }
}

[GeoffSchwitzgebel]

Thanks Ken.  It didn't fix the underlying issue but it did speed up the performance of the queries quite a bit.

Geoff

[Anonymous User]

Original User: gschwitz

Here is a screenshot of the extent of the queried features that appear outside of the map in the data grid.  Here it is in Firefox:

[ATTACH=CONFIG]29784[/ATTACH]

[Anonymous User · Accepted solution]

Original User: btfou

I'm not sure what you're using for layout, but this is what I see happening:

1) the the grid container isn't initially visible
2) the query is processed and the dgrid container changes the size of the map when displayed
3) the map is confused about its screen points

I'll bet the distance in pixels from the top of your extent to the top of the map equals the height in pixels of the dgrid container.

You might try

map.resize(); map.reposition();

after the layout changes but before setting the extent.

If you are using dijit/layout/BorderContainer in your layout, you can simply borderContainer.resize().

I had a similar issue when programmatically creating a dijit layout with hidden regions and the map extent not being what it should have been.

[GeoffSchwitzgebel]

Thanks Ben.  The borderContainer.resize() appears to have resolved it.

Geoff

[Anonymous User]

Original User: btfou

Geoff,

Here's how I deal with the position issue and making sure the layout in general is correct with a dijit layout with the loading script.

require(['modules'], function(modules) {
  //initial layout - hide regions etc
  borderContainer.resize();
  
  //create the map

  on(map, 'load', function() {
    //call resize last in map onLoad - probably not necessary but just in case
    borderContainer.resize();
  });

  //all other app related modules, functions, etc
  
  //final layout - programmatic creation of buttons, menus, widgets, etc
  
  //call resize again right before destroying the loading screen
  borderContainer.resize();
  //destroy loading screen
});