UNVT Workshop: Introduction and Application

Slide 1

Slide 1 text

1 UNVT Introduction Hidenori 2021-05-05 UNVT Workshop @MS Teams 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Hidenori ●Working for Geospatial Information Authority of Japan (GSI). ●GSI is mandated to publish maps. ●GSI runs web maps titled GSI Maps. 3

Slide 4

Slide 4 text

Topics in this Session Vector Tiles 1. Why 2. How 4

Slide 5

Slide 5 text

Web maps changed our daily life. 5

Slide 6

Slide 6 text

Platformers’ web maps are great. But it does not always ﬁt for all purposes. ● Contents ● Functions ● … 6

Slide 7

Slide 7 text

Sometimes public organizations need to use different maps. Public organizations deserve the latest technology. Make it possible. 7

Slide 8

Slide 8 text

Demo https://optgeo.github.io/b3ps9 8

Slide 9

Slide 9 text

Demo ● Fast 3D rendering. ● Our Open Data used. ● Simple as just one HTML ﬁle. These were possible because we adopted the latest web map technology - Vector Tiles - also used by Digital Platformers. 9

Slide 10

Slide 10 text

Just 46 lines of code. 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 Web maps are built with tiles.

Slide 13

Slide 13 text

Tiles look the same. 13

Slide 14

Slide 14 text

But vector tiles are machine-readable 14

Slide 15

Slide 15 text

Vector Tiles are signiﬁcantly smaller 15

Slide 16

Slide 16 text

3D was possible because VT is smart. 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

The United Nations Vector Tile Toolkit (UNVT): Introduction Enable everyone to produce, style, host, and optimize Vector Tiles 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Overview 1. Produce 2. Style 3. Host 4. Optimize 21

Slide 22

Slide 22 text

1 Produce Convert Source Data into GeoJSON Text Sequence (GeoJSONS) with injecting Vector Tile Design Conﬁguration. Feed the sequence into Tippecanoe to produce MBTiles of VT. In the case of smaller Source Data, extract MBTiles into a ﬁlesystem 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

Slide 23

Slide 23 text

Tippecanoe An Open Source (BSD 2-Clause License) VT building software. 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

VT Design Conﬁguration: example https://github.com/unvt/fgd/blob/ main/ﬁlter.js 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Style Designer’s product VT Style Conﬁguration. A set of HOCON ﬁles (*.conf) in most cases. Example: https://github.com/unv t/fgd/tree/main/hocon 28

Slide 29

Slide 29 text

3 Host Host the product on the Web. In the case of smaller Source Data, ﬁrst we host the product locally using budo, and then use GitHub Pages to publish it. 29

Slide 30

Slide 30 text

4 Optimize Analyze zoom-wise size distribution of VT using vt-optimizer. Continuously improve VT Design Conﬁgurations. 30

Slide 31

Slide 31 text

System Context Diagram 31

Slide 32

Slide 32 text

https://unvt.github.io/design-2021-05/ 32

Slide 33

Slide 33 text

Questions? 33

Slide 34

Slide 34 text

2 UNVT Applications Hidenori 2021-05-05 UNVT Workshop @MS Teams 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

equinox: UNVT installer for Raspberry Pi OS UNVT so faithful to design principles of Unix and the Web that UNVT capacity building was diﬃcult 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

Slide 37

Slide 37 text

plow: Server-side image tile rendering PoC VT can even beneﬁt GIS without VT support by its higher update frequency or its ﬂexibility 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

GIS for Water Enable small organization like water services to share their data. 39

Slide 40

Slide 40 text

WASAC (Water & Sanitation Corp.), Rwanda 40

Slide 41

Slide 41 text

Narok Water, Kenya 41

Slide 42

Slide 42 text

Nanyuki Water, Kenya 42

Slide 43

Slide 43 text

Nakuru Water, Kenya 43

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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: >-

This project is a part of Adopt Geodata project.

47 This format is called YAML (YAML Ain't Markup Language).

Slide 48

Slide 48 text

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. 48

Slide 49

Slide 49 text

Demo https://optgeo.github.io/b3ps8/ 49

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

shizen: 3D DEM + Place Names 52

Slide 53

Slide 53 text

nanadaru-5: Voxels from DSM 53

Slide 54

Slide 54 text

fgd-tokio: VT from authoritative data 54

Slide 55

Slide 55 text

fgd-adm: administrative boundaries 55

Slide 56

Slide 56 text

csv2: Curvature-Slope 3D visualization 56

Slide 57

Slide 57 text

sh2: Albania w/ OpenStreetMap data 57

Slide 58

Slide 58 text

ag: Agriculture Areas 58

Slide 59

Slide 59 text

technopolis: Tokyo Sta. indoor maps 59

Slide 60

Slide 60 text

kokoromi-*: OSM VT 60 kokoromi-cd - DR Congo, Goma

Slide 61

Slide 61 text

ff: Forest and Agriculture Area 61

Slide 62

Slide 62 text

Further discussions 62

Slide 63

Slide 63 text

More developer-oriented discussions 63

Slide 64

Slide 64 text

We can combine efforts. Questions? On MS Teams, On https://github.com/unvt, On https://github.com/optgeo, or now. 64