I'm working on upgrading a v1.4.9 to v2.7.0 app. The development site is https://gis.ccpa.net/labs/caedc-idm/. I have some custom code that creates a legend. The app is working on Google Chrome, but not Internet Explorer. The issue appears to be related to some custom code. Even after running the code through https://babeljs.io/repl, I am still getting the following error in IE: "SCRIPT1014: Invalid character; File: init.js, Line: 28, Column: 392".
When I comment out the code, the app loads in IE and Chrome (but without creating the legend).
require(["esri/request"], function(esriRequest) {
// function to get legend info in json format
function requestLegendJson(url) {
// request object
const requestHandle = esriRequest({
url: url,
content: {f: "json"},
handleAs: 'json',
callbackParamName: 'callback'
});
// make request
requestHandle.then(
function(response) {
// https://babeljs.io/repl was used to convert ES6 code at
// https://github.com/pmacMaps/shortlist-storytelling-template-js/blob/master/app/custom-scripts.js
// into IE compatible code
// legend container element
const legendElement = $('#customLegend');
// layers in response
const layers = response.layers;
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = layers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
// default layer name
var layerName = item.layerName;
// loop through legend properties
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = item.legend[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var element = _step2.value;
// open legend list element
var legendContent = "<ul>";
// if the label element is empty, we'll use item.layerName as the name of the legend element
// if it is not, we'll use the label property of the legeng as the name for the legend element
if (element.label === " " || element.label === "") {
legendContent += "<li>" + layerName + "</li>";
} else {
legendContent += "<li>" + element.label + "</li>";
}
// create image element
legendContent += "<li><img height=" + element.height + " width=" + element.width + " src=\"data:" + element.contentType + ";base64," + element.imageData + "\" alt=\"legend icon representing " + layerName + "\" /></li>"; // close list element
legendContent += "</ul>";
// append legend item to legend
legendElement.append(legendContent);
} // end for element of item.legend
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
} // end for item of layers
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}, // end function(response)
function(error) {
console.warn(`Error creating legend element for url ${url}`);
console.warn("Error: ", error.message);
// feel free to update error reporting code
});
} // end requestLegendJson(url)
// Map Service Legend Urls
const municipalityLegendUrl = 'https://gis.ccpa.net/arcgiswebadaptor/rest/services/ArcGIS_Online/MunicipalBoundaries/MapServer/legend';
const landTrailsLegendUrl = 'https://gis.ccpa.net/arcgiswebadaptor/rest/services/ArcGIS_Online/LandTrailsData/MapServer/legend';
const waterTrailsLegendUrl = 'https://gis.ccpa.net/arcgiswebadaptor/rest/services/ArcGIS_Online/WaterTrailsData/MapServer/legend';
const parksLegendUrl = 'https://gis.ccpa.net/arcgiswebadaptor/rest/services/ArcGIS_Online/ParksData/MapServer/legend';
// call functions to get legend JSON and construct legend elements
requestLegendJson(municipalityLegendUrl);
requestLegendJson(landTrailsLegendUrl);
requestLegendJson(waterTrailsLegendUrl);
requestLegendJson(parksLegendUrl);
}); // end require(["esri/request"], function(esriRequest) {})
I'm working on upgrading a v1.4.9 to v2.7.0 app. The development site is https://gis.ccpa.net/labs/caedc-idm/. I have some custom code that creates a legend. The app is working on Google Chrome, but not Internet Explorer. The issue appears to be related to some custom code. Even after running the code through https://babeljs.io/repl, I am still getting the following error in IE: "SCRIPT1014: Invalid character; File: init.js, Line: 28, Column: 392".
When I comment out the code, the app loads in IE and Chrome (but without creating the legend).
The ES6 code is at https://github.com/pmacMaps/shortlist-storytelling-template-js/blob/master/app/custom-scripts.js#L7.
Here is the transpiled code: