tangram: [.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

I’ve got this error

[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0 WebGL: too many errors, no more errors will be reported to the console for this context.

and a lot of partialy rendered tile in my maps.

map

To get this error I just put the cinnabar-style ìdemo inside an ionic 2 app using Chrome 49.

The plain cinnabar demo works fine

This is the typescript source code of the page with the map

/// <reference path="../../../typings/leaflet/leaflet.d.ts" />

import {Page} from 'ionic-angular';

declare let L: any;
declare let Tangram: any;

@Page({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {

  constructor() {}

  onPageLoaded() {
    // workaround map is not correctly displayed
    // maybe this should be done in some other event
    setTimeout(this.loadMap.bind(this), 100);

  }

  loadMap() {

      let map = L.map('map');
      var layer = Tangram.leafletLayer({
        scene: 'scene.yaml',
        attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | &copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>'
      });
      layer.addTo(map);
      map.setView([40.70531887544228, -74.00976419448853], 15);  var layer = Tangram.leafletLayer({ scene: 'scene.yaml' });
      layer.addTo(map);
  }

}

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 24 (16 by maintainers)

Most upvoted comments

@matsprea I do not know if the fix discussed above will resolve your original issue, but it is worth a try. I was re-reading your original and I noticed something I hadn’t before, these lines:

      layer.addTo(map);
      map.setView([40.70531887544228, -74.00976419448853], 15);  var layer = Tangram.leafletLayer({ scene: 'scene.yaml' });
      layer.addTo(map);

This implies the Tangram layer is being added multiple times to the same Leaflet map. It’s possible that this is related and is causing your issue, as Tangram doesn’t support multiple map instances at the same time, and it’s possible that Leaflet is not checking for multiple adds of the same layer and something is going awry. Anyway that’s speculative, but if you are still interested in using Tangram I suggest you 1) try without the duplicate layer.addTo(map) call, and then 2) try with the upcoming fix for layer remove/re-add pattern (I will post here when it is released).

Thanks to all for your bug reports!

bcamper on Jun 16, 2016