load events

by Leo

HTML

<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css">
<div id='map'></div>

CSS

#map { position:absolute; top:0; bottom:0; width:100%; }
#setFilterBtn { position:absolute; top:0; right:0;}
#clearFilterBtn { position:absolute; top:0; right:100px;}

JavaScript 1.7

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 13,
    center: [-122.447303, 37.753574],
    style: {
    	version: 8,
      sources: {
      	slippymap: {
          type: "raster",
          scheme: "xyz",
          tiles: [
          	"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png", 	
          	"https://b.tile.openstreetmap.org/{z}/{x}/{y}.png", 
          	"https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
          ],
          tileSize: 256
        },
        d25uarhxywzl1j: {
           type: "vector",
           tiles: ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
           tileSize: 512,
           minzoom: 6,
           maxzoom: 14
        }
        
      },
      layers: [
      	{
            id: "slippymap",
            type: "raster",
            source: "slippymap"
        },
        {
           id: "mapillary",
           type: "line",
           source: "d25uarhxywzl1j",
           "source-layer": "mapillary-sequences",
           layout: {
               "line-cap": "round",
               "line-join": "round"
           },
           paint: {
               "line-opacity": 0.6,
               "line-color": "rgb(53, 175, 109)",
               "line-width": 2
           }
        }
      ]
    }
});

map.on("style.load", function(){
  //debugger; 
/*   let s  = map.getSource("d25uarhxywzl1j");
  let l = s.loadTile;
  s.loadTile = function(tile, callback){
     console.log("s-reload-tile", tile);
     l.apply(s, arguments);
  }; */
  
  let sc = map.style.sourceCaches["d25uarhxywzl1j"];
  let scl = sc._loadTile;  
  sc._loadTile = function(tile, callback){
     console.log("sc-reload-tile", tile);
     scl.apply(sc, arguments);
  };

});


map.showTileBoundaries = true;

map.on('sourcedataloading', function(){
   
   console.log("sourcedataloading", "loaded: ", map.loaded(), "tiles loaded: ", map.areTilesLoaded());
});

map.on('sourcedata', function(){
   console.log("sourcedata", "loaded: ", map.loaded(),...