topic InfoWindow content populated by function in ArcGIS JavaScript Maps SDK Questions

InfoWindow content populated by function

TracySchloss — Sat, 11 Dec 2021 14:07:09 GMT

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!

Re: InfoWindow content populated by function

RobertScheitlin__GISP — Fri, 07 Aug 2015 21:24:37 GMT

Tracy,

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

Re: InfoWindow content populated by function

TracySchloss — Fri, 07 Aug 2015 21:41:56 GMT

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.

Re: InfoWindow content populated by function

SteveCole — Sat, 11 Dec 2021 14:07:12 GMT

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

Re: InfoWindow content populated by function

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:07:14 GMT

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();

Re: InfoWindow content populated by function

TracySchloss — Mon, 10 Aug 2015 13:22:22 GMT

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