Zooming map doesn't update basemap tiles and geocoder dijit question

[Jay_Gregory]

I am using v3.3 and the geocoder dijit.  I've added a custom address locator, and attached a handler:

dojo.connect(geocoder, "onSelect", doSomething); function doSomething(results){    console.log(results);    map.setExtent(results.extent);    map.setZoom(12);    }

However, when the map zooms, the tiles are blurry and the feature layer isn't drawn.  Furthermore, if I try to manually zoom (either using my mouse scroll wheel or the zoom controls on the map itself), the map returns to the previous extent instead of the next zoom level - no matter if I try to zoom in OR out.  Is anyone else experiencing this problem?

Also, in the geocoder dijit, does specifying the "onSelect" handler override the default behavior for using the default Esri World geocoding service, or is that completely separate?  When I geocode using the Esri World Geocoder Service, the zooming and panning seems to work find when a result is selected.

Thanks!

Jay

[KellyHutchins · Accepted solution]

Hi Jay,

Do you want to zoom to the matched location(s) once the results are found?  The default behavior of the widget is to auto navigate to the results. If you want to handle this yourself set the autoNavigate option to false when creating the Geocoder:

         var geocoder = new esri.dijit.Geocoder({           map: map,           autocomplete: true,           arcgisGeocoder: false,           autoNavigate: false,           geocoders: myGeocoders,           value: '146317'          },"search");

Then you can zoom to the selected feature yourself. Since you want to both zoom to an extent and change the zoom level try using map.centerAndZoom instead of map.setExtent and map.setLevel. For example:

             //define a symbol             var symbol = new esri.symbol.PictureMarkerSymbol({               "angle":0,               "xoffset":0,               "yoffset":10,               "type":"esriPMS",               "url":"http://static.arcgis.com/images/Symbols/Shapes/YellowPin1LargeB.png",               "contentType":"image/png",               "width":24,               "height":24             });             //ar matches = results;             //add a point to the map to show the result location             var graphic = result.feature;             graphic.setSymbol(symbol);             map.graphics.add(graphic);                           //alternative would be to use center and zoom             map.centerAndZoom(result.extent.getCenter(), 18);

[MichaelSchnack]

Was struggling with this also.  Super helpful, thanks.

[Jay_Gregory]

Thanks Kelly!  Very helpful - I hadn't known about the autoNavigate switch.  I guess the default is to true though.   Does that also apply to the "World Geocoding Service" too if I'm using both, or is that handled separately?

However, since I want to zoom as well as pan, I have tried multiple ways, including centerandZoom, centerAt then setZoom or setLevel, etc. etc.  However, each time it fires, the map zooms in, but the tiles don't update (as if it's zooming in too fast).  The tiles remain blurry, and my feature layer doesn't redraw.  Plus, if I try to manually zoom (scroll wheel or map navigation), the map just zooms out to the previous country level extent from which I generally start.  I've worked around this to some degree of success using setTimeout to zoom (after auto pan) and then to refresh the feature layer, but it doesn't always work.  Maybe there is something more specific with my map going on since this isn't a common problem.

UPDATE - I just tried changing my map navigation mode from "css-transforms" to "classic" and that seemed to fix my problem, even though I was testing in Chrome and FF.  However, I have noticed some other interesting behavior: My map starts at CONUS, the country wide view.  If I search for, say LAX, the map pans and zooms using my custom handler, the tiles update (and look fine), the feature layer works too (it really did seem to be a navigationMode problem).  However, while zoomed into LAX, if I then use the locator service and search for DCA, the map pans to DCA (no zooming since finding LAX already set the zoom level to 18 per your code example), but takes about 10 seconds to update the tiles.  Looking at the NET calls in Firebug, it seems as if it is making calls to every tile between LAX and DCA at that zoom level - necessarily way too many.  Is that expected behavior?

Thanks, and sorry for the long post...

Jay

[KellyHutchins]

Jay is your app public? If so can you send the url so I can test? I can't reproduce the issue with my simple test app.

UPDATE - I just tried changing my map navigation mode from "css-transforms" to "classic" and that seemed to fix my problem, even though I was testing in Chrome and FF.  However, I have noticed some other interesting behavior: My map starts at CONUS, the country wide view.  If I search for, say LAX, the map pans and zooms using my custom handler, the tiles update (and look fine), the feature layer works too (it really did seem to be a navigationMode problem).  However, while zoomed into LAX, if I then use the locator service and search for DCA, the map pans to DCA (no zooming since finding LAX already set the zoom level to 18 per your code example), but takes about 10 seconds to update the tiles.  Looking at the NET calls in Firebug, it seems as if it is making calls to every tile between LAX and DCA at that zoom level - necessarily way too many.  Is that expected behavior?

Thanks, and sorry for the long post...

Jay

[Jay_Gregory]

Kelly - unfortunately the app isn't public, but I was able to reproduce on my end using this using Chrome and Firefox.  Zooming to the second location (in either order)  takes a while to update the tiles.  If you look at the NET calls using dev console, you can see it loading tons of tiles...

Thanks!

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>FeatureLayer On Demand</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
   #header {
        margin: 2px;
        border: solid 4px #224a54;
        color:black; font-size:12pt; 
        text-align:left; font-weight:bold; height:40px;
      }
    </style>
   <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      
      var map;
      function init() {
  //Instantiate Map
  map = new esri.Map("map", {
          basemap: "gray",
          center: [-97, 38],
          zoom: 5,
    navigationMode: "classic"
        });
  
      }
   function zoomToCA(){
   map.centerAndZoom([-118.4075, 33.9424], 18);
   }
   
   function zoomToDC(){
   map.centerAndZoom([-77.038472, 38.85188],18);
   }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
    <div style="position:relative;float:left; width:100%;height:100%;">
 <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){zoomToCA();}">Zoom to CA</button>
   <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){zoomToDC();}">Zoom to DC</button>
    </div>
      <div id="map" style="width:100%;height:100%;">
      </div>
    </div>
  </body>
</html>

Jay is your app public? If so can you send the url so I can test? I can't reproduce the issue with my simple test app.