Skip to main content

Esri Known Issues

Esri Components Not Following Light/Dark Themes​

Shapefile Misalignment​

Situation: a received shapefile doesn't align with existing feature layers or is off center from where we expect it to display.

Resolution: Convert the shapefile to CRS 4326 and re-export it before trying to render in an environment such as the JS SDK.

History: We had this issue with the original water mains shapefile and coordinates originating from the EPANET input file (which are inserted to PSQL and then converted to 4326). The original shapefile was in the local 26910 and we initially uploaded it to ArcGIS Online without any modifications. It appeared close to the input file and database-derived network, but was off by a few meters. Converting it to 4326 and then uploading to ArcGIS Online resolved the issue.

index.html fix​

Add this code to the index.html page to properly import light or dark theme:

<head>
  <!-- .................................................................... -->
  <!-- Using Local Font -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/css/main.css">
  <!-- NOTE: It's important for this to have ID so we can switch between light/dark -->
  <link id="esriStyle" rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/dark/main.css">
</head>

Esri Map Components Fix​

Add this code to the EsriMap and/or Esri3DMap component(s) to ensure proper theme switching:

  // Apply theme styles to Esri widgets
  const applyThemeStyles = () => {
    // Create or update the ESRI style link
    let sheet = document.getElementById("esriStyle");
    if (!sheet) {
      sheet = document.createElement("link");
      sheet.id = "esriStyle";
      sheet.rel = "stylesheet";
      document.head.appendChild(sheet);
    }
    sheet.href = ESRI_CSS_THEME_REFS[theme.palette.mode];
    console.log("Applied ESRI theme:", theme.palette.mode);

    // Apply dark mode class to Esri UI widgets
    const widgets = document.getElementsByClassName("esri-ui");
    for (let i = 0; i < widgets.length; i++) {
      if (theme.palette.mode === 'dark') {
        widgets.item(i).classList.add("calcite-mode-dark");
      } else {
        widgets.item(i).classList.remove("calcite-mode-dark");
      }
    }
  };

  // Apply theme styles when theme changes
  useEffect(() => {
    applyThemeStyles();
  }, [theme.palette.mode]);
Last updated on by Viraj