Feature Layer point clustering webgl error: INVALID_ENUM: texImage2D: invalid type

737
5
01-11-2021 02:33 PM
AmarG1
by
New Contributor II

Hi,

I'm trying to do point clustering as in the sample.

I get the following errors in the console: 

WebGL: INVALID_ENUM: texImage2D: invalid type

WebGL: INVALID_ENUM: texSubImage2D: invalid type

[.WebGL-000002347B9A8180]RENDER WARNING: texture bound to texture unit 3 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

This is what I set for FeatureLayer featureReduction (unique value renderer):

{
type: "cluster",
clusterRadius: 100,
clusterMinSize: "20px",
clusterMaxSize: "50px",
popupTemplate: {
content: "This cluster represents {cluster_count} features.",
fieldInfos: [
{
fieldName: "cluster_count",
format: {
places: 0,
digitSeparator: true
}
}
]
},
labelingInfo: [{
deconflictionStrategy: "none",
labelExpressionInfo: { expression: "Text($feature.cluster_count, '#,####')" },
symbol: {
type: "text",
color: "#004a5d",
font: {
weight: "bold",
family: "Noto Sans",
size: "12px"
}
},
labelPlacement: "center-center"
}]
}

Does anyone know why?

Thanks!

0 Kudos
5 Replies
Noah-Sager
Esri Regular Contributor

Hmm, can you post a link to an app that reproduces this issue on something like Codepen? It might be browser or hardware related. Make sure you are using a modern browser like Chrome, that the app is hosted and not run from file, and that you are testing on a Desktop or Laptop device, or a modern mobile device. More information about requirements here: https://developers.arcgis.com/javascript/latest/guide/system-requirements/

0 Kudos
AmarG1
by
New Contributor II

Hi Noah,

I was able to reproduce the issue by using angular-esri-webpack sample. This is only happening in production(ng build --prod), not development. 

I made the following changes to the sample:

1. remove "devtool" option for production from extra-webpack-config.js

const ArcGISPlugin = require('@arcgis/webpack-plugin');
module.exports = {
      plugins: [new ArcGISPlugin()],
      node: {
      process: false,
      global: false,
     fs: "empty"
}
//,devtool: 'eval'
}

2. Replaced the code in esri-map.component.ts initializeMap() method with this:

  async initializeMap() {

    const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.15/";
    const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;

    esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL;
    esriConfig.workers.loaderConfig = {
      baseUrl: `${DEFAULT_WORKER_URL}dojo`,
      packages: [
        { name: "esri"location: `${DEFAULT_WORKER_URL}esri` },
        { name: "dojo"location: `${DEFAULT_WORKER_URL}dojo` },
        { name: "dojox"location: `${DEFAULT_WORKER_URL}dojox` },
        { name: "dstore"location: `${DEFAULT_WORKER_URL}dstore` },
        { name: "moment"location: `${DEFAULT_WORKER_URL}moment` },
        { name: "@dojo"location: `${DEFAULT_WORKER_URL}@dojo` },
        {
          name: "cldrjs",
          location: `${DEFAULT_WORKER_URL}cldrjs`,
          main: "dist/cldr"
        },
        {
          name: "globalize",
          location: `${DEFAULT_WORKER_URL}globalize`,
          main: "dist/globalize"
        },
        {
          name: "maquette",
          location: `${DEFAULT_WORKER_URL}maquette`,
          main: "dist/maquette.umd"
        },
        {
          name: "maquette-css-transitions",
          location: `${DEFAULT_WORKER_URL}maquette-css-transitions`,
          main: "dist/maquette-css-transitions.umd"
        },
        {
          name: "maquette-jsx",
          location: `${DEFAULT_WORKER_URL}maquette-jsx`,
          main: "dist/maquette-jsx.umd"
        },
        { name: "tslib"location: `${DEFAULT_WORKER_URL}tslib`main: "tslib" }
      ]
    };    

    // Configure the Map
    const mapProperties = {
      basemap: this._basemap
    };

    const map = new Map(mapProperties);

    const citiesRenderer = {
      type: "simple"// autocasts as new SimpleRenderer()
      symbol: {
        type: "simple-marker"// autocasts as new SimpleMarkerSymbol()
        size: 5,
        color: [02442551]
      }
    };
    const featureReductionany = {
      type: "cluster",
      clusterRadius: "100px",
      popupTemplate: {
        // cluster_count is an aggregate field indicating the number
        // of features summarized by the cluster
        content: "This cluster represents {cluster_count} earthquakes."
      },
      // You should adjust the clusterMinSize to properly fit labels
      clusterMinSize: "24px",
      clusterMaxSize: "60px",
      labelingInfo: [{
        // turn off deconfliction to ensure all clusters are labeled
        deconflictionStrategy: "none",
        labelExpressionInfo: {
          expression: "check: Text($feature.cluster_count, '#,###')"
        },
        symbol: {
          type: "text",
          color: "#004a5d",
          font: {
            weight: "bold",
            family: "Noto Sans",
            size: "12px"
          }
        },
        labelPlacement: "center-center",
      }]
    }
    const citiesLayer = new FeatureLayer({
      renderer: citiesRenderer as any,
      definitionExpression: "adm = 'United States of America'",
      featureReduction: featureReduction
    });
    map.add(citiesLayer);

    // Initialize the MapView
    const mapViewProperties = {
      container: this.mapViewEl.nativeElement,
      center: this._center,
      zoom: this._zoom,
      map: map
    };

    this._view = new MapView(mapViewProperties);

    // wait for the map to load
    await this._view.when();
    return this._view;
  }
 
After these changes, the sample works fine in development (ng serve --open). Webgl errors show up after building (ng build --prod) and then opening the sample in Chrome/Edge browser after hosting the app in IIS.
 
Thanks
0 Kudos
Noah-Sager
Esri Regular Contributor

Hmmm. I would recommend trying a more recent version of the ArcGIS API for JavaScript (you're currently using 4.15, and 4.18 is the latest version). Or posting an issue in that repo for specific help with Angular and webpack.

0 Kudos
samuelgirardin
New Contributor II

Hello ,

We are facing the same problem with angular (using esri 4.18 with npm module) . All work fine  in development mode, but when  serving or building the app in production mode with --prod flag. We have exactly the same problem @AmarG1 decribed above. @AmarG1 or @Noah-Sager is there a working solution to get clustering working ? Thx. sam

 

0 Kudos
AndyGup
Esri Regular Contributor

@Sam try testing with our "next' version. Are you using arcgis-js-api (AMD) or @arcgis/core (ES modules)?  They are both available on NPM. If you are using @argis/core then run this command then test again:

npm i @arcgis/core@next

That will install the preview for version 4.19 which will be coming out in the next week or two. We fixed a couple bugs that may be causing your issue.

0 Kudos