---
title: Create / distribute tiled map - JICA seminar 2023
tags:  #foss4g #osgeo #openstreetmap #oss  
author: [Taro Matsuzawa aka. btm](https://convert.docswell.com/user/smellman)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GEW3V25PE2.jpg?width=480
description: JICA Seminar 2023
published: December 07, 23
canonical: https://convert.docswell.com/s/smellman/K7V312-2023-12-07-jica-seminar
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GEW3V25PE2.jpg)

Create / distribute tiled map
Taro Matsuzawa
Georepublic Japan
JICA Seminar 2023
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47ZV4DN6E3.jpg)

Notes
This presentation use some command line tools
Open following link in your browser.
Copy and paste the command line to your terminal.
https://smellman.github.io/jica_2023/
JICA Seminar 2023
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ65318L7V.jpg)

Self introduction
GIS Engineer at Georepublic Japan
Programming: Python, JavaScript, TypeScript, Ruby etc.
UNIX and Linux guru
GIS skill: Data processing, Tiled based Map
Community
Director of OSGeo.JP
Director of OpenStreetMap Foundation Japan
Sub president of Japan Unix Society
UNOpenGIS/7 volunteer
Contact: taro@georepublic.co.jp / @smellman on Twitter
JICA Seminar 2023
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ5YL49MJ4.jpg)

Today&#039;s agenda
System setup
What is tiled map?
Introduction of software and data in this presentation
How to create your own tiled map
How to design your own tiled map
How to distribute your own tiled map
JICA Seminar 2023
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/9E2GLV2RER.jpg)

System setup
This presentation requires Linux based OS.
Use Raspberry Pi 4.
JICA Seminar 2023
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/D7YVQ3Y57M.jpg)

System setup - Connect to jump host
Connect to SSID &quot;vectortiles&quot;
Launch Terminal
Windows: Use PowerShell
Mac: Use Terminal.app
Connect to Raspberry Pi with SSH
ssh portal@j2213.local
JICA Seminar 2023
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VENMKVP4J8.jpg)

System setup - Connect to Your Raspberry Pi
make &lt;YOUR HOST NAME&gt;
e.g.
make m321
JICA Seminar 2023
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y79NV63473.jpg)

System setup - Install software
sudo apt install -y git make
git clone https://github.com/smellman/jica_scripts.git
cd jica_scripts/system
sudo HOME=$HOME USER=$USER make install
JICA Seminar 2023
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G78KPZMVJD.jpg)

What is tiled map?
JICA Seminar 2023
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L7LZ1D3RER.jpg)

Tile technology
Provide map image or data over
the internet.
Map images are separated as
tiles.
Zoom Level 0 = World
Each zoom level doubles in
the dimensions.
Too many tiles use &quot;Web
Mercator&quot; projection.
https://a.tile.openstreetmap.org/0/0/0.
png
JICA Seminar 2023
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EMVWPDPEW.jpg)

Useful to web
Structure of tile is useful for web.
Enable to scroll map smoothly.
Enable to zoom up and zoom down map smoothly.
HTTP GET request.
Tile become known for Google Maps.
Tile has existed from the late 1990s.
JICA Seminar 2023
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PER2Y14Y79.jpg)

Zoom
Zoom level 0 : 1 file
Zoom level 1 : 2 x 2 = 4 files
Zoom level 2 : 4 x 4 = 16 files
...
Zoom level 18 : 2^18 x 2^18 =
262,144 x 262,144 =
68,719,476,736 files
https://maps.gsi.go.jp/help/image/tileN
um.png
JICA Seminar 2023
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/P7XDGY24JX.jpg)

GET Request
Many services use REST API(GET Request).
https://.../Z/X/Y.Format
Z: Zoom Level
X: X coordinate
Y: Y coordinate
Format:
Raster image format(png, jpg, webp)
Vector data format(pbf, mvt)
JICA Seminar 2023
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/37KX43MPJD.jpg)

GET Request example
https://a.tile.openstreetmap.org/3/
2/4.png
Zoom = 3, X = 2, Y = 4,
format = png
X and Y coordinates start
with 0.
JICA Seminar 2023
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJ35LGY475.jpg)

