Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make It Rain with Mapbox GL - Franz Neubert

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.

  • Be the first to comment

  • Be the first to like this

Make It Rain with Mapbox GL - Franz Neubert

  1. 1. Make It Rain with Mapbox GL Franz Neubert
  2. 2. Me
  3. 3. • Software Engineer • Javascript, Maps, Data Visualisation @Scarysize /Scarysize
  4. 4. visit hvv.live
  5. 5. Ubilabs
  6. 6. • Interactive map applications • Data visualisation • VR • Google Maps Partner
  7. 7. WebGL
  8. 8. • Rasterisation engine • Drawing points, lines & triangles • Shaders running on the GPU
  9. 9. SETUP STATE DRAW coordinates, buffers, textures… execute shaders on state
  10. 10. Setup Vertex Shader Rasterisation Fragment Shader Rendering
  11. 11. Mapbox GL JS
  12. 12. • Interactive Maps with Vector Tiles • WebGL based • Comprehensive
  13. 13. Source 1 Source 2 Layer 1 Layer 5 Layer 3 Layer 2 Layer 4
  14. 14. GeoJSON Source Circle Layer Line Layer Fill Layer
  15. 15. Data-driven Raster Tiles
  16. 16. • Minimise data transmission • Minimise server load & cost • Maximise flexibility on the client
  17. 17. • Encode data as grey value • Transmit “data” PNG tiles • Colour tiles on the client
  18. 18. 0 . . . 255 -50°C . . . 50°C #42D7F4 . . . #F47141 Value Mapping Colour Mapping
  19. 19. • Create 256 * 1 look-up texture • Use grey value as index into the look-up texture • Can be static or generated dynamically
  20. 20. Shader
  21. 21. Shader
  22. 22. Shader
  23. 23. • 3072 * 1536 values • Gray scale 0 - 100 filesizeinKB 0 2500 5000 7500 10000 GEOTIFF GIF PNG JPEG
  24. 24. • Use grey “data” tiles • Map colour to domain value • Flexibly colorise tiles on the client 🌈
  25. 25. Grid Data
  26. 26. • Minimise data transmission • Minimise server load & cost • Maximise flexibility on the client
  27. 27. filesizeinMB 0 31.25 62.5 93.75 125 0.3 24 125 20 40
  28. 28. filesizeinMB 0 31.25 62.5 93.75 125 CSV CSV gzipped JSON JSON gzipped PNG 0.3 24 125 20 40
  29. 29. • Encode data as grey value • Transmit “data” PNG images • Sample images based on current viewport
  30. 30. x x x x x x x x x
  31. 31. x x x x x x x x x [10, -34] [15, -29]
  32. 32. [10, -34] [15, -29]
  33. 33. X Component Y Component
  34. 34. • Massively reduce file size using images • Sample images based on viewport • Render as GeoJSON
  35. 35. Thanks @Scarysize /ScarysizeFranz Neubert

×