Custom widget with custom popup

[AndrewTerwiel]

I'm trying to assign a custom popup to the map.infowindow in a custom widget, but when I do this I receive a console error saying "cannot read property 'toScreen' of undefined at p.show". Here is my code:

_customPopup: new Popup({
  fillSymbol: this._sfsParcel,
  highlight: true,
  lineSymbol: this._slsRoad,
  markerSymbol: this._smsPoint
}, domConstruct.create("div")),


postCreate: function () {
  this.inherited(arguments);
  this._config = this.config;
  this.map = this.map;
  this.map.infoWindow = this._customPopup;
},

Does anyone see what could be wrong here?

[RobertScheitlin__GISP]

Andrew,

   I think post create is to early in the widgets life cycle try startup instead

[AndrewTerwiel]

Hi Robert,

Moving the code to startup didn't work. Same error as before.

[RobertScheitlin__GISP]

Andrew,

   I need to see your full widget code can you zip it up and attach, so I can look into this. I have seen at least one other person talk about this but I have not run into this myself.

[AndrewTerwiel]

Here you go, Robert. Thanks for looking into this.

[RobertScheitlin__GISP]

Andrew,

   Where is Bloodhound coming from in your code? I don't see a require for it. I also don't see how you are loading jQuery.

[AndrewTerwiel]

Bloodhound is included in typeahead.bundle.min.js which is in \stemapp\libs\storejs and loaded by \stemapp\libs\main.js which has this code:

define(["./usng/usng"
  , "./storejs/json"
  , "./storejs/store"
  , "./storejs/bootstrap.min"
  , "./storejs/typeahead.bundle.min"
  ]
, function(){
});

jquery-2.1.4.min.js is in \stemapp\libs and is loaded by \stemapp\init.js which contains this code:

resources = resources.concat([
   window.apiUrl + 'dojo/resources/dojo.css',
   window.apiUrl + 'dijit/themes/claro/claro.css',
   window.apiUrl + 'esri/css/esri.css',
   window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',
   window.path + 'jimu.js/css/jimu-theme.css',
   window.path + 'libs/npdccss/typeahead.css',
   window.path + 'libs/npdccss/bootstrap.min.css',
   window.path + 'libs/npdccss/bootstrap-theme.min.css',
   window.path + 'libs/jquery-2.1.4.min.js'
]);

This discussion describes how I came to use these methods of loading other libraries.

Uncaught Error: Bootstrap's JavaScript requires jQuery

[RobertScheitlin__GISP]

Andrew,

  OK, I will look into that. Can you do a console.info on the this.map object and see if it is actually a map object. I seem to think that the other time I saw this the person was using several third party libraries.  I wonder if they could be interfering with the widgets this.map.

[AndrewTerwiel]

Yes, console.info shows that this.map is a map object.

[AndrewTerwiel]

Hi Robert,

It might have been me that you are referring to when you talk about the person using the 3rd party libraries.

Changing the code I've posted above to this below fixes the error.

//this.map.infoWindow = this._customPopup;
this.map._mapParams.infoWindow = this._customPopup;

I know we should avoid the underscored objects, but it works.