Wep Mapが読み込まれていません

Question

PowerBiレポートサーバーでArcGIS webmapが読み込まれません。検査ページで以下のエラーが表示されます。<\/STRONG><\/P>la.arcgis.com\/crl\/2024.1.1\/nls\/cldr-en-us.json:1 リソースの読み込みに失敗しました：サーバーは404ステータスで応答しました ()<\/P> la.arcgis.com\/crl\/2024.1.1\/nls\/common-en-us.json:1 リソースの読み込みに失敗しました：サーバーは404ステータスで応答しました ()<\/P> la.arcgis.com\/powerbi\/2024_1\/nls\/app-en-us.json:1 リソースの読み込みに失敗しました：サーバーは404ステータスで応答しました ()<\/P> <\/P>ページを更新するとマップは読み込まれ、エラー「and errCannot destructure property 'user' of 'e' as it is null.」がポップアップします。どなたかこの問題の解決を手伝っていただけますか？.<\/P> <\/P>よろしくお願いいたします。<\/P>Isakki<\/P>

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?