Vector tiles support in openlayers, test & metrics

Provide different examples to compare vector tiles rendering performance.

Install

npm install
cd node_modules/mapbox-to-ol-style/ && npm install

Run

npm start

Open

localhost:3000/simple.html

Deploy

Standard

npm run deploy

https://camptocamp.github.io/ol-vt-tests/ol-sbm-osm.html

In a folder (custom version of third-party library)

npm run deploy -- --dest fgravin

https://camptocamp.github.io/ol-vt-tests/fgravin/ol-sbm-osm.html

Examples

Mapbox GL JS integration examples

Showing a mapbox streets-v9 base layer with Mapbox GL JS and the ch.are.bauzonen layer with Openlayers.

Mapbox GL JS + Openlayers

Mapbox GL JS is handling pointer events.

Openlayers + Mapbox GL JS

Openlayers is handling pointer events.

Mapbox GL JS standalone

Mapbox GL JS can also display raster layers. This example serves as a benchmark of how well the two map layers should be connected in the OpenLayers integration examples, i.e. ideally there is no noticeable difference.

Mixed renderer examples

Showing a map where each layer has its own canvas.

WebGL map + canvas layer

WebGL map renderer with OSM layer rendered in it + canvas layer in its own canvas.

Mixed map + canvas layers

Mixed map renderer that declare no canvas + 2 canvas layers with their own canvas.

WebGL experimental Vector Tiles renderer

The following examples use an experimental Vector Tiles WebGL renderer. The tile loading logic is very basic, hence why the map is blank sometimes.

Basic example with swiss base map

Swisstopo example map given to an experimental WebGL Vector Tiles renderer. Note: triangulation is done using earcut instead of the custom-made algorithm of OpenLayers.

MapBox font rendering demo

This example uses a basic MapBox style spec and implements text rendering using SDF glyph atlas with tiny-sdf