topic Re: JSAPI 3.x map centerAndZoom method in Web AppBuilder Custom Widgets Questions

JSAPI 3.x map centerAndZoom method

Anonymous User — Tue, 20 Oct 2020 16:01:21 GMT

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.

Re: JSAPI 3.x map centerAndZoom method

RobertScheitlin__GISP — Tue, 20 Oct 2020 16:14:23 GMT

Damon,

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

Re: JSAPI 3.x map centerAndZoom method

Anonymous User — Tue, 20 Oct 2020 16:19:25 GMT

Hi Robert,

I was able to console.log the map object.

Re: JSAPI 3.x map centerAndZoom method

RobertScheitlin__GISP — Tue, 20 Oct 2020 16:34:23 GMT

Strange. Can I see your code?

Re: JSAPI 3.x map centerAndZoom method

Anonymous User — Tue, 20 Oct 2020 16:44:14 GMT

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:

});

Re: JSAPI 3.x map centerAndZoom method

RobertScheitlin__GISP — Tue, 20 Oct 2020 18:37:11 GMT

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.