Specification
Two tile service specifications are popular.
Tile Map Service(TMS)
Web Map Tile Service(WMTS)
TMS is simpler than WMTS.
TMS&#039;s X Y coordinate is started from bottom left.
Same as Cartesian coordinate system.
WMTS&#039;s X Y coordinate is started from top left.
Same as Coordinate system of 2D computer graphics.
JICA Seminar 2023
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/8JDDN155JG.jpg)

JICA Seminar 2023
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VEPX5QGDJ8.jpg)

The Y coordinate
flipped
OpenStreetMap use TMS like
protocol but Y coordinate is
numbered from top.
OpenStreetMap call &quot;Slippy
Map&quot;.
We call xyz tile.
{z}/{x}/{y}.png
Also we call zxy tile.
https://maps.gsi.go.jp/help/image/tileN
um.png
JICA Seminar
2023
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/27VLP56GEQ.jpg)

XYZ tile
De facto standard of tiled map.
Web Mercator projection
Y coordinate flipped TMS
Provide REST API
{z}/{x}/{y}.{format}
Anyone provide &quot;Specification&quot;
Too many libraries support XYZ tile.
Leaflet, OpenLayers, Maplibre GL JS, Google Maps API etc.
JICA Seminar 2023
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/5JGXP62D7L.jpg)

Raster tile (1/3)
Provides &quot;rendered image&quot;
The image doesn&#039;t have any
&quot;data&quot;.
Focus to visualization.
JICA Seminar 2023
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/47Q824PXEP.jpg)

Raster tile (2/3)
Provides &quot;Satellite images&quot; or
&quot;Aerial photograph&quot;
Focus to photography.
The image doesn&#039;t have any
&quot;data&quot; too.
JICA Seminar 2023
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/KE42LQY271.jpg)

Raster tile (3/3)
Provides &quot;data&quot; as image.
Focus to data.
Population, Temperature,
Rainfall, Elevation, etc.
The image has &quot;data&quot; as
color.
Sample raster tiles
contain the elevation
value obtainable by
calculating with RGB
values.
JICA Seminar 2023
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/L71MLP6KJG.jpg)

Vector tile (1/2)
Provides &quot;Vector data&quot;
Each tile contains &quot;Vector
data&quot;.
The tile like a data
container.
JICA Seminar 2023
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/G7W3V2WP72.jpg)

Vector tile (2/2)
Vector tile doesn&#039;t have a style.
The client renders images with style settings.
Easy to rotation and bearing.
Supports 3D rendering.
Programmable.
The client can change the style dynamically.
JICA Seminar 2023
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4JZV4D5673.jpg)

Vector tile example Multilingual
https://openmaptiles.org/languag
es/
Enable to change main
language dynamically.
JICA Seminar 2023
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YE65319LJV.jpg)

Vector tile example Geospatial Information
Authority of Japan
https://maps.gsi.go.jp/vector/
GSI provides vector tile.
Enable to change style
dynamically.
JICA Seminar 2023
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GE5YL4NME4.jpg)

Mapbox Vector Tile
De facto standard of vector tile.
Vector tile specification by Mapbox Inc.
Specification
A tile encoded by Protocol Buffer format.
Desinged for Web Mercator projection.
Supports Layers and Features.
https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/
JICA Seminar 2023
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/972GLV5R7R.jpg)

Mapbox GL ecosystem
and Style Specification
Mapbox provides Mapbox GL
JS(Web), Mapbox GL
Native(Smartphone and Desktop
application).
Mapbox provides
specification of styling.
https://docs.mapbox.com/ma
pbox-gl-js/style-spec/
JICA Seminar 2023
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/DJYVQ3K5JM.jpg)

Note: Mapbox GL is proprietary software
Mapbox GL became proprietary software from end of 2020.
Mapbox GL JS is OpenSource software until v1.5.
Mapbox GL JS over v2 must require mapbox service’s token.
MapLibre GL ecosystems are fork of mapbox OpenSource versions.
https://maplibre.org/
Highly recommend to use MapLibre GL JS now.
JICA Seminar 2023
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/V7NMKVR4E8.jpg)

Tile support libraries - Javascript
Leaflet
https://leafletjs.com/
Lightweight and easy to use.
Supports Mapbox Vector Tile with plugin.
OpenLayers
https://openlayers.org/
Difficult to use but powerful.
Supports Mapbox Vector Tile.
MapLibre GL JS
https://maplibre.org/
Easy to use for Mapbox Vector Tile.
JICA Seminar 2023 Supports raster xyz tile too.
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/YJ9NV6M4J3.jpg)

