Mapbox Custom Style Layer Problem
Custom style layers hides then switch visibility on another layer
by Leo
HTML
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
<div id='map'></div>
<button id='updateButton'>
Switch points visibility
</button>
CSS
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#updateButton { position: absolute; top: 10px; left: 10px}
JavaScript
var map = new mapboxgl.Map({
container: 'map',
zoom: 3,
center: [7.5, 58],
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
}
},
layers: [
{
id: "slippymap",
type: "raster",
source: "slippymap"
}
]
}
});
var highlightLayer = {
id: 'highlight',
type: 'custom',
onAdd: function (map, gl) {
var vertexSource = "" +
"uniform mat4 u_matrix;" +
"attribute vec2 a_pos;" +
"void main() {" +
" gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);" +
"}";
var fragmentSource = "" +
"void main() {" +
" gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +
"}";
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);
this.aPos = gl.getAttribLocation(this.program, "a_pos");
},
render: function(gl,...