InfoWindow content populated by function

[TracySchloss]

I have a complicated definition for infoTemplate content which I'm populating with a function.  Because I'm using bootstrap-map, there's some issue with the 'Zoom to' not getting applied in the footer the way you'd expect.  I've managed this with code, but now I'm attempting to split this functionality out into it's own myinfoTemplate.js file. ( I'm attempting to break free of my spaghetti code habits.) 

define ([  
"dojo/dom-construct",
"dojo/on",
"dojo/dom",
"dojo/query",

      ] , function (domConstruct,on,dom,query) {  
    return {
      generateInfoContent: function(graphic){
        var currentGraphic = graphic;
        var formatString = "";
        var addrTest = graphic.attributes.AD_LINE1;
        var addr2Test = graphic.attributes.AD_LINE2;
        var provCode = graphic.attributes.ID_PROV_TYPE_FK;
        var specCode = graphic.attributes.ID_SPECIALTY_FK;
        var locTest = graphic.attributes.LOC_CODE.substring(0, 1);
        var phoneTest = phoneFormatter(graphic.attributes.PH_NUMBER);
        
        
        formatString = "<b>" + graphic.attributes.NA_PROVIDER + "</b>";
        if (addrTest.length > 1) {
          formatString += "<br>" + addrTest;
        }
        if (addr2Test.length > 1) {
          formatString += "<br>" + addr2Test; 
        }
        formatString += "<br>" + graphic.attributes.AD_CITY + ", " + graphic.attributes.AD_STATE + "  " + graphic.attributes.AD_ZIP_CODE +
        "<br>" //+        phoneTest;
        if (locTest) {
          formatString = formatString + "</br> ** Location Approximate ** ";
        }
        //popup from bootstrap doesn't display Zoom To link, so add it here       


         if (!dom.byId('zoomLink')) {
         var link = domConstruct.create("a", {
         "class": "action zoomTo myZoom",
         "id": "zoomLink",
         "title": "My Zoom",
         "innerHTML": "Zoom To", //text that appears in the popup for the link
         "href": "javascript: void(0);"
         }, query(".sizer", map.infoWindow.domNode)[1]); //fails on this line, cannot read property 'infoWindow' of undefined
         on(link, "click", this.zoomTo);

 //dom.byId('toMessage').innerHTML = "Address for: " + graphic.attributes.NA_PROVIDER;      
        
        //formats phone number to contain () and dash - used by setInfoContent and queryHandler_populateProviders
        function phoneFormatter(input){
          var area = input.substr(0, 3);
          var pre = input.substr(3, 3);
          var suf = input.substr(6, 4);
          return "(" + area + ") " + pre + "-" + suf;
        }
        
        function zoomTo(){
          var geom = currentGraphic.geometry;
          var lod = map.getLevel();
          if (lod < 8) {
            map.centerAndZoom(geom, 8);
          }
          else {
            map.centerAndZoom(geom, lod + 1);
          }
          map.infoWindow.setFeatures(currentGraphic);
          map.infoWindow.show(currentGraphic.geometry);
          
        }
        return formatString;
      } 
    }
});

Now that's it's separate, it gets hung up on  }, query(".sizer", this.map.infoWindow.domNode)[1]);.  How do I tell it what 'map' is?

I'm calling this from my map.js file as

      var infoTemplate = new InfoTemplate();
  infoTemplate.setTitle("Site Information");
  infoTemplate.setContent(myInfoTemplate.generateInfoContent); 

This all works when I comment out the lines that deal with the link.  But I need that part! 

[RobertScheitlin__GISP]

Tracy,

   You need to pass the map object into your myInfoTemplate constructor.

[TracySchloss]

How?    Defining the infoContent of an infoTemplate with a function automatically passes 'graphic' as a parameter, it's not something I'm doing .  If I add in 'map' as a 2nd parameter it just fails.  No errors, the page just doesn't load.

[SteveCole]

Are you using a global "app" object variable for your application to handle global properties?

if so, store the map reference as an object during your initial map creation:

var app = [];
app.map = New Map(...);

And then in your infoWindow.js reference tie into the map using your app variable:

}, query(".sizer", app.map.infoWindow.domNode)[1]);

Steve

[RobertScheitlin__GISP · Accepted solution]

Tracy,

   Oh I did not know you were working with a method with a defined structure. In that case then you can get the map for the graphics getLayer().getMap()

     generateInfoContent: function(graphic){  
        var currentGraphic = graphic;
        var map = graphic.getLayer().getMap();

[TracySchloss]

I wasn't even thinking that the graphic would know what map it came from.  I was making it too complicated.