Tile support libraries - Android
MapLibre GL Native
https://maplibre.org/
Easy to use for Mapbox Vector Tile.
Supports raster xyz tile too.
Google Maps SDK
https://developers.google.com/maps/documentation/android-sdk/overview
Easy to use for raster xyz tile.
JICA Seminar 2023
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/GJ8KPZLVED.jpg)

Tile support libraries - iOS
MapLibre GL Native
https://maplibre.org/
Easy to use for Mapbox Vector Tile.
Supports raster xyz tile too.
Mapkit
https://developer.apple.com/documentation/mapkit
Easy to use for raster xyz tile.
JICA Seminar 2023
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/LJLZ1DLR7R.jpg)

Desktop application
QGIS
https://qgis.org/
Supports raster xyz tile.
Supports Mapbox Vector Tile.
JICA Seminar 2023
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/47MVWPMP7W.jpg)

Introduction of software and data in this presentation
JICA Seminar 2023
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/P7R2Y1VYJ9.jpg)

Requirements
This presentation requires Linux based OS.
Also, you can use Raspberry Pi 4.
Raspberry Pi 4 is cheap and powerful.
Raspberry Pi 4 is ARM64/aarch64 architecture.
Raspberry Pi 4 is easy to use for GIS.
My repository for this presentation supports only ARM64/aarch64 architecture.
JICA Seminar 2023
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/PJXDGYZ4EX.jpg)

Software - GDAL/OGR
https://gdal.org/
GDAL/OGR is the most popular GIS library and provides command line tools.
QGIS based on GDAL/OGR.
GDAL/OGR supports many GIS data formats.
GDAL/OGR supports raster xyz tile.
JICA Seminar 2023
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/3JKX438PED.jpg)

Software - Tippecanoe
https://github.com/felt/tippecanoe/
Build vector tilesets from large (or small) collections of GeoJSON, FlatGeoBuf or CSV
features.
Tippecanoe is the most popular vector tile builder.
JICA Seminar 2023
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/LE35LG24J5.jpg)

Software - Charites
Command line tool for writing Mapbox/MapLibre Vector Style Specification in YAML.
Organized by The United Nation Vector Tile Toolkit(UNVT).
Charites convert Style Specification(JSON) to YAML.
YAML is easy to read and write for human.
YAML is easy to edit for beginners.
Charites enable to dynamic serving style.
JICA Seminar 2023
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/8EDDN1Z5EG.jpg)

Software - editor
is a simple text editor.
nano is easy to use for both beginners.
vim is a powerful text editor.
vim is difficult to use for beginners.
vim is easy to use for experts.
nano
JICA Seminar 2023
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/V7PX5QDDE8.jpg)

Software - make
make is a build automation tool.
make is easy to use for both beginners and experts.
make is a standard tool of UNIX and Linux.
This presentation use make for build and deploy.
JICA Seminar 2023
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/2JVLP51G7Q.jpg)

Software - nginx
nginx is a web server.
nginx is easy to use for both beginners and experts.
nginx is a standard tool of UNIX and Linux.
This presentation use nginx for serving tiles.
JICA Seminar 2023
40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/5EGXP68DJL.jpg)

Software - tileserver-gl-light
tileserver-gl-light is a vector tile server.
useful for inspecting vector tile.
JICA Seminar 2023
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/4JQ8249X7P.jpg)

Software - docker
docker is a container platform.
docker is easy to use for both beginners and experts.
This presentation use docker for serving tiles or running tileserver-gl-light.
JICA Seminar 2023
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/K742LQX2J1.jpg)

Data - Global Map
Digital geographic information
Provided by International Steering Committee for Global Mapping(ISCGM).
Composed of 8 Data Sets
Vector Data (Transportation, Boundaries, Darainage, Population Centre)
Raster Data (Elevation, Vegetation, Land Cover, Land Use)
Free for non-commercial use.
JICA Seminar 2023
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/LJ1MLPNKEG.jpg)

Global Map - archive
Archives and website were moved 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.
JICA Seminar 2023
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/GJW3V24PJ2.jpg)

Global map – format
Vector data provide as Shapefile.
It provided as Geography Markup Language (GML)
format.
Raster data provide as GeoTiff file.
It provided as Band interleaved by line (BIL) format.
JICA Seminar 2023
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/4EZV4D26J3.jpg)

