custom InfoWindow using arcgisUtils.createMap with webmap

TylerWaring — Sun, 12 Dec 2021 16:31:00 GMT

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>

topic custom InfoWindow using arcgisUtils.createMap with webmap in ArcGIS JavaScript Maps SDK Questions

custom InfoWindow using arcgisUtils.createMap with webmap