Franz Neubert discusses the creation of interactive map applications using Mapbox GL and WebGL, focusing on efficient data visualization through the minimization of data transmission and server load. The document details methods for encoding data as grey values, rendering tiles dynamically, and maximizing flexibility on the client side. It highlights techniques for color mapping and rendering maps while showcasing the use of shaders and various file formats.

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