2021-06-07_storytelling trial report

How to create a storytelling map following the information on the UNVT workshop on 5 May 2021 (and 12 May 2021).

Transcript

1. Report of my trial of “storytelling” with UNVT 27 May 2021 (Revised on 7 June 2021) Taro Ubukawa Senior Geospatial Expert, UN Geospatial Information Section
2. Contents 1. Get a MapBox accessToken 2. Check your web map 3. Let’s make “storytelling” map by myself 4. Result 5. Issue References
3. 1. Get a MapBox accessToken • Go to mapbox.com and sign up. • “Tokens” → “+ Create a token,” then you can get a token. • We could create a token with URLs restriction.
4. Attention! • By using your token, there will be map loads. Please check your statistics. (from: https://docs.mapbox.com/accounts/guides /invoices/ ) Mapbox accounts are free to create, and all customers with Pay-as-you-go billing receive a monthly free tier of services that resets on the first day of the account's monthly billing period. We will send an email notification to the account's email address the first time a free tier is exceeded during each billing period.
5. Please check the pricing… • It is free up to 50,000 map loads per month. Need to think about: • Average visitor • Average map load per user, etc
6. 2. Check your web map Hash: 9.09/40.7547/-73.8681/0/0 My understanding. (zoom/Lat/Long/bearing/pitch) bearing: from -180 to180 Pitch: 0-60 Style file of this map: https://ubukawa.github.io/osm- neighbor/style.json You need to check the followings: • The location of the style. • Hash of each scene. • The story you want to tell. Example
7. 3. Let’s make “storytelling” by myself • Let’s follow, Mr. Fujimura’s presentation. • Go the following URL. Copy and edit it with text editor. https://raw.githubusercontent.com/optgeo/b3ps8/main/index. html Tips: You will find detailed information here. https://github.com/optgeo/s
8. 3-1. Edit html file (1) Line 4: We could clone this from https://github.com/optgeo/s , but let’s leave it as it is for the time being. This file refers to mapbox-gl-js version 2.1.1. Line 8: Replace this with your own accessToken Line 9: Change the title of the map Line 10: We can also replace the map by changing the style reference here.
9. Edit html file (1) - after
10. 3-2. Edit html file (2) • Edit “chapters” by referring your map. We will replace these text. • Title • description • Hash • etc
11. 3-3. Edit html file (3) • Let’s also edit the footer.
12. (tips) mapbox-gl-js version 1 or 2 • Please pay enough attention to the version of mapbox-gl-js. Version 1 is under the 3-Clause BSD license while version 2 is not. Please check the license. https://github.com/mapbox/mapbox-gl-js/blob/main/CHANGELOG.md#200
13. If you want to change the version of mapbox gl js, please replace the script source at the line 4. • Clone https://optgeo.github.io/s/module.js, then, edit and upload it on your server. Then, replace the reference to the module.js • (For testing purpose, you can refer to https://ubukawa.github.io/osm-neighbor/s/docs/module_v1.js (ver1.10.0)) (tips) mapbox-gl-js version 1 or 2?
14. 4. Result
15. 5. Issue I need to check: • Sometime, you may not be able to see the map rotating. From the same browser in the different PC, I could see it rotating. • I guess it could be due to the web browser setting. (It rotated by 90 degrees, but I could not see animation.)
16. References • H. Fujimura (2021), UNVT Applications, https://speakerdeck.com/hfu/unvt-workshop-introduction-and- application • Mapbox website: https://www.mapbox.com/ • OPTGEO repositories https://github.com/optgeo/s https://github.com/optgeo/b3ps8