27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
---
|
|
layout: example.html
|
|
title: Icon Sprites with WebGL
|
|
shortdesc: Rendering many icons with WebGL
|
|
docs: >
|
|
This example shows how to use `ol/layer/WebGLPoints` to render
|
|
a very large amount of sprites. The above map is based on a dataset from the National UFO Reporting Center: each
|
|
icon marks a UFO sighting according to its reported shape (disk, light, fireball...). The older the sighting, the redder
|
|
the icon.
|
|
|
|
A very simple sprite atlas is used in the form of a PNG file containing all icons on a grid. Then, the `style` object
|
|
given to the `ol/layer/WebGLPoints` constructor is used to specify which sprite to use according to the sighting shape.
|
|
|
|
The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
|
|
tags: "webgl, icon, sprite, point, ufo"
|
|
experimental: true
|
|
cloak:
|
|
- key: get_your_own_D6rA4zTHduk6KOKTXzGB
|
|
value: Get your own API key at https://www.maptiler.com/cloud/
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<div>Current sighting: <span id="info"></span></div>
|
|
<div>
|
|
<label for="shape-filter">Filter by UFO shape:</label>
|
|
<select id="shape-filter"></select>
|
|
</div>
|