## Introduction
At the conclusion of the previous tutorial, "How to Download the Egypt Buildings Dataset," we have successfully obtained a 7 GB GeoPackage containing more than 14 million buildings across Egypt.
Today's journey involves visualizing this data on a web map without the need for a server (bypassing the use of GeoServer or ArcGIS Server).
#### Interactive Demo - *Zoom into any part of Egypt to display the buildings*
<iframe src="https://youssef-harby.github.io/maplibre-pmtiles-tutorial/" width="100%" height="420" style="border:1px solid black;">
</iframe>
## Convert the Data to Vector Tiles Format (PMTiles) and Upload It to an Object Storage Bucket
### Conversion to PMTiles Format
1. Download the #GeoPackge file from the previous article [[How to Download the Egypt Buildings Dataset#Download the processed data]]
2. Convert data from any format (in our case, GeoPackage) to a .pmtiles file using the following command:
```bash
ogr2ogr -f "PMTiles" egypt_buildings_vt.pmtiles egypt_overturemaps.gpkg -lco MINZOOM=8 -lco MAXZOOM=14
```
3. To test the PMTiles file, visualize it on the PMTiles Viewer website by dragging and dropping your file at [https://protomaps.github.io/PMTiles/](https://protomaps.github.io/PMTiles/).
![[Pasted image 20240207194625.png]]
### Uploading to an S3 Bucket
I am using [Storj](https://www.storj.io/), which offers 25 GB of free storage. You can sign up and upload the PMTiles as follows:
1. Create your bucket and upload your PMTiles file.
![[Pasted image 20240207195449.png]]
2. Share a URL and modify the `/s/` part in the URI to `/raw/`. For instance, if our shared URL from Storj is:
```
https://link.storjshare.io/s/jx27glma3bdtbrb4k6foyh6j4zvq/truemaps-public%2Fpublic-datasets%2Foverturemaps%2F2024-01-17-alpha.0%2Ftheme%3Dbuildings%2Fegypt_buildings_vt.pmtiles
```
Change it to:
```
https://link.storjshare.io/raw/jxqj5ixgrdniigc7f23mogdzeirq/truemaps-public%2Fpublic-datasets%2Foverturemaps%2F2024-01-17-alpha.0%2Ftheme%3Dbuildings%2Fegypt_buildings_vt.pmtiles
```
3. Re-test the shared PMTiles in the PMTiles Viewer with the remote URL: [https://protomaps.github.io/PMTiles/?url=https%3A%2F%2Flink.storjshare.io%2Fraw%2Fjun7ixv3kwdnmamaydoffq2h7wmq%2Ftruemaps-public%252Fpublic-datasets%252Foverturemaps%252F2024-01-17-alpha.0%252Ftheme%253Dbuildings%252Fegypt_buildings_vt.pmtiles#map=15.43/30.069165/31.346713](https://protomaps.github.io/PMTiles/?url=https%3A%2F%2Flink.storjshare.io%2Fraw%2Fjun7ixv3kwdnmamaydoffq2h7wmq%2Ftruemaps-public%252Fpublic-datasets%252Foverturemaps%252F2024-01-17-alpha.0%252Ftheme%253Dbuildings%252Fegypt_buildings_vt.pmtiles#map=15.43/30.069165/31.346713)
![[Pasted image 20240207200744.png]]
## Create a Web Map Using MapLibre to Visualize Vector Tiles Data
You can view the end result at this URL: [https://youssef-harby.github.io/maplibre-pmtiles-tutorial/](https://youssef-harby.github.io/maplibre-pmtiles-tutorial/).
![[Pasted image 20240207210538.png]]
The full source code is available on GitHub: [https://github.com/Youssef-Harby/maplibre-pmtiles-tutorial](https://github.com/Youssef-Harby/maplibre-pmtiles-tutorial).
## Youtube Video (Arabic)
## REF
- https://gdal.org/drivers/vector/pmtiles.html
- https://github.com/protomaps/PMTiles/blob/main/js/examples/maplibre.html