dc28590cff
When this option was selected the text field contained 'undefined' as it is not one of the predefined styles.
38 lines
1.8 KiB
HTML
38 lines
1.8 KiB
HTML
---
|
|
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="circles">Circles, size related to population</option>
|
|
</select>
|
|
<textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
|
|
<small id="style-valid" style="display: none; color: forestgreen">
|
|
✓ style is valid
|
|
</small>
|
|
<small id="style-invalid" style="display: none; color: grey">
|
|
✗ style not yet valid...
|
|
</small>
|