UNVT Workshop: Introduction and Application

2021-05-05
UNVT Workshop
@MS Teams

Transcript

1. 1 UNVT Introduction Hidenori 2021-05-05 UNVT Workshop @MS Teams 1
2. Welcome, participants from... CNMC, ECA, ECLAC, MINURSO, MINUSMA, MONUSCO, OICT, UNAMA, UNAMI, UNDP, UNFICYP, UNGSC, UNHCR, UNIFIL, UNISFA, UNITAD, UNMIK, UNMISS, UNOWAS, UNRSCE, UNSOS, UNVMC, and more. 2
3. Hidenori •Working for Geospatial Information Authority of Japan (GSI). •GSI is mandated to publish maps. •GSI runs web maps titled GSI Maps. 3
4. Topics in this Session Vector Tiles 1. Why 2. How 4
5. Web maps changed our daily life. 5
6. Platformers’ web maps are great. But it does not always fit for all purposes. • Contents • Functions • … 6
7. Sometimes public organizations need to use different maps. Public organizations deserve the latest technology. Make it possible. 7
8. Demo https://optgeo.github.io/b3ps9 8
9. Demo • Fast 3D rendering. • Our Open Data used. • Simple as just one HTML file. These were possible because we adopted the latest web map technology - Vector Tiles - also used by Digital Platformers. 9
10. Just 46 lines of code. 10
11. Vector Tiles (VT) 1. The latest web map technology also used by Digital Platformers. 2. Vector: data are machine-readable. 3. Tiles: data are divided in squares. YouTube is video streaming over time. Vector Tiles are map streaming over space. 11
12. 12 Web maps are built with tiles.
13. Tiles look the same. 13
14. But vector tiles are machine-readable 14
15. Vector Tiles are significantly smaller 15
16. 3D was possible because VT is smart. 16
17. History of Vector Tiles (VT) 2021 UNVT is being deployed in GSC. 2014 Mapbox started Open Source VT. 2010 Google started VT in Android. 2018 UN Open GIS started UNVT. 17
18. The United Nations Vector Tile Toolkit (UNVT): Introduction Enable everyone to produce, style, host, and optimize Vector Tiles 18
19. Purpose 1. Enable everyone to produce, style, host, and optimize VT. 2. Promote sharing of ideas and techniques on VT. 19 Produce Style Host Applications Optimize
20. Background Geospatial Information Authority of Japan (GSI) has been contributing to the UN Open GIS Initiative by sharing its Web Map expertise with UN Geospatial including UN Global Service Centre since 2017. 20
21. Overview 1. Produce 2. Style 3. Host 4. Optimize 21
22. 1 Produce Convert Source Data into GeoJSON Text Sequence (GeoJSONS) with injecting Vector Tile Design Configuration. Feed the sequence into Tippecanoe to produce MBTiles of VT. In the case of smaller Source Data, extract MBTiles into a filesystem with tile-join. In the case of larger Source Data, production will be done in a modular manner where Source Data are split into modules of several gigabytes. 22
23. Tippecanoe An Open Source (BSD 2-Clause License) VT building software. 23
24. GeoJSONS Example (for Tippecanoe) … {"type":"Feature","properties":{"orgGILvl":25000,"type":"市区町村 界"},"geometry":{"type":"LineString","coordinates":[[135.2475033,34.87827 78],[135.247415,34.8782711],[135.2472097,34.8782114]]},"tippecanoe":{"l ayer":"AdmBdry","minzoom":6,"maxzoom":16}} {"type":"Feature","properties":{"orgGILvl":25000,"type":"市区町村 界"},"geometry":{"type":"LineString","coordinates":[[135.2482719,34.87788 44],[135.2481417,34.8778361],[135.2479753,34.8780269],[135.2478275,3 4.8781758],[135.2477189,34.8782294],[135.2475742,34.8782831],[135.24 75033,34.8782778]]},"tippecanoe":{"layer":"AdmBdry","minzoom":6,"maxzo om":16}} ... 24
25. Tile Designer’s product VT Design Configuration. The configuration is usually a JavaScript or Ruby script which takes a GeoJSONS from standard input, filters features with adding GeoJSON extention for Tippecanoe, and stream them to standard output as GeoJSONS. 25
26. VT Design Configuration: example https://github.com/unvt/fgd/blob/ main/filter.js 26
27. 2 Style Generate a style.json which conform to Style Specifications and in harmony with a VT Design Configuration. Human-Optimized Config Object Notation (HOCON) was introduced to organize the style configuration layer-wise because in most cases a style.json is large and complex. 27
28. Style Designer’s product VT Style Configuration. A set of HOCON files (*.conf) in most cases. Example: https://github.com/unv t/fgd/tree/main/hocon 28
29. 3 Host Host the product on the Web. In the case of smaller Source Data, first we host the product locally using budo, and then use GitHub Pages to publish it. 29
30. 4 Optimize Analyze zoom-wise size distribution of VT using vt-optimizer. Continuously improve VT Design Configurations. 30
31. System Context Diagram 31
32. https://unvt.github.io/design-2021-05/ 32
33. Questions? 33
34. 2 UNVT Applications Hidenori 2021-05-05 UNVT Workshop @MS Teams 34
35. UNVT Applications 1. equinox: UNVT installer for Raspberry Pi OS 2. plow: Server-side image tile rendering PoC 3. GIS for Water in East Africa 4. GSI Maps Vector 5. Storytelling 6. Other “Adopt Geodata” projects 35
36. equinox: UNVT installer for Raspberry Pi OS UNVT so faithful to design principles of Unix and the Web that UNVT capacity building was difficult on Windows. We usually use Raspberry Pi for UNVT capacity building. We have UNVT installer named equinox for Raspberry Pi OS. Raspberry Pi (4B): Single-board PC. 100 US$ for each set. 36
37. plow: Server-side image tile rendering PoC VT can even benefit GIS without VT support by its higher update frequency or its flexibility in style. Server-side on-demand image tile rendering is a way to support legacy GIS without VT support. plow is a proof-of-concept (PoC) of server-side on-demand image tile rendering using PlayWright. GSI is also working on server-side on-demand image tile rendering. 37 Browser rendering Server-side rendering
38. GIS for Water in Eastern Africa • VT Application for water supply management in Kenya and Rwanda. • UNVT used for basemap. • Documentation at GIS for Water • Currently available for: ◦ WASAC, Rwanda ◦ Narok Water, Kenya ◦ Nanyuki Water, Kenya ◦ Nakuru Water, Kenya
39. GIS for Water Enable small organization like water services to share their data. 39
40. WASAC (Water & Sanitation Corp.), Rwanda 40
41. Narok Water, Kenya 41
42. Nanyuki Water, Kenya 42
43. Nakuru Water, Kenya 43
44. GSI Maps Vector: Japan’s basemap in VT VT produced by UNVT. Various styles provided. Includes style editor. https://maps.gsi.go.jp/vector/ 44 2021-02 First major data update 2020-03 All area ready 2019-07 Initial Release
45. Storytelling Collaboration with civic tech experts @taisukef and @halsk Optimized for easy storytelling, e.g.: - title: UNRSCE description: the United Nations Regional Service Centre Entebbe hash: 17.71/0.048686/32.455944/0/74 hash: {zoom}/{lat}/{lng}/{bearing}/{pitch} 45
46. Storytelling: hash hash: {zoom}/{lat}/{lng}/{bearing}/{pitch} Any website that uses Mapbox GL JS/Leaflet/MapLibre GL uses hash in the URL. For example: https://maps.gsi.go.jp/#15/36.069134/140.113586/ https://optgeo.github.io/b3p/#13.79/35.35156/138.73489/0/60 46
47. Storytelling accessToken: pk.eyJ1IjoiaGZ1...UTAifQ.rTx380smyvPc1gUfZv1cmw title: The world of United Nations Missions style: mapbox://styles/hfu/cko4dv10v14vl17qyl9ah457o chapters: - title: UNRSCE description: the United Nations Regional Service Centre Entebbe hash: 17.71/0.048686/32.455944/0/74 footer: >- <p>This project is a part of <a href='https://github.com/optgeo'>Adopt Geodata project</a>.</p> 47 This format is called YAML (YAML Ain't Markup Language).
48. <!DOCTYPE html> <html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width"/> <title></title> <script type="module" src="https://optgeo.github.io/s/module.js"></script> </head> <body> <script type="text/yaml"> accessToken: pk.eyJ1IjoiaGZ1...UTAifQ.rTx380smyvPc1gUfZv1cmw title: The world of United Nations Missions style: mapbox://styles/hfu/cko4dv10v14vl17qyl9ah457o chapters: - title: UNRSCE description: the United Nations Regional Service Centre Entebbe hash: 17.71/0.048686/32.455944/0/74 footer: >- This project is a part of Adopt Geodata project. </script> </body> </html> 48
49. Demo https://optgeo.github.io/b3ps8/ 49
50. Storytelling: Do It Yourself! 1. Download https://raw.githubusercontent.com/optgeo/b3ps8/main/index.html 2. Edit the story part (title, hash, description, …) by Notepad. 3. Double-click the file, to open your storytelling! 50
51. Other “Adopt Geodata” projects Adopt Geodata (optgeo) project Adopt Geodata (optgeo) project is a project in tandem with UNVT. The purpose of the project is to demonstrate the value of VT, and to continuously improve UNVT, by creating VT from open geospatial data which are not yet in VT. Storytelling is a part of the Adopt Geodata project. 51
52. shizen: 3D DEM + Place Names 52
53. nanadaru-5: Voxels from DSM 53
54. fgd-tokio: VT from authoritative data 54
55. fgd-adm: administrative boundaries 55
56. csv2: Curvature-Slope 3D visualization 56
57. sh2: Albania w/ OpenStreetMap data 57
58. ag: Agriculture Areas 58
59. technopolis: Tokyo Sta. indoor maps 59
60. kokoromi-*: OSM VT 60 kokoromi-cd - DR Congo, Goma
61. ff: Forest and Agriculture Area 61
62. Further discussions 62
63. More developer-oriented discussions 63
64. We can combine efforts. Questions? On MS Teams, On https://github.com/unvt, On https://github.com/optgeo, or now. 64