---
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 <code>WebGLPointsLayer</code> to show a large amount of points on the map.</p>
  <p>The layer is given a style in JSON format which allows a certain level of customization of the final reprensentation.</p>
  <p>
    The following operators can be used for numerical values:
    <ul>
      <li><code>["get", "attributeName"]</code> fetches a numeric attribute value for each feature</li>
      <li><code>["+", value, value]</code> adds two values (which an either be numeric, or the result of another operator)</li>
      <li><code>["*", value, value]</code> multiplies two values</li>
      <li><code>["clamp", value, min, max]</code> outputs a value between <code>min</code> and <code>max</code></li>
      <li><code>["stretch", value, low1, high1, low2, high2]</code> outputs a value which has been mapped from the
        <code>low1..high1</code> range to the <code>low2..high2</code> range</li>
    </ul>
  </p>

tags: "webgl, point, layer, feature"
experimental: true
---

<div id="map" class="map"></div>
<label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
<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>
</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>
  &nbsp;
</small>