948003ff27
The demonstrated features have been recreated using a literal style (filtering, pulse animation).
27 lines
1.3 KiB
HTML
27 lines
1.3 KiB
HTML
---
|
|
layout: example.html
|
|
title: Filtering features with WebGL
|
|
shortdesc: Using WebGL to filter large quantities of features
|
|
docs: >
|
|
This example shows how to use `ol/layer/WebGLPoints` with a literal style to dynamically filter a large amount
|
|
of point geometries. The above map is based on a dataset from the NASA containing 45k recorded meteorite
|
|
landing sites. Each meteorite is marked by a circle on the map (the bigger the circle, the heavier
|
|
the object). A pulse effect has been added, which is slightly offset by the year of the impact.
|
|
|
|
Adjusting the sliders causes the objects outside of the date range to be filtered out of the map. This is done
|
|
by mutating the variables in the `style` object provided to the WebGL layer. Also note that the last snippet
|
|
of code is necessary to make sure the map refreshes itself every frame.
|
|
|
|
tags: "webgl, icon, sprite, filter, feature"
|
|
experimental: true
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<form>
|
|
<div id="status">Show impacts between <span class="min-year"></span> and <span class="max-year"></span></div>
|
|
|
|
<label>Minimum year:</label>
|
|
<input id="min-year" type="range" min="1850" max="2015" step="1" value="1850"/>
|
|
<label>Maximum year:</label>
|
|
<input id="max-year" type="range" min="1850" max="2015" step="1" value="2015"/>
|
|
</form>
|