JavaScript, Java, and others • Computer skill: UNIX and Linux, Networking(L1 to L7), Virtual Machine (VirtualBox, KVM, Docker) • GIS skill: Data processing, Tile • Computer community: • OSGeo.JP • OpenStreetMap Foundation Japan • Japan Unix Society • Mozilla community in Japan • Contact: [email protected] or @smellman 2019/10/02 JICA 2019 Seminar 2
Toolkit. • Mr. Fujimura started this project when he worked in UN. • Toolkit means `collection of softwares`. • All software include in one Docker image. 2019/10/02 JICA 2019 Seminar 5
basic OS and software. • Docker runs in too many platform. • Desktop OS: Linux, Windows, macOS… • Cloud platform: AWS, Google, Azure(Microsoft) • Others: Raspberry Pi 3. • This presentation targets Raspberry Pi 3. 2019/10/02 JICA 2019 Seminar 6
the UK by the Raspberry Pi Foundation. • Teaching of basic computer science in schools and in developing countries. • You can build development environment with low cost. • Raspberry Pi 3 = $35 • microSD Card (128GB) = $20 • LAN Cable = $5 2019/10/02 JICA 2019 Seminar 7
based `Raspbian OS`. • Raspbian OS supports Docker. • We targets converting small data to vector tile. • If you build vector tile from big data(such as OpenStreetMap) or build raster tile, you may need some Desktop or laptop because it requires memory. • We can’t test Raspberry Pi 4 with 4GB memory because currently we can’t buy it in Japan. 2019/10/02 JICA 2019 Seminar 8
• `unvt/ango` • Extra image for FOSS4G 2019 Niigata Hands on. • `unvt/inazo` • Extra image for JICA 2019 Seminar. • Includes hosting program and Euro data from Global map project. • This presentation use this image. 2019/10/02 JICA 2019 Seminar 10
internet. • Map images are separated as tile. • Zoom Level 0 = World • Each zoom level doubles in the dimensions. • Too many tiles use “Web Mercator projection”. • Structure of tile is useful to web. • Scroll, zoom up/down with AJAX request. • Tile become known for Google Maps. • Tile has existed from the late 1990s. 2019/10/02 JICA 2019 Seminar 12 https://a.tile.openstreetmap.org/0/0/0.png
• Z = Zoom Level • X = X coordinate • Y = Y coordinate • Format • Raster image format (png, jpg, webp) • Vector data format (pbf, mvt) 2019/10/02 JICA 2019 Seminar 14
(TMS) • Web Map Tile Service (WMTS) • TMS is simple than WMTS. • TMS’s X Y coordinate is started from bottom left. • Same as Cartesian coordinate system. • WMTS‘s X Y coordinate is started from top left. • Same as Coordinate system for 2D computer graphics. 2019/10/02 JICA 2019 Seminar 17
but The Y coordinates are numbered from top left. • If take no thought of meta data, Y coordinate flipped TMS equals WMTS. • GSI Map use this rule too. • OpenStreetMap call “Slippy Map” • We call zxy tile • {z}/{x}/{y}.png • Also call xyz tile 2019/10/02 JICA 2019 Seminar 19
Mercator • Y coordinate flipped TMS • Provide REST API • {z}/{x}/{y}.{format} • Anyone provide “Specification” • Too many libraries supports ZXY Tile. 2019/10/02 JICA 2019 Seminar 20
have ”data”. • Focus to visualization. • Enable to scroll and zoom up/down. • GSI provides tile of “digital elevation model” as PNG format. • The elevation value obtainable by calculating with RGB values. 2019/10/02 JICA 2019 Seminar 21
“Vector data” • The tile like a data container. • Vector tile doesn’t have style. • Client render image with style settings. • Easy to rotation and bearing. • Supports 3D view. • Also vector tile use only provide data. • Programmable • Client can modify styles. 2019/10/02 JICA 2019 Seminar 22
• De facto standard of Vector Tile in current. • Specification • A tile encoded by Google’s Protocol Buffer format. • Designed with Web Mercator. • Supports Layers and Features. 2019/10/02 JICA 2019 Seminar 25
as commercial service. • Maputnik is OSS Mapbox Style editor. • It allows to design with GUI. • Also, you can make the style with text editor. 2019/10/02 JICA 2019 Seminar 27
OK Plugin OpenLayers 4 OK OK Mapbox GL JS OK OK (*1) Tangram (*2) OK OK Android Mapbox GL Native OK OK Google Maps SDK OK NG iOS Mapbox GL Native OK OK Mapkit OK NG 2019/10/02 JICA 2019 Seminar 28 *1: Android webview is supported but buggy. *2: Tangram will be duplicate
by International Steering Committee for Global Mapping (ISCGM) • Composed of 8 Data Sets • Vector Data (Transportation, Boundaries, Drainage, Population Centres) • Raster Data (Elevation, Vegetation, Land Cover, Land Use) • Free for non-commercial use. 2019/10/02 JICA 2019 Seminar 32
into github by GSI. • https://github.com/globalmaps • https://globalmaps.github.io/ • Old website was closed • Some countries provides global map archives at the national site. • All links: https://github.com/globalmaps/projectmanagement/ blob/master/REPOS.md • Some links are dead now. 2019/10/02 JICA 2019 Seminar 33
• It was provide as Geography Markup Language (GML) format. • Raster data provide as GeoTiff file. • It was provide as Band interleaved by line (BIL) format. 2019/10/02 JICA 2019 Seminar 34
between versions. • Example: • gmlk10 https://github.com/globalmaps/gmlk10 • Global map version 1.x in Sri-Lanka. • gmlk20 https://github.com/globalmaps/gmlk20 • Global map version 2.x in Sri-Lanka. • You can download all specifications: • https://github.com/globalmaps/specifications 2019/10/02 JICA 2019 Seminar 35
Install docker desktop. • Pull `inazo` docker image. • Run docker container. • Run `inazo-produce` to process data contains docker image. • Run `inazo-host` to access vector tile in your PC. • Access via Internet (demo) 2019/10/02 JICA 2019 Seminar 39
2. Go to https://www.docker.com/ and create account. - Docker requires an account to download docker desktop now. 3. Get installer. 4. Install and reboot. 2019/10/02 JICA 2019 Seminar 40
2019/10/02 JICA 2019 Seminar 42 > docker run -it --rm -p 3000:3000 smellman/inazo -it means `-i -t` shortcut. -i, --interactive Keep STDIN open even if not attached -t, --tty Allocate a pseudo-TTY --rm means remove stopped docker container -p means publish container port to host. You can access container’s 3000 port via localhost’s 3000 port.
Euro. • `inazo-produce` run tippecano and tile-join. • `tippecano` converts GeoJSON data in `/root/geojson-euroglobalmap` to mbtiles file. • Mbtiles is SQLite database contains tile image and structure. • `tile-json` split mbtiles to zxy directory. • But this directory doesn’t use inazo-host. • `inazo-host` run web server. • Program is written in node.js by Mr. Fujimura. 2019/10/02 JICA 2019 Seminar 46
https://serveo.net/ • Run following commands in `inazo-host` • Replace {number} in your number. • Go to https://jica-2019-{number}.serveo.net in your browser 2019/10/02 JICA 2019 Seminar 48 $ rake stop $ rake build URL=https://jica-2019-{number}.serveo.net $ rake start $ ssh -R jica-2019-{number}:80:localhost:3000 serveo.net
data after container stopped if you use `--rm` option. • `-v` option bind mount a volume. This means you can enable to keep data. • Run following in Sri Lanka data directory. 2019/10/02 JICA 2019 Seminar 51 > docker run -it --rm -p 3000:3000 -p 8888:8888 -v ${PWD}:/data smellman/inazo
`ogr` is a library and commands contains in `GDAL/OGR` in OSGeo project. • https://gdal.org/ • `ogr` is processing library/utility for vector data. • `gdal` is processing library/utility for raster data. • QGIS use GDAL/OGR • Run following command in docker container. 2019/10/02 JICA 2019 Seminar 52 $ cd /data $ ogr2ogr -f GeoJSON -t_srs EPSG:4326 airp_lka.geojson airp_lka.shp
loop` in bash. • I recommend to use CUI to process many data. • `for loop` means… 2019/10/02 JICA 2019 Seminar 53 # cd /data # for i in `echo *.shp`; do t=`basename $i .shp`.geojson; ogr2ogr -f GeoJSON -t_srs EPSG:4326 $t $i; done for i in `echo *.shp` do t=`basename $i .shp`.geojson ogr2ogr -f GeoJSON -t_srs EPSG:4326 $t $i done
2019 Seminar 56 host: localhost port: 3000 include v # cd /root/inazo-host # vim hocon/tile.conf # parse-hocon hocon/tile.conf --output htdocs/tile.json
Type. • Background • Fill • Line • Symbol • Raster • Circle • Draw circle image. • Fill Extrusion • Fill Extrusion will use 3D. • https://www.mapbox.com/mapbox-gl-js/style- spec/ 2019/10/02 JICA 2019 Seminar 64
Field name is “rtt” • “rtt” = 14 is primary route. • Select ”roadl-primary” layer and click “Add filter”. • Set filter “rtt == 14”. 2019/10/02 JICA 2019 Seminar 76
New layer “roadl-primary-copy” will created. • Change layer ID to “roadl-secondary”. • Modily filter to “rtt == 15”. • Drag down layer. 2019/10/02 JICA 2019 Seminar 77
• Set Zoom 6 = 1 and Zoom 10 = 6, the value will increase between Zoom 6 and 10. • “base” property will use to control the rate witch the function output increases. • base = 1 will be increase linearly. • “base” property can’t edit in maputnik GUI but can edit in JSON editor. • https://www.mapbox.com/mapbox-gl-js/style- spec/#other-function 2019/10/02 JICA 2019 Seminar 79
layout properties. • It can use Feature properties using token like {field_name}. • airp’s nam property is name. • Set {nam} into Field property. • But result seem wrong. • Need to set “Offset”. 2019/10/02 JICA 2019 Seminar 83
You have `username/repository` repository then Github hosts in `https://username.github.io/repository` • Also you need setup repository setting. • See: https://pages.github.com/ • Example by Mr. Fujimura: https://un-vector-tile- toolkit.github.io/inazo- static/#10.08/41.8966/12.484 • See also: https://github.com/un-vector-tile- toolkit/inazo-static 2019/10/02 JICA 2019 Seminar 87
in production, tileserver-gl is better choice as hosting program. • Rendering raster tile in server side. • If your server has GPU, the performance will be good. • Host multiple fonts • If you choose multiple fonts, access URL will be strange. • http://localhost:3000/fonts/Klokantech%20Noto%20Sans %20Regular,Klokantech%20Noto%20Sans%20CJK%20R egular/36096-36351.pbf • {fontstack} includes multiple fonts. 2019/10/02 JICA 2019 Seminar 88
style into local. • If you use `tileserver-gl`, edit style and modify three lines. • sources/global_map/url to “mbtiles://{lka}”. • glyphs to “{fontstack}/{range}.pbf” • sprite to “sprite” 2019/10/02 JICA 2019 Seminar 89
easy because tileserver-gl can run too many linux hosts. • But Vector tile needs SSL access in internet. • Let‘s encrypt is useful to get free SSL/TLS Certificates. • https://letsencrypt.org/ • Setup frontend server(Apache/nginx/etc) and connect from server with reverse proxy. • Github pages supports SSL by default. • Also you can use custom domain too. 2019/10/02 JICA 2019 Seminar 90
tile but rendering will slow. • Depends on CPU/GPU performance. • If you use this function, you need setup cache server. 2019/10/02 JICA 2019 Seminar 93
raster data to raster tiles, you can use gdal2tiles command or use this command in QGIS. • It is last year‘s topic, so please check my last year‘s presentation. • https://speakerdeck.com/smellman/create-tiled- map-using-global-map-2018?slide=79 • Output is TMS so you need convert to flipped TMS. • Raster tile size will be big, so I don‘t recommend to use github pages. 2019/10/02 JICA 2019 Seminar 96