Meg,
OK, I have completed the code additions for the MapManager.js for adding the custom infoWindow for your parks layer:
There are three new functions and one line of code to add to an existing function in MapManager.js.
New functions to add:
_getParksLayer: function() {
require(["jimu/LayerInfos/LayerInfos"], lang.hitch(this, function(LayerInfos){
if (this.map.itemId) {
LayerInfos.getInstance(this.map, this.map.itemInfo)
.then(lang.hitch(this, function(operLayerInfos) {
this.operLayerInfos = operLayerInfos;
array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
console.info(layerInfo);
if(layerInfo.title === 'ParksFinder'){
this._setupParksPopup(layerInfo);
}
}, this);
}));
} else {
var itemInfo = this._obtainMapLayers();
LayerInfos.getInstance(this.map, itemInfo)
.then(lang.hitch(this, function(operLayerInfos) {
this.operLayerInfos = operLayerInfos;
array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
console.info(layerInfo);
if(layerInfo.title === 'ParksFinder'){
this._setupParksPopup(layerInfo);
}
}, this);
}));
}
}));
},
_setupParksPopup: function(LayerInfo) {
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Park Name: ${PARK}");
var templateString = "<b>${NAME}</b><br/>" +
"<b>Park Website: </b>${PARK_URL:convertLink}<br/>" +
"<b>Park Map: </b>${PARK_MAP:convertLink}<br/><br/>" +
"${I_BIKE:checkAvailable}" +
"${I_WALK:checkAvailable}" +
"${I_SWIMP:checkAvailable}" +
"${I_SWIML:checkAvailable}" +
"${I_DOGWALK:checkAvailable}" +
"${I_FISH:checkAvailable}" +
"${I_INTERP:checkAvailable}" +
"${I_HORSE:checkAvailable}" +
"${I_PICNIC:checkAvailable}" +
"${I_RESTRM:checkAvailable}" +
"${I_PLAYGRD:checkAvailable}" +
"${I_BOAT:checkAvailable}" +
"${I_GOLF:checkAvailable}" +
"${I_ARCHERY:checkAvailable}" +
"${I_GCAMP:checkAvailable}" +
"${I_BPCAMP:checkAvailable}" +
"${I_FCAMP:checkAvailable}";
infoTemplate.setContent(templateString);
checkAvailable = function (value, key, data) {
var boolTest = value.toLowerCase().indexOf('_no_') > 0 ? false : true;
var retRslt = "";
if(boolTest){
retRslt = "<img src='http://gislap183/ParkIcons/" + value + "'/> ";
}
return retRslt;
};
convertLink = function (value, key, data) {
var retRslt = "", linkAlias = "";
switch (key){
case 'PARK_URL':{
linkAlias = "More Info";
break;
}
case 'PARK_MAP':{
linkAlias = "Print Park Map";
break;
}
}
retRslt = "<a href='" + value + "' target='_blank'>" + linkAlias + "</a>";
return retRslt;
};
LayerInfo.layerObject.setInfoTemplate(infoTemplate);
},
_obtainMapLayers: function() {
// summary:
// obtain basemap layers and operational layers if the map is not webmap.
var basemapLayers = [],
operLayers = [];
// emulate a webmapItemInfo.
var retObj = {
itemData: {
baseMap: {
baseMapLayers: []
},
operationalLayers: []
}
};
array.forEach(this.map.graphicsLayerIds, function(layerId) {
var layer = this.map.getLayer(layerId);
if (layer.isOperationalLayer) {
operLayers.push({
layerObject: layer,
title: layer.label || layer.title || layer.name || layer.id || " ",
id: layer.id || " "
});
}
}, this);
array.forEach(this.map.layerIds, function(layerId) {
var layer = this.map.getLayer(layerId);
if (layer.isOperationalLayer) {
operLayers.push({
layerObject: layer,
title: layer.label || layer.title || layer.name || layer.id || " ",
id: layer.id || " "
});
} else {
basemapLayers.push({
layerObject: layer,
id: layer.id || " "
});
}
}, this);
retObj.itemData.baseMap.baseMapLayers = basemapLayers;
retObj.itemData.operationalLayers = operLayers;
return retObj;
},Code to add to _publishMapEvent function is on line 19:
_publishMapEvent: function(map) {
//add this property for debug purpose
window._viewerMap = map;
if (this.loading) {
this.loading.destroy();
}
console.timeEnd('Load Map');
if (this.map) {
this.map = map;
this.resetInfoWindow(true);
console.log('map changed.');
topic.publish('mapChanged', this.map);
} else {
this.map = map;
this.resetInfoWindow(true);
topic.publish('mapLoaded', this.map);
}
this._getParksLayer();
},
