---
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: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
    value: Your Mapbox access token from https://mapbox.com/ here
---
<div id="map" class="map"></div>
<div>Current sighting: <span id="info"></span></div>
<div>
  Filter by UFO shape:
  <select id="shape-filter"></select>
</div>