33e24e9ce9
Also made it so that the map re-renders continously, to be able to use the ["time"] operator.
88 lines
5.3 KiB
HTML
88 lines
5.3 KiB
HTML
---
|
|
layout: example.html
|
|
title: WebGL points layer
|
|
shortdesc: Using a WebGL-optimized layer to render a large quantities of points
|
|
docs: >
|
|
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 reprensentation.
|
|
|
|
The following operators can be used:
|
|
|
|
* Reading operators:
|
|
* `['get', 'attributeName']` fetches a feature attribute (it will be prefixed by `a_` in the shader)
|
|
Note: those will be taken from the attributes provided to the renderer
|
|
* `['var', 'varName']` fetches a value from the style variables, or 0 if undefined
|
|
* `['time']` returns the time in seconds since the creation of the layer
|
|
* `['zoom']` returns the current zoom level
|
|
* `['resolution']` returns the current resolution
|
|
|
|
* Math operators:
|
|
* `['*', value1, value2]` multiplies `value1` by `value2`
|
|
* `['/', value1, value2]` divides `value1` by `value2`
|
|
* `['+', value1, value2]` adds `value1` and `value2`
|
|
* `['-', value1, value2]` subtracts `value2` from `value1`
|
|
* `['clamp', value, low, high]` clamps `value` between `low` and `high`
|
|
* `['%', value1, value2]` returns the result of `value1 % value2` (modulo)
|
|
* `['^', value1, value2]` returns the value of `value1` raised to the `value2` power
|
|
|
|
* Transform operators:
|
|
* `['case', condition1, output1, ...conditionN, outputN, fallback]` selects the first output whose corresponding
|
|
condition evaluates to `true`. If no match is found, returns the `fallback` value.
|
|
All conditions should be `boolean`, output and fallback can be any kind.
|
|
* `['match', input, match1, output1, ...matchN, outputN, fallback]` compares the `input` value against all
|
|
provided `matchX` values, returning the output associated with the first valid match. If no match is found,
|
|
returns the `fallback` value.
|
|
`input` and `matchX` values must all be of the same type, and can be `number` or `string`. `outputX` and
|
|
`fallback` values must be of the same type, and can be of any kind.
|
|
* `['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]` returns a value by interpolating between
|
|
pairs of inputs and outputs; `interpolation` can either be `['linear']` or `['exponential', base]` where `base` is
|
|
the rate of increase from stop A to stop B (i.e. power to which the interpolation ratio is raised); a value
|
|
of 1 is equivalent to `['linear']`.
|
|
`input` and `stopX` values must all be of type `number`. `outputX` values can be `number` or `color` values.
|
|
Note: `input` will be clamped between `stop1` and `stopN`, meaning that all output values will be comprised
|
|
between `output1` and `outputN`.
|
|
|
|
* Logical operators:
|
|
* `['<', value1, value2]` returns `true` if `value1` is strictly lower than `value2`, or `false` otherwise.
|
|
* `['<=', value1, value2]` returns `true` if `value1` is lower than or equals `value2`, or `false` otherwise.
|
|
* `['>', value1, value2]` returns `true` if `value1` is strictly greater than `value2`, or `false` otherwise.
|
|
* `['>=', value1, value2]` returns `true` if `value1` is greater than or equals `value2`, or `false` otherwise.
|
|
* `['==', value1, value2]` returns `true` if `value1` equals `value2`, or `false` otherwise.
|
|
* `['!=', value1, value2]` returns `true` if `value1` does not equal `value2`, or `false` otherwise.
|
|
* `['!', value1]` returns `false` if `value1` is `true` or greater than `0`, or `true` otherwise.
|
|
* `['between', value1, value2, value3]` returns `true` if `value1` is contained between `value2` and `value3`
|
|
(inclusively), or `false` otherwise.
|
|
|
|
* Conversion operators:
|
|
* `['array', value1, ...valueN]` creates a numerical array from `number` values; please note that the amount of
|
|
values can currently only be 2, 3 or 4.
|
|
* `['color', red, green, blue, alpha]` creates a `color` value from `number` values; the `alpha` parameter is
|
|
optional; if not specified, it will be set to 1.
|
|
Note: `red`, `green` and `blue` components must be values between 0 and 255; `alpha` between 0 and 1.
|
|
Values can either be literals or another operator, as they will be evaluated recursively.
|
|
Literal values can be of the following types:
|
|
* `boolean`
|
|
* `number`
|
|
* `string`
|
|
|
|
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>
|
|
<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>
|