---
layout: example.html
title: WebGL points layer
shortdesc: Using a WebGL-optimized layer to render a large quantities of points
docs: >
<p>
This example shows how to use a `WebGLPointsLayer` to show a large amount of points on the map.
The layer is given a style in JSON format which allows a certain level of customization of the final representation.
</p>
<p>
Consult the <a href="/en/latest/apidoc/module-ol_expr_expression.html#~ExpressionValue">documentation on expressions</a> to know which operators to use and how.
</p>
tags: "webgl, point, layer, feature"
experimental: true
---
<div id="map" class="map"></div>
Choose a predefined style from the list below or edit it as JSON manually.
<select id="style-select">
<option value="icons">Icons</option>
<option value="triangles">Triangles, color related to population</option>
<option value="triangles-latitude">Triangles, color related to latitude</option>
<option value="circles">Circles, size related to population</option>
<option value="circles-zoom">Circles, size related to zoom</option>
<option value="rotating-bars">Rotating bars</option>
</select>
<textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
<small>
<span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
<span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
</small>