Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UNVT Workshop: Introduction and Application

UNVT Workshop: Introduction and Application

2021-05-05
UNVT Workshop
@MS Teams

Hidenori FUJIMURA

May 05, 2021
Tweet

More Decks by Hidenori FUJIMURA

Other Decks in Technology

Transcript

  1. 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
  2. Hidenori •Working for Geospatial Information Authority of Japan (GSI). •GSI

    is mandated to publish maps. •GSI runs web maps titled GSI Maps. 3
  3. Platformers’ web maps are great. But it does not always

    fit for all purposes. • Contents • Functions • … 6
  4. Sometimes public organizations need to use different maps. Public organizations

    deserve the latest technology. Make it possible. 7
  5. 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
  6. 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
  7. 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
  8. The United Nations Vector Tile Toolkit (UNVT): Introduction Enable everyone

    to produce, style, host, and optimize Vector Tiles 18
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 4 Optimize Analyze zoom-wise size distribution of VT using vt-optimizer.

    Continuously improve VT Design Configurations. 30
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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).
  26. <!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
  27. 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
  28. 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