Data – Aerial photograph
https://www.mlit.go.jp/plateau/
In Japan, Plateau Project release too many Aerial photograph data.
Plateau released PointCloud, 3D data, and Aerial photograph.
Aerial photograph is released as GeoTiff data.
It is good sample to create raster tile.
JICA Seminar 2023
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/Y76531VLEV.jpg)

Data - OpenStreetMap
https://www.openstreetmap.org/
OpenStreetMap is the most popular OpenData.
OpenStreetMap provides planet data as PBF format.
Today&#039;s presentation use OpenStreetMap data as sample data.
Use small area data for easy to understand.
JICA Seminar 2023
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/G75YL4DM74.jpg)

Data for this presentation
Global Map Sri Lanka 1.0
https://github.com/globalmaps/gmlk10
Global Map Sri Lanka 2.0
https://github.com/globalmaps/gmlk20
Plateau Higashimurayama City in Tokyo GeoTIFF
https://www.geospatial.jp/ckan/dataset/plateau-13213-higashimurayama-shi2020
OpenStreetMap data
https://tile.opensteetmap.jp/static/planet.pmtiles
JICA Seminar 2023
48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/9J2GLV8RJR.jpg)

How to create your own tiled map
JICA Seminar 2023
49


# Page. 50

![Page Image](https://bcdn.docswell.com/page/DEYVQ365EM.jpg)

Raster tile processing pattern 1: Global map (One
GeoTIFF file)
Download GeoTIFF file from Global Map archive.
Enable transparency.
Convert GeoTIFF to XYZ tile using gdal2tiles.
JICA Seminar 2023
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/VJNMKVZ478.jpg)

How to process
cd ~/jica_scripts/raster_tile_gm
make fetch # Download GeoTIFF file from Global Map archive.
make transparent # Enable transparency.
make generate_tile # Convert GeoTIFF to XYZ tile using gdal2tiles.
make serve # run nginx
JICA Seminar 2023
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/YE9NV6Z4E3.jpg)

How to read Makefile
fetch:
git clone https://github.com/globalmaps/gmlk10.git
transparent:
gdalbuildvrt -srcnodata &quot;0 0 99&quot; el.vrt gmlk10/el.tif
generate_tile:
gdal_translate -of vrt -expand rgba el.vrt temp.vrt
gdal2tiles.py --xyz -s EPSG:4326 -z 0-11 temp.vrt
serve:
docker run -p 8080:80 -v $(PWD)/temp:/usr/share/nginx/html:ro nginx
Makefile is simple to run tasks.
task_name:
command
JICA Seminar 2023
52


# Page. 53

