Wep Map is not loading

Question

ArcGIS webmap is not loading on PowerBi report server. It throws below error on inspect page

la.arcgis.com/crl/2024.1.1/nls/cldr-en-us.json:1
Failed to load resource: the server responded with a status of 404 ()

la.arcgis.com/crl/2024.1.1/nls/common-en-us.json:1
Failed to load resource: the server responded with a status of 404 ()

la.arcgis.com/powerbi/2024_1/nls/app-en-us.json:1
Failed to load resource: the server responded with a status of 404 ()

And after refreshing the page map is loading and popup the error "and errCannot destructure property 'user' of 'e' as it is null."  Could anyone help me to fix the issue?.

Best Regards,

Isakki

banu · Answer

* let filterValues; let view, buildinglayer, layer1, layer2, layer3, layer4, searchWidget, sources, searchContainer, renderer, results, orgListjson, legend, isSingle; let featureLayerView, DivisionIds, GroupIds, DeptIds; const attributeField = "URECD.URFloor2.ORGN_CD"; const [MapView, Map, FeatureLayer, ImageryLayer, GraphicsLayer, Graphic, geometryEngine, Search, Home, Expand, SketchViewModel, geometryEngineAsync, LayerList, AreaMeasurement2D, Legend] = await $arcgis.import([ "@arcgis/core/views/MapView.js", "@arcgis/core/Map.js", "@arcgis/core/layers/FeatureLayer.js", "@arcgis/core/layers/ImageryLayer.js", "@arcgis/core/layers/GraphicsLayer.js", "@arcgis/core/Graphic.js", "@arcgis/core/geometry/geometryEngine.js", "@arcgis/core/widgets/Search.js", "@arcgis/core/widgets/Home.js", "@arcgis/core/widgets/Expand.js", "@arcgis/core/widgets/Sketch/SketchViewModel", "@arcgis/core/geometry/geometryEngineAsync.js", "@arcgis/core/widgets/LayerList.js", "@arcgis/core/widgets/AreaMeasurement2D.js", "@arcgis/core/widgets/Legend.js" ]); import { HRconfigLayersFloor2, HRconfigLayersFloor1 } from '/js/renderer.js'; export async function renderMap(FloorNumber, orgList) { const mapImage = document.getElementById("map-image"); const loader = document.getElementById("loader"); if (mapImage) { mapImage.style.display = "block"; } if (loader) { loader.style.display = "flex"; } const map = new Map({ //basemap: "satellite" }); view = new MapView({ container: "view-div", map: map, center: [50.121830, 26.313973], zoom: 21, ui: { components: ["attribution"], }, spatialReferenceLocked: true, popup: { dockOptions: { // Dock the popup to the top of the map buttonEnabled: false }, visibleElements: { closeButton: false, collapseButton: false, heading: false, actionBar: false } } // longitude, latitude, }); view.on("mouse-wheel", (event) => { event.stopPropagation(); }); view.on("double-click", ["Control"], (event) => { event.stopPropagation(); }); view.on("double-click", (event) => { event.stopPropagation(); }); view.on("key-down", (event) => { const prohibitedKeys = ["+", "-", "Shift", "_", "="]; const keyPressed = event.key; if (prohibitedKeys.indexOf(keyPressed) !== -1) { event.stopPropagation(); } }); view.on("drag", (event) => { event.stopPropagation(); }); const template = { title: "{LOCATION}", content: [ { type: "text", /*text: "

{ URECD.URFloor2.FULL_NAME }

{ URECD.URFloor2.ORGN_NAME }

"*/ text: "

{URECD.URFloor2.FULL_NAME}{URECD.URFloor2.ORGN_NAME}

" } ] }; const configLayers = getHRconfigLayers(FloorNumber); buildinglayer = new FeatureLayer({ url: configLayers.find((layer) => layer.id === "buildinglayer").url, outFields: ['*'] }); layer1 = new FeatureLayer({ url: configLayers.find((layer) => layer.id === "layer1").url, outFields: ["*"] }); layer2 = new FeatureLayer({ url: configLayers.find((layer) => layer.id === "layer2").url, outFields: ["*"] }); layer3 = new FeatureLayer({ url: configLayers.find((layer) => layer.id === "layer3").url }); // Create unique value infos map.add(buildinglayer, 0); map.add(layer1, 1); map.add(layer2, 2); map.add(layer3, 3); // map.add(layer4, 4); let activelayer = buildinglayer; view.when(() => { rendervalue(orgList); searchContainer = document.getElementById("search"); // console.log(searchContainer); // Check if the element is being found var searchFieldsString = ["URECD.URFloor2.FULL_NAME"]; if (searchContainer) { sources = [ { layer: buildinglayer, searchFields: ["URECD.URFloor2.FULL_NAME"], // Fields to search within displayField: "URECD.URFloor2.FULL_NAME", // Field to display in suggestions exactMatch: false, outFields: ["*"], name: "Employee Location Search", placeholder: "Search by Name", getSuggestions: function (params) { const suggestTerm = params.suggestTerm.toLowerCase(); const query = { where: `LOWER(URECD.URFloor2.FULL_NAME) LIKE '%${suggestTerm}%'`, outFields: "URECD.URFloor2.FULL_NAME", returnGeometry: true, f: "json" }; return buildinglayer.queryFeatures(query).then(function (response) { return response.features.map(function (feature) { return { text: feature.attributes["URECD.URFloor2.FULL_NAME"], key: feature.attributes["URECD.URFloor2.FULL_NAME"], sourceIndex: params.sourceIndex }; }); }); }, getResults: function (params) { const query = { where: `URECD.URFloor2.FULL_NAME = '${params.suggestResult.text}'`, outFields: ["*"], returnGeometry: true, f: "json" }; return buildinglayer.queryFeatures(query).then(function (response) { const features = response.features; if (features.length > 0) { view.popup.open({ features: features, location: features[0].geometry.centroid }); } return features; }); }, suggestionsEnabled: true, // Enable suggestions // Display both fields in suggestions minCharacters: 3, // Minimum characters required to trigger suggestions maxResults: 5, // Maximum number of suggestions to display searchDelay: 500 } ]; searchWidget = new Search({ view: view, sources: sources, container: "search", locationEnabled: false, includeDefaultSources: false, zoomScale: null, goToOverride: (view, goToOverrideParameters) => { // view.goTo({ target: goToOverrideParameters.target, zoom: 15 }); } });//default search widget // console.log(searchWidget); // Check if the search widget is being created } else { console.error("Search container element not found"); // Log an error if the element is not found } view.on("click", (event) => { view.hitTest(event).then((response) => { const results = response.results.filter((r) => r.graphic.layer === activelayer); if (results.length > 0) { const graphic = results[0].graphic; if (graphic.attributes["URECD.Floor2BuilPlan_1.NETWORKID"] !== null && graphic.attributes["URECD.URFloor2.FULL_NAME"] !== null) { buildinglayer.popupTemplate = template; view.popup.open({ features: [graphic], location: event.mapPoint }); sendDataToDotNet(graphic.attributes); } else { view.popupEnabled = false; hidePopup(); } //sendDataToDotNet(graphic.attributes); } else { view.closePopup() return; } }); }); //buildinglayer.popupTemplate = template; view.on("pointer-move", async (event) => { if (searchWidget.searchTerm) { return; } const screenPoint = { x: event.x, y: event.y }; const hitTestResult = await view.hitTest(screenPoint, { include: [buildinglayer] }); const feature = hitTestResult.results.find(result => { return result.graphic && result.graphic.layer === buildinglayer; }); buildinglayer.popupTemplate = template; if (feature) { if (feature && feature.graphic.attributes["URECD.URFloor2.FULL_NAME"] !== null && feature.graphic.attributes["URECD.URFloor2.FULL_NAME"] !== "") { view.popup.open({ features: [feature.graphic], location: event.mapPoint, featureMenuOpen: false // Optional: prevent context menu from opening }); } } else { view.closePopup() } }); }); await view.watch("updating", (updating) => { if (!updating) { // This function will execute once the map stops updating (is fully loaded/rendered) console.log("Map is fully loaded and stationary."); mapImage.style.display = "none"; loader.style.display = "none"; const viewDiv = document.getElementById("view-div"); if (viewDiv) { viewDiv.style.opacity = 1; } else { console.error("view-div element was not found."); // You can also add additional error handling or fallback behavior here } } }); } export async function filterMapfeatures(FloorNumber, divisionIds, groupIds, deptIds, FilteredorgList) { rendervalue(FilteredorgList); const orgList = JSON.parse(FilteredorgList); DivisionIds = `'${divisionIds.join("','")}'`; GroupIds = `'${groupIds.join("','")}'`; DeptIds = deptIds; const combinedIds = divisionIds.concat(groupIds); const combineddeptIds = combinedIds.concat(DeptIds); const combinedIdsString = `'${combineddeptIds.join("','")}'`; if (DivisionIds != "" && DivisionIds.length > 0 && GroupIds != "" && GroupIds.length > 0) { const query = { where: "URECD.URFloor2.ORGN_CD NOT IN (" + combinedIdsString + ")", returnGeometry: true, outFields: ["*"] }; const results = await buildinglayer.queryFeatures(query); addGraphicsdata(results); } } export async function CancelfilterMapfeatures(FloorNumber, divisionIds, groupIds, deptIds, FilteredorgList) { rendervalue(FilteredorgList); view.graphics.removeAll(); } function addGraphicsdata(results) { view.graphics.removeAll(); if (results.features.length > 0) { let symbol; switch (results.features[0].geometry.type) { case "point": symbol = { type: "simple-marker", color: "#17CBE8", size: 10, }; break; case "polygon": symbol = { type: "simple-fill", color: "#CFD8E6", opacity: 0.7, outline: { color: [0, 255, 0, 1], width: "0px" } }; } var graphics = results.features.map((feature) => { let graphic = new Graphic(); graphic.geometry = feature.geometry; graphic.symbol = symbol; return graphic; }); view.graphics.addMany(graphics); // view.goTo(graphics); } else { // Clear the graphics in the layer if the query is empty view.graphics.removeAll(); } } async function highlightOtherFeatures(results) { const allFeaturesQuery = { where: "1=1", // retrieve all features returnGeometry: true, outFields: ["*"] }; let fieldname = "URECD.URFloor2.NETWORK_ID"; const allFeatures = await buildinglayer.queryFeatures(allFeaturesQuery); //const resultFeatureIds = results.features.map(feature => feature.attributes.fieldname); //const otherFeatures = allFeatures.features.filter(feature => !resultFeatureIds.includes(feature.attributes.fieldname)); const resultFeatureIds = results.features.map(feature => feature.attributes?.['URECD.URFloor2.NETWORK_ID']); const otherFeatures = allFeatures.features.filter(feature => !resultFeatureIds.includes(feature.attributes?.['URECD.URFloor2.NETWORK_ID'])); if (otherFeatures.length > 0) { let symbol; switch (otherFeatures[0].geometry.type) { case "point": symbol = { type: "simple-marker", size: 10, opacity: 0.2 // adjust the opacity }; break; case "polygon": symbol = { //type: "simple-fill", //excludedEffect: "opacity(50%)", ///*opacity: 0.90 */// adjust the opacity //outline: { // color: [128, 128, 128, 0.5], // width: "0px" //} }; } var otherGraphics = otherFeatures.map((feature) => { let graphic = new Graphic(); graphic.geometry = feature.geometry; graphic.symbol = symbol; return graphic; }); view.graphics.addMany(otherGraphics); } } export async function unselectMapFeatures(FloorNumber) { view.graphics.removeAll(); // filterMapfeatures(FloorNumber, divisionIds, groupIds, FilteredorgList); } function getHRconfigLayers(FloorNumber) { return FloorNumber === "2" ? HRconfigLayersFloor2 : HRconfigLayersFloor1; } function generateColor(value) { // Assuming the color field contains hex color values (e.g., #FF0000) return value; } function customLegend(orgList) { view.when(() => { buildinglayer.when(() => { // console.log(buildinglayer); var divCustomLegend = document.getElementById("divCustomLegend"); // Check if legend already exists if (divCustomLegend) { // Remove existing legend divCustomLegend.remove(); } // Create new legend divCustomLegend = document.createElement("div"); divCustomLegend.id = "divCustomLegend"; divCustomLegend.style.height = "856px"; // Set a fixed height divCustomLegend.style.overflowY = "auto"; const label = document.createElement("label"); label.textContent = "Legend"; label.style.fontFamily = "Roboto"; label.style.fontWeight = "bold"; label.style.color = "#384A66"; label.style.fontSize = "14px"; label.style.fontWeight = "500"; label.style.marginLeft = "500"; label.style.margin = "16px 24px" divCustomLegend.appendChild(label); const ul = document.createElement("ul"); ul.style.listStyleType = 'none'; ul.className = 'officeSpace'; // Check if orgList is not empty if (orgList && orgList.length > 0) { if (orgList.length === 1) { addDepartmentToLegend(orgList[0], ul); } else { orgList.forEach(department => { if (department.Ischecked) { addDepartmentToLegend(department, ul); } }); } } else { // Handle case where orgList is empty const li = document.createElement("li"); const label2 = document.createElement("label"); label2.textContent = "No Legends available"; label2.style.margin = "10px"; li.appendChild(label2); ul.appendChild(li); } divCustomLegend.appendChild(ul); setTimeout(() => { if (legend) { view.ui.remove(legend); } legend = new Expand({ view: view, content: divCustomLegend, expandTooltip: "Legend", expandIcon: "information", collapseIcon: "information-f", group: "bottom-left" }); view.ui.add(legend, "top-right"); }); }); }); } function addDepartmentToLegend(department, ul) { if (department.Ischecked) { const li = document.createElement("li"); li.style.display = "flex"; li.style.alignItems = "center"; const outline = document.createElement("div"); outline.style.width = "10px"; outline.style.height = "10px"; outline.style.border = "3px solid " + department.ColorCode; outline.style.marginLeft = "-3px"; li.appendChild(outline); const label = document.createElement("label"); label.textContent = department.Name; label.style.marginLeft = "7px"; li.appendChild(label); ul.appendChild(li); // Add groups if (department.Groups) { department.Groups.forEach(group => { if (group.Ischecked) { addGroupToLegend(group, ul); } }); } // Add divisions if (department.Divisions) { department.Divisions.forEach(division => { if (division.Ischecked) { addDivisionToLegend(division, ul); } }); } } } function addDivisionToLegend(division, ul) { const li = document.createElement("li"); const canvas = document.createElement("canvas"); canvas.width = 10; canvas.height = 10; canvas.style.backgroundColor = division.ColorCode; li.appendChild(canvas); const label = document.createElement("label"); label.textContent = division.Name; label.style.margin = "10px"; li.appendChild(label); ul.appendChild(li); if (division.GroupDetail) { division.GroupDetail.forEach(group => { if (group.Ischecked) { addGroupToLegend(group, ul); } }); } } function addGroupToLegend(group, ul) { const li = document.createElement("li"); const canvas = document.createElement("canvas"); canvas.width = 10; canvas.height = 10; canvas.style.backgroundColor = group.ColorCode; canvas.style.borderRadius = "50%"; li.appendChild(canvas); const label = document.createElement("label"); label.textContent = group.Name; label.style.margin = "10px"; li.appendChild(label); ul.appendChild(li); } //render unique value colors async function rendervalue(orgList) { try { const query = { where: "1=1", outFields: ["*"], returnGeometry: true }; results = await buildinglayer.queryFeatures(query); const uniqueValues = results.features.map((feature) => feature.attributes?.['URECD.URFloor2.COLOR_CODE']); const uniqueValueSet = new Set(uniqueValues); // console.log(uniqueValues); renderer = { type: "unique-value", field: "URECD.URFloor2.COLOR_CODE", defaultSymbol: { type: "simple-fill", color: "#CFD8E6", outline: { width: 0 } }, defaultLabel: "Unknown", uniqueValueInfos: [] }; uniqueValueSet.forEach((value) => { const symbol = { type: "simple-fill", color: generateColor(value), outline: { width: 0 } }; orgListjson = JSON.parse(orgList); //const correspondingLabel = results.features.find((feature) => feature.attributes?.['URECD.URFloor2.COLOR_CODE'] === value).attributes?.['URECD.URFloor2.ORGN_NAME']; const correspondingLabel = results.features.find((feature) => feature.attributes?.['URECD.URFloor2.COLOR_CODE'] === value).attributes?.['URECD.URFloor2.ORGN_NAME']; const parentOrg = results.features.find((feature) => feature.attributes?.['URECD.URFloor2.COLOR_CODE'] === value).attributes?.['URECD.URFloor2.PARENT_ORG']; renderer.uniqueValueInfos.push({ value: value, symbol: symbol, label: `${correspondingLabel}`, parentOrg: parentOrg }); }); renderer.orderByClassesEnabled = true; buildinglayer.renderer = renderer; customLegend(orgListjson); } catch (error) { console.error('Error querying features:', error); } } function sendDataToDotNet(data) { let city, Floornumber = ''; try { city = data['URECD.URFloor2.EMPLOYEE_A'].split('')[3]; } catch (e) { } if (data['URECD.URFloor2.FLOOR_NUMB'] == null) { Floornumber = data['URECD.URFloor2.FLOOR_NUMB'] } else { Floornumber = "" + data['URECD.URFloor2.FLOOR_NUMB'] } let employeeDetail = { Picture: data['URECD.Floor2BuilPlan_1.PICTURE'], NetworkID: data['URECD.Floor2BuilPlan_1.NETWORKID'], Name: data['URECD.URFloor2.FULL_NAME'], Designation: toTitleCase(data['URECD.URFloor2.JOB_TITLE']), Department: data['URECD.URFloor2.DEPARTMENT_NAME'], DepartmentShortName: data['URECD.URFloor2.DEPARTMENT_SHORT_NAME'], Unit: data['URECD.URFloor2.ORGN_NAME'], unitShortName: data['URECD.URFloor2.ORGN_SHRT_NAME'], City: city, Building: data['URECD.URFloor2.BUIDLING'], Floor: Floornumber, Office: data['URECD.Floor2BuilPlan_1.LOCATION'], } let json = JSON.stringify(employeeDetail); DotNet.invokeMethodAsync('URInsight2.Web.Client', 'SendArrayListToCSharp', json) .then(data => { console.log(data); }); } function toTitleCase(value) { let values = value.split(' '); let returnValue = ""; values.forEach(function (data, index) { returnValue += capitalizeFirstLetter(data.toLowerCase()) + ' '; }); return returnValue; } function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); }

luckachi · Answer

I am having a similar issue...causing all but one ArcGIS map to not meet requirements even though they all got green checks for validation.

la.arcgis.com/powerbi/2024_2/nls/app-en-us.json:1
Failed to load resource: the server responded with a status of 404 ()

la.arcgis.com/crl/2025.1.2/nls/common-en-us.json:1
Failed to load resource: the server responded with a status of 404 ()

la.arcgis.com/crl/2025.1.2/nls/cldr-en-us.json:1
Failed to load resource: the server responded with a status of 404 ()

rber · Answer

Me and some colleagues are having the same issue.  Did you solve the problem?