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; //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>