nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Firefox Issues

Thomas_Z2

I have a simple web map with 3 layers. Two of them use feature reduction. I am using ArcGIS Map SDK for JavaScript 4.27, TypeScript and Angular 16.

Web map works well with Edge and Chrome but hangs in Firefox. Firefox gets unresponsive and two of the layers are not shown (those with feature reduction).

I'll get an error in the Web Developer Console:

The JavaScript file is located here:
https://js.arcgis.com/4.27/@arcgis/core/assets/esri/core/workers/chunks/3ad56b5f273e2d911dbd.js

This error does not occur when using Edge and Chrome.

Vind meer berichten getagd met

Accepted answers

Thomas_Z2

Unfortunately providing a MWE was not possible this time.

However, I found the culprits...

Performance issue did only occur when the Web Developer Console was open.
Symbols are not shown (and the occurrence of the JS error posted in the question) does only happen if I use a PictureMarkerSymbol with a SVG file. This must be a bug as the SVG file works well in Edge and Chrome as we well as in Firefox (when displayed in a feature popup using an img tag).

const RENDERER = new SimpleRenderer({
  symbol: new PictureMarkerSymbol({

    // url: 'assets/map-symbols/gender-neutral.svg',  // not working
    url: 'assets/map-symbols/gender-neutral.png',     // working 

    width: '34px',
    height: '34px',
    xoffset: '-18px',
    yoffset: '-3px',
  })
});

After changing the URL to point to a PNG file instead of a SVG file, I do not have any issues anymore, and neither do I get the JS error.

All comments

Thomas_Z2

Unfortunately providing a MWE was not possible this time.

However, I found the culprits...

Performance issue did only occur when the Web Developer Console was open.
Symbols are not shown (and the occurrence of the JS error posted in the question) does only happen if I use a PictureMarkerSymbol with a SVG file. This must be a bug as the SVG file works well in Edge and Chrome as we well as in Firefox (when displayed in a feature popup using an img tag).

const RENDERER = new SimpleRenderer({
  symbol: new PictureMarkerSymbol({

    // url: 'assets/map-symbols/gender-neutral.svg',  // not working
    url: 'assets/map-symbols/gender-neutral.png',     // working 

    width: '34px',
    height: '34px',
    xoffset: '-18px',
    yoffset: '-3px',
  })
});

After changing the URL to point to a PNG file instead of a SVG file, I do not have any issues anymore, and neither do I get the JS error.

AndyGup

@Thomas_Z2please provide a simple, focused sample application that reproduces the error. We recommend using vanilla JS (e.g. codepen demoing the webmap), stackblitz or github repo.

For example, here is an Angular example that provides a good starting point: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli.

Thomas_Z2

I am also using a custom base map (a Vector Tile Layer) stored on ArcGIS Online.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.