Custom widget with custom popup

3531
10
11-10-2015 06:19 PM
AndrewTerwiel
Occasional Contributor II

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?

0 Kudos
10 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Andrew,

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

0 Kudos
AndrewTerwiel
Occasional Contributor II

Hi Robert,

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
AndrewTerwiel
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
AndrewTerwiel
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
AndrewTerwiel
Occasional Contributor II

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

0 Kudos
AndrewTerwiel
Occasional Contributor II

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.

0 Kudos