check tile color during zoom

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">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<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",
            layout: {
               visibility: "none"
            }
        },
        //*/
        {
           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.scrollZoom.disable();

map.on("wheel", _.debounce((event) => {
            var wheelDelta = event.originalEvent.wheelDelta;
            let zoomDelta = Math.sign(wheelDelta);
            if(!zoomDelta)
            {
                return;
            }
            map.setZoom(map.getZoom() + zoomDelta)
        }, 100));


map.on('render', ()=>{
    console.log("render");
})