Add a custom style layer | UNL Map JS Docs

Use a custom style layer to render custom WebGL content.
Note
If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a custom style layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = (window.map = new UnlSdk.Map({
container: "map",
zoom: 3,
center: [7.5, 58],
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
}));
 
// create a custom style layer to implement the WebGL content
var highlightLayer = {
id: "highlight",
type: "custom",
 
// method called when the layer is added to the map
// https://u-n-l.github.io/unl-map-js-docs/api/properties/#styleimageinterface#onadd
onAdd: function (map, gl) {
// create GLSL source for vertex shader
var vertexSource =
"" +
"uniform mat4 u_matrix;" +
"attribute vec2 a_pos;" +
"void main() {" +
"    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);" +
"}";
 
// create GLSL source for fragment shader
var fragmentSource =
"" +
"void main() {" +
"    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +
"}";
 
// create a vertex shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
 
// create a fragment shader
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
 
// link the two shaders into a WebGL program
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");
 
// define vertices of the triangle to be rendered in the custom style layer
var helsinki = UnlSdk.MercatorCoordinate.fromLngLat({
lng: 25.004,
lat: 60.239,
});
var berlin = UnlSdk.MercatorCoordinate.fromLngLat({
lng: 13.403,
lat: 52.562,
});
var kyiv = UnlSdk.MercatorCoordinate.fromLngLat({
lng: 30.498,
lat: 50.541,
});
 
// create and initialize a WebGLBuffer to store vertex and color data
this.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
helsinki.x,
helsinki.y,
berlin.x,
berlin.y,
kyiv.x,
kyiv.y,
]),
gl.STATIC_DRAW
);
},
 
// method fired on each animation frame
// https://u-n-l.github.io/unl-map-js-docs/api/map/#map.event:render
render: function (gl, matrix) {
gl.useProgram(this.program);
gl.uniformMatrix4fv(
gl.getUniformLocation(this.program, "u_matrix"),
false,
matrix
);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.enableVertexAttribArray(this.aPos);
gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
},
};
 
// add the custom style layer to the map
map.on("load", function () {
map.addLayer(highlightLayer, "building_level15");
});
</script>
 
</body>
</html>