JSAPI 3.x map centerAndZoom method

[Anonymous User]

Hello All,

I am trying to write a widget using WAB 2.16 that needs to be able to center and zoom upon startup.  I created an event handler for the map click event as a test, and tried the following code inside:

this.map.centerAndZoom(event.mapPoint, 0.5);

Nothing happens upon calling the centerAndZoom method and I get the following error in the console:

"Unable to get property 'resolution' of undefined or null reference"

What did I miss?

Thank you. 

[RobertScheitlin__GISP]

Damon,

   Have you verified that this.map is not null in your code scope?

[Anonymous User]

Hi Robert,

I was able to console.log the map object.

[RobertScheitlin__GISP]

Strange. Can I see your code?

[Anonymous User]

Sure:

define(['dojo/_base/declare', 

        'jimu/BaseWidget', 

        'dojo/on', 

        'dojo/_base/lang', 

        'esri/layers/FeatureLayer',

        'esri/layers/layer', 

        'jimu/dijit/FeatureSetChooserForSingleLayer',

        'jimu/dijit/FeaturelayerChooserFromMap',

        'jimu/LayerStructure',

        'dojo/Deferred',

        'esri/tasks/query',

        'esri/symbols/SimpleMarkerSymbol',

        'esri/Color',

        'jimu/SelectionManager',

        'esri/geometry/Point',

        'esri/SpatialReference',

        'esri/geometry/webMercatorUtils'],

  function(declare, 

    BaseWidget, 

    on, 

    lang, 

    FeatureLayer, 

    layer, 

    FeatureSetChooserForSingleLayer, 

    FeaturelayerChooserFromMap, 

    LayerStructure, 

    Deferred, 

    Query, 

    SimpleMarkerSymbol, 

    Color,

    SelectionManager,

    Point,

    SpatialReference,

    webMercatorUtils) {

    //To create a widget, you need to derive from BaseWidget.

    return declare([BaseWidget], {

      // Custom widget code goes here

      baseClass: 'jimu-widget-mywidget',

      token: null,

      graphic: null,

      _def: null,

      //this property is set by the framework when widget is loaded.

      //name: 'CustomWidget',

      //methods to communication with app container:

      // postCreate: function() {

      //   this.inherited(arguments);

      //   console.log('postCreate');

      // },

       startup: function() {

        this.inherited(arguments);    

        this.own(this.map.on('click', lang.hitch(this, this.mapOnClickHandler))); //this.map.on("click", this.mapOnClickHandler);

       },

       mapOnClickHandler: function(event)

       { 

         this.map.centerAndZoom(event.mapPoint, 0.5);

         //console.log(this.map);

         //this.map.centerAt(event.mapPoint);

       },

      // onOpen: function(){

      //   console.log('onOpen');

      // },

      // onClose: function(){

      //   console.log('onClose');

      // },

      // onMinimize: function(){

      //   console.log('onMinimize');

      // },

      // onMaximize: function(){

      //   console.log('onMaximize');

      // },

      // onSignIn: function(credential){

      //   /* jshint unused:false*/

      //   console.log('onSignIn');

      // },

      // onSignOut: function(){

      //   console.log('onSignOut');

      // }

      // onPositionChange: function(){

      //   console.log('onPositionChange');

      // },

      // resize: function(){

      //   console.log('resize');

      // }

      //methods to communication between widgets:

    });

  });

[RobertScheitlin__GISP]

Damon,

  Sorry I missed this before. The second argument on the centerAndZoom method is LevelOrFactor. But 0.5 as your code has is only applicable to a map that is using a ArcGISDynamic Map service as it's basemap.

When using an ArcGISTiledMapServiceLayer, the map is zoomed to the level specified.

When using a DynamicMapServiceLayer, the map is zoomed in or out by the specified factor. For example, use 0.5 to zoom in twice as far and 2.0 to zoom out twice as far.

Change your 0.5 to a LOD of the base map like 16 and the error is gone.