Error Failed to execute 'shaderSource' on 'WebGL2RenderingContext'.

Hi. I am developing an application that receives an array of objects, each object has the array of points inside that I am drawing on the map. For example:

var objExample = [ {'nombre': 'elemento 1', 'coordinates' : [[-74.25325512886047, 4.863067980527789], [-74.25267577171326, 4.863484898738268], [-74.25274014472961, 4.863206953293299], [-74.25227880477905, 4.863217643504837], [-74.25172090530396, 4.863292474980886]]}, {'nombre': 'elemento 2', 'coordinates' : [[-74.25164580345154, 4.861453756304337], [-74.25095915794373, 4.861688941531293], [-74.24997210502625, 4.861667561059506], [-74.24995064735413, 4.860887173374973]]}, ];

It is assumed that the system automatically chooses a date which loads the object and has data to draw, user can choose a new date and the system must erase drawn data and draw new data.

The code I am working with is the following:

`$scope.pixiOverlay = undefined; $scope.layers = []; _.map(objExample, function(feature, position){ var firstDraw = true; var prevZoom; var cirlceSprites = []; var pixiContainer = new PIXI.Container(); $scope.pixiOverlay = L.pixiOverlay(function(utils, event) { var zoom = utils.getMap().getZoom(); var container = utils.getContainer(); var renderer = utils.getRenderer(); var project = utils.latLngToLayerPoint; var scale = utils.getScale(); function generateCircleTexture(renderer, radius, color) { var gfx = new PIXI.Graphics(); var tileSize = radius * 3; var texture = PIXI.RenderTexture.create(tileSize, tileSize); gfx.beginFill(color); gfx.drawCircle(tileSize / 2, tileSize / 2, radius); gfx.endFill(); renderer.render(gfx, texture); return texture; } function drawPoint(center) { var projectedCenter = project(center); var circleSprite = new PIXI.Sprite(circleTexture); circleSprite.x = projectedCenter.x; circleSprite.y = projectedCenter.y; circleSprite.anchor.set(0.5); circleSprite.scale.set(1 / scale); container.addChild(circleSprite); cirlceSprites.push(circleSprite); } var circleTexture = generateCircleTexture(renderer, 5, 0xef0a0a); if(firstDraw){ angular.forEach(feature.coordinates, function (point) { drawPoint([point[1], point[0]]); }) }

                        if (firstDraw || prevZoom !== zoom) {
                            angular.forEach(cirlceSprites, function (circle) {
                                circle.scale.set(1 / scale);
                            })
                        }
                        firstDraw = false;
                        prevZoom = zoom;
                        renderer.render(container);
                    }, pixiContainer, {clearBeforeRender: true, preserveDrawingBuffer: true, forceCanvas: true});
                    $scope.layers.push(pixiContainer);
                    $scope.pixiOverlay.addTo($scope.mapTracker2);
                });`

But after changing the date several times and having the system draw and delete the data, I get the following error: angular.js:13920 TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'. at compileShader (compileProgram.js:67) at compileProgram (compileProgram.js:13) at Program.extractData (Program.js:97) at new Program (Program.js:75) at BatchShaderGenerator.generateShader (BatchShaderGenerator.js:66) at BatchPlugin.contextChange (AbstractBatchRenderer.js:270) at Runner.emit (Runner.js:71) at ContextSystem.initFromContext (ContextSystem.js:90) at ContextSystem.initFromOptions (ContextSystem.js:104) at new Renderer (Renderer.js:236)

I use:

Angularjs -> 1.5.8
Leaflet -> 1.3.1
leaflet-pixi-overlay -> ^1.8.1
pixi.js -> 5.1.1

manubb / Leaflet.PixiOverlay

Error Failed to execute 'shaderSource' on 'WebGL2RenderingContext'. #33