Meteogroup and Ubilabs set out to create a sophisticated map to display a variety of weather parameters. Temperature, precipitation and pressure only represent a subset of those. A key point was to incorporate the inherent dimension of those parameters: Visualizing how they change over time. Based on Mapbox GL JS such a map was born. We faced many challenges including data formats, rendering techniques and general application performance. The talk describes the solutions we came up with to solve these problems. Covering data-driven raster layers and much more. The journey towards those features involved a lot of hard thinking, frustration and wandering in foreign code bases. Join this session to get a taste of the possibilities client side rendering opens up.

1. Make It Rain with Mapbox GL
Franz Neubert

2. Me

3. • Software Engineer
• Javascript, Maps, Data Visualisation
@Scarysize /Scarysize

4. visit hvv.live

6. Ubilabs

7. • Interactive map applications
• Data visualisation
• VR
• Google Maps Partner

10. WebGL

11. • Rasterisation engine
• Drawing points, lines & triangles
• Shaders running on the GPU

12. SETUP STATE DRAW
coordinates, buffers, textures… execute shaders on state

13. Setup
Vertex Shader
Rasterisation
Fragment Shader
Rendering

14. Mapbox GL JS

15. • Interactive Maps with Vector Tiles
• WebGL based
• Comprehensive

16. Source 1
Source 2
Layer 1
Layer 5
Layer 3
Layer 2
Layer 4

17. GeoJSON Source
Circle Layer
Line Layer
Fill Layer

20. Data-driven Raster Tiles

21. • Minimise data transmission
• Minimise server load & cost
• Maximise flexibility on the client

22. • Encode data as grey value
• Transmit “data” PNG tiles
• Colour tiles on the client

23. 0
.
.
.
255
-50°C
.
.
.
50°C
#42D7F4
.
.
.
#F47141
Value Mapping Colour Mapping

24. • Create 256 * 1 look-up texture
• Use grey value as index into the look-up texture
• Can be static or generated dynamically

25. Shader

26. Shader

27. Shader

28. • 3072 * 1536 values
• Gray scale 0 - 100
filesizeinKB
0
2500
5000
7500
10000
GEOTIFF GIF PNG JPEG

34. • Use grey “data” tiles
• Map colour to domain value
• Flexibly colorise tiles on the client 🌈

35. Grid Data

37. • Minimise data transmission
• Minimise server load & cost
• Maximise flexibility on the client

38. filesizeinMB
0
31.25
62.5
93.75
125
0.3
24
125
20
40

39. filesizeinMB
0
31.25
62.5
93.75
125
CSV CSV gzipped JSON JSON gzipped PNG
0.3
24
125
20
40

40. • Encode data as grey value
• Transmit “data” PNG
images
• Sample images based on
current viewport

43. x x x
x x x
x x x

44. x x x
x x x
x x x
[10, -34]
[15, -29]

45. [10, -34]
[15, -29]

48. X Component Y Component

54. • Massively reduce file size using images
• Sample images based on viewport
• Render as GeoJSON

56. Thanks
@Scarysize /ScarysizeFranz Neubert