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!