Issue with Esri ArcGIS JS SDK in Qualtrics Survey - Map Not Rendering

Question

Hello Qualtrics Community,I am experiencing a challenge integrating the Esri ArcGIS JavaScript SDK into a Qualtrics survey question. The goal is to allow users to search for an address using the Esri map widget within the survey.Following the Esri tutorial for searching an address (https://developers.arcgis.com/javascript/latest/tutorials/search-for-an-address/), I've added the necessary Esri CSS and JS links to the header of my survey:Additionally, I've implemented the map widget through JavaScript in the addOnload function and provided an HTML container for the map in the question text:function addMap() { console.log("before require"); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/widgets/Search", ], function (esriConfig, Map, MapView, Search) { console.log("setting api key"); esriConfig.apiKey = "my-api-key-goes-here"; const map = new Map({ basemap: "arcgis/navigation", }); console.log("map", map); const view = new MapView({ container: "viewDiv", map: map, center: [-122.3321, 47.6062], zoom: 12, }); console.log("view", view); const search = new Search({ //Add Search widget view: view, }); console.log("search", search); view.ui.add(search, "top-right"); //Add to the map console.log("search added to map"); });}Qualtrics.SurveyEngine.addOnload(function () { console.log("drawing map"); addMap();});

Choose a location

The issue I'm encountering is that while the zoom controls and the search bar appear, the map itself does not render (only a blank container is displayed). All console logs in the JavaScript appear, suggesting the script is executed successfully. I have ensured there are no console errors, and network inspection shows all resources are loading successfully with status 200.I’ve also verified that the map container has CSS for a set width and height, and that my API key doesn’t have any referrer limitations and has the necessary scopes that came with the default API key for a developer account.Has anyone encountered a similar issue or can provide insight into why the Esri map would not display in a Qualtrics survey question?Any guidance or suggestions would be greatly appreciated!Thank you!Preview of survey question

corinally · Accepted Answer

Turns out, Qualtrics loads the Prototype JavaScript framework which overrides the nativeArray.fromimplementation with its own that doesn't support newer iterables, likeSetandMap, and that breaks the ArcGIS SDK (it also breaks Google Maps as well). Prototype is no longer being maintained, so it's likely this will never be fixed.One fix for this is overriding the Array.from method again using a pollyfill that works just like the native code. Here is one that worked for me:Array.from polyfill with support for iterators (github.com)

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded