AnsweredAssumed Answered

custom InfoWindow using arcgisUtils.createMap with webmap

Question asked by waringt on Jul 10, 2017

Greetings, I am working to extend the Custom info window example to work with a webmap loaded using arcGISUtils.createMap. I'm not sure if loading the webmap changes or is missing some parameter that the map.infoWindow option needs to load a custom info window or if my logic is unsound. Regardless, a structure that is sound otherwise, fails produces an obscure error when I try to load a custom infoTemplate. The error that I am receiving is:

init.js:2377 Uncaught TypeError: d.clearFeatures is not a function at Object.Fa (init.js:2377) at Object.c [as onClick] (init.js:119) at Object._fire (init.js:1296) at Object._fireClickEvent (init.js:1303) at init.js:63

 

Any thoughts or suggestions will be greatly appreciated. 

 

Thanks, 

Tyler 

 

The extended example that I am working on is:

 

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Custom Info Window</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<link rel="stylesheet" href="myModules/InfoWindow.css">
<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var dojoConfig = {
parseOnLoad: true
, packages: [{
"name": "myModules"
, "location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules"
}]
};
</script>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
require([
"dojo/dom"
, "dojo/dom-construct"
, "esri/map"
, "esri/arcgis/utils"
, "myModules/InfoWindow"
, "esri/layers/FeatureLayer"
, "esri/InfoTemplate"
, "dojo/string"
, "dojo/domReady!"
], function (dom, domConstruct, Map, arcgisUtils, InfoWindow, FeatureLayer, InfoTemplate, string) {
//create the custom info window specifying any input options
var infoWindow = new InfoWindow({
domNode: domConstruct.create("div", null, dom.byId("mapDiv"))
});
//create the map and specify the custom info window as the info window that will
//be used by the map
var theme = {
"layers": [
{
"url": "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0"
, "visibility": true
, "opacity": 1
, "title": "Trees"
, "id": "trees"
, "outFields": ["*"]
, "infoWindow":{
"header": "${qSpecies}"
, "content": "<b>Address:</b>${qAddress}<br>"
}
}
]
}
var webmap = {}
webmap = {
"item": {
"title": "trees"
, "snippet": "Trees in London"
}
, "itemData": {
"operationalLayers": [{}

]
, "baseMap": {
"baseMapLayers": [
{
"opacity": 1
, "visibility": true
, "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
}

]
, "title": "London Treemap"
}
, "version": "1.1"
}
}

var mapDeferred = arcgisUtils.createMap(webmap, "mapDiv", {
mapOptions: {
center: [-122.41, 37.78]
, zoom: 17
, slider: true
, nav: false
, smartNavigation: false
, scrollWheelZoom: true
, infoWindow: infoWindow
}
});
mapDeferred.then(function (response) {
map = response.map;
//map.infoWindow = infoWindow

function loadLayers(layerArray) {
require(["esri/layers/FeatureLayer", "esri/InfoTemplate"], function (FeatureLayer, InfoTemplate) {
//webmap.itemData.operationalLayers = [];
//console.log("webmap.itemData.operationalLayers: " + JSON.stringify(webmap.itemData.operationalLayers))
var fLayers = [];
for (var i = 0; i < layerArray.length; i++) {
var layer = layerArray[i];
//for (var property in layer) {
//console.log('item ' + i + ': ' + property + '=' + layer[property]);
var fLayer;
if (layer.infoWindow) {
var iwHeader = layer.infoWindow.header;
var iwContent = layer.infoWindow.content;
console.log(iwHeader);
console.log(iwContent);
var template = new InfoTemplate(iwHeader, iwContent);
console.log(template);
fLayer = new FeatureLayer(layer.url, {
mode: FeatureLayer.MODE_ONDEMAND
, id: layer.id
, outFields: layer.outFields
, opacity: layer.opacity
, visibility: layer.visibility
, infoTemplate: template
})
}
else {
fLayer = new FeatureLayer(layer.url, {
mode: FeatureLayer.MODE_ONDEMAND
, id: layer.id
, outFields: layer.outFields
, opacity: layer.opacity
, visibility: layer.visibility
})
}
fLayers.push(fLayer);
}
map.addLayers(fLayers);
});
}
loadLayers(theme.layers)

//resize the info window
map.infoWindow.resize(180, 75);
});

});
</script>
</head>

<body>
<div id="mapDiv"></div>
</body>

</html> 

Outcomes