![Page Image](https://bcdn.docswell.com/page/GE8KPZ1V7D.jpg)

Result
Access to http://&lt;your host&gt;.local:8080/leaflet.html
JICA Seminar 2023
53


# Page. 54

![Page Image](https://bcdn.docswell.com/page/LELZ1DQRJR.jpg)

Raster tile processing pattern 2: Plateau (Many
GeoTIFF files)
Generate VRT file from GeoTIFF files.
Convert VRT file to XYZ tile using gdal2tiles.
JICA Seminar 2023
54


# Page. 55

![Page Image](https://bcdn.docswell.com/page/4JMVWP1PJW.jpg)

How to process
cd ~/jica_scripts/raster_tile_plateau
make fetch # Download GeoTIFF file from Plateau archive and unarchive
make buildvrt # Generate VRT file from GeoTIFF files.
make generate_tile # Convert VRT file to XYZ tile using gdal2tiles.
make serve # run nginx
JICA Seminar 2023
55


# Page. 56

![Page Image](https://bcdn.docswell.com/page/PJR2Y1LYE9.jpg)

Result
Access to http://&lt;your host&gt;.local:8080/leaflet.html
JICA Seminar 2023
56


# Page. 57

![Page Image](https://bcdn.docswell.com/page/PEXDGYW47X.jpg)

Vector tile processing pattern: Global map
Download Shapefile file from Global Map archive.
Convert Shapefile to GeoJSON using ogr2ogr.
Convert GeoJSON to Mapbox Vector Tile using tippecanoe.
JICA Seminar 2023
57


# Page. 58

![Page Image](https://bcdn.docswell.com/page/3EKX43VP7D.jpg)

How to process
make
make
make
make
fetch # Download Shapefile file from Global Map archive.
convert # Convert Shapefile to GeoJSON using ogr2ogr.
generate # Convert GeoJSON to Mapbox Vector Tile using tippecanoe.
tileserver-gl # run tileserver-gl-light
JICA Seminar 2023
58


# Page. 59

![Page Image](https://bcdn.docswell.com/page/L735LGM4E5.jpg)

Result
Access to http://&lt;your host&gt;.local:8081/
JICA Seminar 2023
59


# Page. 60

![Page Image](https://bcdn.docswell.com/page/87DDN1657G.jpg)

Makefile (1/3)
fetch:
convert:
JICA Seminar 2023
git clone https://github.com/globalmaps/gmlk20.git
cd gmlk20; \
ogr2ogr airp_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 airp_lka.shp; \
ogr2ogr builtupp_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 builtupp_lka.shp; \
ogr2ogr coastl_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 coastl_lka.shp; \
ogr2ogr inwatera_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 inwatera_lka.shp; \
ogr2ogr polbnda_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 polbnda_lka.shp; \
ogr2ogr polbndl_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 polbndl_lka.shp; \
ogr2ogr raill_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 raill_lka.shp; \
ogr2ogr riverl_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 riverl_lka.shp; \
ogr2ogr roadl_lka.geojson -s_srs EPSG:4326 -t_srs EPSG:4326 roadl_lka.shp
60


# Page. 61

![Page Image](https://bcdn.docswell.com/page/VJPX5QYD78.jpg)

9 outputs
ogr2ogr convert Shapefile to GeoJSON.
Notes: Those Shapefiles are not included .prj file.
JICA Seminar 2023
61


# Page. 62

![Page Image](https://bcdn.docswell.com/page/2EVLP5GGJQ.jpg)

Makefile (2/3)
generate:
tippecanoe -o lka.pmtiles \
-L airp:gmlk20/airp_lka.geojson \
-L builtupp:gmlk20/builtupp_lka.geojson
-L coastl:gmlk20/coastl_lka.geojson \
-L inwatera:gmlk20/inwatera_lka.geojson
-L polbnda:gmlk20/polbnda_lka.geojson \
-L polbndl:gmlk20/polbndl_lka.geojson \
-L raill:gmlk20/raill_lka.geojson \
-L riverl:gmlk20/riverl_lka.geojson \
-L roadl:gmlk20/roadl_lka.geojson
tippecanoe -o lka.mbtiles \
-L airp:gmlk20/airp_lka.geojson \
-L builtupp:gmlk20/builtupp_lka.geojson
-L coastl:gmlk20/coastl_lka.geojson \
-L inwatera:gmlk20/inwatera_lka.geojson
-L polbnda:gmlk20/polbnda_lka.geojson \
-L polbndl:gmlk20/polbndl_lka.geojson \
-L raill:gmlk20/raill_lka.geojson \
-L riverl:gmlk20/riverl_lka.geojson \
-L roadl:gmlk20/roadl_lka.geojson
JICA Seminar 2023
\
\
\
\
62


# Page. 63

![Page Image](https://bcdn.docswell.com/page/57GXPPDDEL.jpg)

2 outputs
tippecanoe runs 2 times and generate 2 outputs.
.mbtiles file
SQLite database file.
Contains vector tile.
.pmtiles file
&quot;Cloud Native&quot; format.
You can host .pmtiles as static file.
JICA Seminar 2023
63


# Page. 64

![Page Image](https://bcdn.docswell.com/page/4EQ8221XJP.jpg)

MBTiles - SQLite database
MBTiles is container of tile.
MBTiles is single file database(SQLite).
TMS schema.
JICA Seminar 2023
64


# Page. 65

![Page Image](https://bcdn.docswell.com/page/KJ42LLR2E1.jpg)

Makefile (3/3)
tileserver-gl:
docker run --rm -it -v $(PWD):/data -p 8080:80 \
maptiler/tileserver-gl-light \
-p 80 --file /data/lka.mbtiles
JICA Seminar 2023
65


# Page. 66

![Page Image](https://bcdn.docswell.com/page/LE1MLLQK7G.jpg)

PMTiles - Cloud Native format
PMTiles is similar to MBTiles.
&quot;Cloud Native&quot; format.
You can easy to convert mbtiles to pmtiles using pmtiles command.
https://smellman.github.io/pmtiles-example/
JICA Seminar 2023
66


# Page. 67

![Page Image](https://bcdn.docswell.com/page/GEW3VVMPE2.jpg)

How to design your own tiled map
JICA Seminar 2023
67


# Page. 68

![Page Image](https://bcdn.docswell.com/page/47ZV44Q6E3.jpg)

Design tiled map
Vector tile doesn&#039;t have a style.
The client renders images with style settings.
In this presentation, we use charites to design tiled map.
Charites convert Style Specification(JSON) to YAML.
YAML is easy to read and write for human.
YAML is easy to edit for beginners.
JICA Seminar 2023
68


# Page. 69

![Page Image](https://bcdn.docswell.com/page/YJ65336L7V.jpg)

Try to edit style
cd ~/jica_scripts/vector_tile
make practice
Open http://&lt;your host&gt;.local:8080/ in your browser.
Open other terminal and run following command.
cd ~/jica_scripts/vector_tile
nano style-practice.yml
JICA Seminar 2023
69


# Page. 70

![Page Image](https://bcdn.docswell.com/page/GJ5YLL6MJ4.jpg)

nano
nano is a simple text editor.
nano is easy to use for
begineer.
Ctrl + O: Save file
Ctrl + X: Exit nano
JICA Seminar 2023
70


# Page. 71

![Page Image](https://bcdn.docswell.com/page/LE35LLQ9J5.jpg)

Remove comments on layers
Remove comments in style-practice.yml.
layers:
- !!inc/file layers/background.yml
# - !!inc/file layers/polbnda.yml
# - !!inc/file layers/riverl.yml
# - !!inc/file layers/inwatera.yml
# - !!inc/file layers/roadl-primary.yml
# - !!inc/file layers/roadl-secondary.yml
# - !!inc/file layers/raill-base.yml
# - !!inc/file layers/raill-dot.yml
# - !!inc/file layers/airp.yml
JICA Seminar 2023
71


# Page. 72

![Page Image](https://bcdn.docswell.com/page/8EDDNN98EG.jpg)

Layers in Maplibre Style Specification
Background
Fill
Line
Symbol
Circle
Raster
Hillshade
Fill Extrusion
It used for 3D rendering.
https://maplibre.org/maplibre-style-spec/
JICA Seminar 2023
72


# Page. 73

![Page Image](https://bcdn.docswell.com/page/V7PX55ZWE8.jpg)

Background layer
id: background
type: background
paint:
background-color: rgb(0,0,0)
JICA Seminar 2023
73


# Page. 74

![Page Image](https://bcdn.docswell.com/page/2JVLPPW97Q.jpg)

Fill layer
id: polbnda
type: fill
source: global_map
source-layer: polbnda
paint:
fill-color: &#039;#f2efe9&#039;
source: global_map means
&quot;global_map&quot; source in sources
section.
source-layer: polbnda means
&quot;polbnda&quot; layer in global_map
source.
JICA Seminar 2023
74


# Page. 75

![Page Image](https://bcdn.docswell.com/page/5EGXPPD4JL.jpg)

Line layer
id: riverl
type: line
source: global_map
source-layer: riverl
paint:
line-color: rgb(0,0,255)
line-width:
base: 1
stops:
- - 6
- 0.5
- - 10
- 2
JICA Seminar 2023
75


# Page. 76

![Page Image](https://bcdn.docswell.com/page/4JQ8221R7P.jpg)

Line layer
Draw line with polyline features.
Normal line.
Dash-array line.
Following example is Normal line + Dash-array line.
JICA Seminar 2023
76


# Page. 77

![Page Image](https://bcdn.docswell.com/page/K742LLRQJ1.jpg)

Filter
roadl-primary.yml and roadl-secondary.yml use filter.
roadl-primary.yml use following filter.
filter:
- all
- - &#039;==&#039;
- rtt
- &#039;14&#039;
&#039;rtt&#039; is a field name in roadl layer and &#039;14&#039; is primary route.
JICA Seminar 2023
77


# Page. 78

![Page Image](https://bcdn.docswell.com/page/LJ1MLLQLEG.jpg)

Zoom function
Zoom function is useful to change style dynamically.
Set Zoom 6 to 1 and Zoom 10 to 6, the value will increase between Zoom 6 and
10.
&quot;base&quot; property will use to control the rate which the function output increases.
&quot;base = 1&quot; will be increased linearly.
https://maplibre.org/maplibre-style-spec/expressions/
JICA Seminar 2023
78


# Page. 79

![Page Image](https://bcdn.docswell.com/page/GJW3VVMQJ2.jpg)

Symbol layer
id: airp
type: symbol
source: global_map
source-layer: airp
layout:
icon-image: airport_11
text-field: &#039;{nam}&#039;
text-offset:
- 0
- 0.6
JICA Seminar 2023
79


# Page. 80

![Page Image](https://bcdn.docswell.com/page/4EZV44Q3J3.jpg)

Symbol layer
Draw symbol with point features.
Icon
Text
Text with icon
Allow Point, Polygon and Polyline features.
JICA Seminar 2023
80


# Page. 81

![Page Image](https://bcdn.docswell.com/page/Y765336ZEV.jpg)

icon-image and text-field
icon-image is a property of symbol layer.
icon-image is a name of icon.
icon-image is defined in sprite.
text-field is a property of symbol layer.
text-field is a name of field in source data.
It can use Feature Properties using {field_name}.
JICA Seminar 2023
81


# Page. 82

![Page Image](https://bcdn.docswell.com/page/G75YLL6974.jpg)

text-offset
text-offset is a property of symbol layer.
text-offset is a offset of text.
It can use array of [x, y].
x and y are offset from center of point.
layout:
icon-image: airport_11
text-field: &#039;{nam}&#039;
text-offset:
- 0
- 0.6
JICA Seminar 2023
82


# Page. 83

![Page Image](https://bcdn.docswell.com/page/9J2GLLM5JR.jpg)

Convert your style via charites
Stop make practice command and run following command.
make build
Makefile
is simple to run tasks.
build:
charites convert style-practice.yml style-practice.json
JICA Seminar 2023
83


# Page. 84

![Page Image](https://bcdn.docswell.com/page/DEYVQQX6EM.jpg)

Result
make serve
Open http://&lt;your host&gt;.local:8000/ in
your browser.
JICA Seminar 2023
84


# Page. 85

![Page Image](https://bcdn.docswell.com/page/VJNMKK5178.jpg)

How to distribute your own tiled map
JICA Seminar 2023
85


# Page. 86

![Page Image](https://bcdn.docswell.com/page/YE9NVVYYE3.jpg)

Raster tile hosting (1)
If you use small number of data only, hosting as static image is easy.
Use nginx or Apache HTTP Server.
Use AWS S3 or Google Cloud Storage.
Github Pages is good for small data and free.
Be careful to license of tile images.
https://docs.github.com/en/pages/getting-started-with-github-pages/about-githubpages
JICA Seminar 2023
86


# Page. 87

![Page Image](https://bcdn.docswell.com/page/GE8KPP6K7D.jpg)

Raster tile hosting (2)
If you use large number of data, be careful to hosting.
File system limitation: max number of files.
Ext4 on Linux: 4,294,967,295 files(specified at filesystem creation time)
File copy will take a long time.
MBTiles is a solution to hosting large number of data.
MBUtil is useful to create .mbtiles from tile images.
mb-util temp/ el.mbtiles
JICA Seminar 2023
87


# Page. 88

![Page Image](https://bcdn.docswell.com/page/LELZ119PJR.jpg)

Vector tile hosting - tileserver-gl
Tileserver GL is useful.
But vector tiles needs SSL access in internet.
Let&#039;s encrypt is useful to get SSL certificate.
https://letsencrypt.org/
Setup frontend server(Apache/nginx/etc) and connect from server with reverse
proxy.
JICA Seminar 2023
88


# Page. 89

![Page Image](https://bcdn.docswell.com/page/4JMVWWZ2JW.jpg)

Overview - nginx
JICA Seminar 2023
89


# Page. 90

![Page Image](https://bcdn.docswell.com/page/PJR2YY65E9.jpg)

Reverse proxy setting
Nginx is easy to setup reverse proxy.
location / {
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://localhost:8080;
}
JICA Seminar 2023
90


# Page. 91

![Page Image](https://bcdn.docswell.com/page/PEXDGGMX7X.jpg)

Server-side rendering
Tileserver GL can deliver raster
tile if you host style.
But rendering is slow.
If you use this function,
you should use cache
server.
JICA Seminar 2023
91


# Page. 92

![Page Image](https://bcdn.docswell.com/page/3EKX44G97D.jpg)

Tileserver GL - cache
Use varnish cache for raster
rendering.
https://varnish-cache.org/
https://tile.openstreetmap.jp/ use
varnish cache.
20 processs run.
20Core CPU and 64GB
RAM.
JICA Seminar 2023
92


# Page. 93

![Page Image](https://bcdn.docswell.com/page/L735LLN9E5.jpg)

Vector tile hosting - pmtiles
PMTiles is useful to hosting vector tile.
PMTiles is &quot;Cloud Native&quot; format.
PMTiles is easy to host as static file.
Nginx / Apache / AWS S3 / Google Cloud Storage etc.
https://github.com/protomaps/PMTiles
JICA Seminar 2023
93


# Page. 94

![Page Image](https://bcdn.docswell.com/page/87DDNNW87G.jpg)

PMTiles nginx setting - CORS setting
add_header
add_header
add_header
add_header
&#039;Access-Control-Allow-Origin&#039; &quot;$http_origin&quot; always;
&#039;Access-Control-Allow-Credentials&#039; &#039;true&#039; always;
&#039;Access-Control-Allow-Methods&#039; &#039;GET, POST, PUT, DELETE, OPTIONS&#039; always;
&#039;Access-Control-Allow-Headers&#039; &#039;Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,Range,User-Agent,X-Requested-With&#039; always;
if ($request_method = &#039;OPTIONS&#039;) {
# Tell client that this pre-flight info is valid for 20 days
add_header &#039;Access-Control-Allow-Origin&#039; &quot;$http_origin&quot; always;
add_header &#039;Access-Control-Allow-Headers&#039; &#039;Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,Range,User-Agent,X-Requested-With&#039; always;
add_header &#039;Access-Control-Max-Age&#039; 1728000;
add_header &#039;Content-Type&#039; &#039;text/plain charset=UTF-8&#039;;
add_header &#039;Content-Length&#039; 0;
return 204;
}
see: https://github.com/smellman/pmtiles-example
JICA Seminar 2023
94


# Page. 95

![Page Image](https://bcdn.docswell.com/page/VJPX559W78.jpg)

Static hosting usecase - IPFS
IPFS is a peer-to-peer hypermedia protocol.
https://ipfs.tech/
IPFS is useful to hosting static files.
IPFS is useful to hosting PMTiles.
JICA Seminar 2023
95


# Page. 96

![Page Image](https://bcdn.docswell.com/page/2EVLPPM9JQ.jpg)

IPFS - How to start daemon
cd ~/jica_scripts/system
make ipfs-init
make ipfs-daemon
JICA Seminar 2023
96


# Page. 97

![Page Image](https://bcdn.docswell.com/page/57GXPPG4EL.jpg)

IPFS - How to add file
cd ~/jica_scripts/vector_tile
make ipfs
Output CID is IPFS Content Identifier.
added QmRSsj5FstJt8Rvrvp4GKG4i77yRredn8eHAuYoNkKhWpW lka.pmtiles
JICA Seminar 2023
97


# Page. 98

![Page Image](https://bcdn.docswell.com/page/4EQ822XRJP.jpg)

IPFS - How to access
Copy CID, then.
nano style-ipfs.yml
Paste CID to sources section.
sources:
global_map:
type: vector
url: &gt;pmtiles://https://smb.optgeo.org/ipfs/&lt;Your CID&gt;
https://smb.optgeo.org/ipfs/ is IPFS gateway server running by Hidenori Fujimura.
JICA Seminar 2023
98


# Page. 99

![Page Image](https://bcdn.docswell.com/page/KJ42LL6QE1.jpg)

IPFS - How to access
cd ~/jica_scripts/vector_tile
make build-ipfs
make serve
Open http://&lt;your host&gt;.local:8000/index-ipfs.html in your browser.
JICA Seminar 2023
99


# Page. 100

![Page Image](https://bcdn.docswell.com/page/LE1MLLVL7G.jpg)

copyright
This presentation is licensed under CC BY 4.0.
All pictures with OpenStreetMap images are licensed under CC BY-SA 2.0.
© OpenStreetMap contributors
JICA Seminar 2023
100


