COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and Visualized with MapLibre GL JS
Tags: foss4g, maplibre, s3, cloudoptimized
Published: 2022-12-23 11:33:22

![img](https://day-journal.com/memo/images/try-098_23.png)

<br>

### I have COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and visualized with MapLibre GL JS :tada:

<br>

## Cloud Optimized

![img](https://day-journal.com/memo/images/try-098_01.png)

Cloud Optimized is a cloud-optimized format that enables a single file to process requests for massive location data that previously required a map delivery server and tile splitting process.

The features that personally struck me are as follows.
- Only a part of a vast file can be requested.
- Only a single file needs to be placed in storage to process requests from the front end.
- No need for a map distribution server
- No pre-tiling process (vector tiles and raster tiles) is required.
- Fast rendering

Rasters are
"[COG(Cloud Optimized GeoTIFF)](https://www.cogeo.org)"
Point cloud is
"[COPC(Cloud Optimized Point Cloud)](https://copc.io)"
These formats are stable.

For vector files, there are many formats, and they are not yet settled.
- [FlatGeobuf](http://flatgeobuf.org)  
- [Zarr](https://zarr.readthedocs.io)
- [GeoParquet](https://github.com/opengeospatial/geoparquet)
- [PMTiles](https://github.com/protomaps/PMTiles)
- [COMTiles(Cloud Optimized Map Tiles)](https://github.com/mactrem/com-tiles)

<br>

## COMTiles(Cloud Optimized Map Tiles)

![img](https://day-journal.com/memo/images/try-098_24.png)  

How COMTiles works: [com-tiles-spec](https://github.com/mactrem/com-tiles/tree/main/packages/spec)

This time I examined [COMTiles(Cloud Optimized Map Tiles)](https://github.com/mactrem/com-tiles). COMTiles are often compared to PMTiles, but I have the impression that PMTiles are becoming more popular these days. The technology of COMTiles is excellent, but it is not yet easy to introduce because the library is not published in “npm,” and the documentation is incomplete. One of the reasons for PMTiles' popularity is due in part to its extensive documentation. This article will be of some help to those who are considering introducing COMTiles!

## Advance Preparation
Prepare "[MBTiles](https://github.com/mapbox/mbtiles-spec)" to store map tiles built-in SQLite for conversion of COMTiles.

In general, map tiles (MBTiles) can be created with OpenStreetMap and proprietary data by using the following tools.
- [Tilemaker](https://github.com/systemed/tilemaker)
- [Planetiler](https://github.com/onthegomap/planetiler) 
- [OpenMapTiles](https://github.com/openmaptiles/openmaptiles)
- [tippecanoe](https://github.com/felt/tippecanoe)

This time, I wanted to prepare data easily, so I used MapTiler DATA by [MapTiler](http://maptiler-affiliate-program.sjv.io/BXrxx9), which allows you to download map tiles (MBTiles) for a specified area.

Click DOWNLOAD DATA in OpenStreetMap basemaps.
![img](https://day-journal.com/memo/images/try-098_02.png)

Enter any region in the search window and select it → Click DOWNLOAD. In this case, I selected JAPAN.
![img](https://day-journal.com/memo/images/try-098_03.png)

Since I will use it for personal verification, click on NON-COMMERCIAL PERSONAL PROJECT → Click on FREE DOWNLOAD.
![img](https://day-journal.com/memo/images/try-098_04.png)

<br>

You can now download the MBTiles you wish to use. Rename the downloaded data to "sample.mbtiles".

<br>
<br>

Execution environment
- node v18.1.0  
- npm v8.19.2  

<br>

The following is explained in detail.
- Building the Environment
- Convert MBTiles to COMTiles
- Create style.json and tiles.json
- Host data for distribution on Amazon S3
- Display COMTiles with MapLibre GL JS

## Building the Environment
First, we will build an environment for converting MBTiles to COMTiles.

For the environment, fork "[zimmermannpeter/com-tiles](https://github.com/zimmermannpeter/com-tiles)," a forked version of the original, or download and use it. We chose "zimmermannpeter/com-tiles" because as of December 2022, the original "[mactrem/com-tiles](https://github.com/mactrem/com-tiles)" is still under pull request and has improved documentation and MapLibre GL JS display environment.

Overall composition
![img](https://day-journal.com/memo/images/try-098_05.png)

Runs in the root of com-tiles.

```sh
npm install
```

Runs in packages/provider.

```sh
npm run build
```

![img](https://day-journal.com/memo/images/try-098_06.png)
![img](https://day-journal.com/memo/images/try-098_07.png)

Runs in packages/mbtiles-converter.

```sh
npm run build
```

![img](https://day-journal.com/memo/images/try-098_08.png)  

Runs in the root of com-tiles.

```sh
npm audit fix --force
npm install -g ./packages/mbtiles-converter
```

<br>

Now you have the commands available for conversion!

<br>

## Convert MBTiles to COMTiles
Next, I will show you how to convert MBTiles to COMTiles. 

Copy the MBTiles downloaded in advance to the root of com-tiles.
![img](https://day-journal.com/memo/images/try-098_09.png)

You can find the command in the help section.

```sh
convert-comtiles -h
```

![img](https://day-journal.com/memo/images/try-098_10.png)

Execute the convert-comtiles command to convert them.

```sh
convert-comtiles -i sample.mbtiles -o sample.comt
```

![img](https://day-journal.com/memo/images/try-098_11.png)

After executing the command, COMTiles will be created from MBTiles.
![img](https://day-journal.com/memo/images/try-098_12.png)

This completes the conversion from MBTiles to COMTiles!

<br>

## Create style.json and tiles.json
Next, I will show you how to create style.json and tiles.json.  

Create a bucket in Amazon S3 and set the URL in advance.
![img](https://day-journal.com/memo/images/try-098_13.png)

Modify the following style.json and tiles.json.
![img](https://day-journal.com/memo/images/try-098_14.png)

<br>

/packages/maplibre-provider/demo/assets
#### style.json
Specify the Amazon S3 URL to be uploaded plan in "url" and "glyphs." “url" is the URL of style.json and "glyphs" is the URL of the font.

```json
{
  "version": 8,
  "name": "Basic",
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://com-tiles-202212.s3.ap-northeast-1.amazonaws.com/assets/tiles.json"
    }
  },
  "glyphs": "https://com-tiles-202212.s3.ap-northeast-1.amazonaws.com/assets/fonts/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {"background-color": "hsl(47, 26%, 88%)"}
    },
.....
```

<br>
<br>

/packages/maplibre-provider/demo/assets
#### tiles.json
Specify the Amazon S3 URL to be uploaded plan in "tiles." “tiles" is the URL of COMTiles. “comt://" is necessary when specifying COMTiles.

```json
{
  "tilejson": "2.0.0",
  "name": "maplibre",
  "attribution": "<a href=\"https://www.maptiler.com/copyright/\" target=\"_blank\">&copy; MapTiler</a> <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">&copy; OpenStreetMap contributors</a>",
.....
  "extent": [
    -20037508.342789244,
    -20037508.6269291,
    20037508.342789244,
    20037508.626929108
  ],
  "center": [
    0,
    0,
    0
  ],
  "tiles": [
    "comt://https://com-tiles-202212.s3.ap-northeast-1.amazonaws.com/data/sample.comt/{z}/{x}/{y}"
  ]
}
```

<br>

This completes the creation of style.json and tiles.json!

<br>

## Host data for distribution on Amazon S3
Next, host the COMTiles, style.json, tiles.json, and fonts directories on Amazon S3. 

Upload the COMTiles, style.json, and tiles.json directories created in the previous step, and for the fonts directory, upload "/packages/maplibre-provider/debug/assets/fonts." 
![img](https://day-journal.com/memo/images/try-098_15.png)

Set the target bucket of Amazon S3 to the public. This time, I used the public settings for the sample, but I recommend limited public settings for production use.
[Trying Out Various Settings for Amazon S3 Publishing](https://dev.to/aws-builders/trying-out-various-settings-for-amazon-s3-publishing-2hd1)
![img](https://day-journal.com/memo/images/try-098_16.png)

This is the directory structure of the target bucket. This time, we created "assets" and "data" directories.
![img](https://day-journal.com/memo/images/try-098_17.png)

Upload style.json, tiles.json, and fonts directories to the assets directory.
![img](https://day-journal.com/memo/images/try-098_18.png)

Upload COMTiles to the data directory.
![img](https://day-journal.com/memo/images/try-098_19.png)

You are now ready to host your data for distribution on Amazon S3!

<br>

## Display COMTiles with MapLibre GL JS
Finally, we will display the COMTiles in MapLibre GL JS. Modify only the "/packages/maplibre-provider/demo/index.html" of the demo.  

Overall composition
![img](https://day-journal.com/memo/images/try-098_20.png)

<br>

/packages/maplibre-provider/demo
#### index.html
Specify the uploaded Amazon S3 URL in "style." “URL" is the URL of style.json. Change "center" and "zoom" to the area you want to display. In this case, we set them to the Tokyo area.

```html
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>MapLibre COMT Demo</title>

        <script src="dist/maplibre-gl.js"></script>
        <link href="dist/maplibre-gl.css" rel="stylesheet" />
        <script src="dist/maplibreComtProvider.js"></script>

        <style>
            body,
            #map {
                height: 100vh;
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            comtiles.MapLibreComtProvider.register();
            const map = new maplibregl.Map({
                container: "map",
                style: "https://com-tiles-202212.s3.ap-northeast-1.amazonaws.com/assets/style.json",
                center: [139.767, 35.681],
                zoom: 11,
            });
            map.addControl(new maplibregl.NavigationControl({}));
        </script>
    </body>
</html>
```

Load the library for displaying COMTiles.

```html
<script src="dist/maplibreComtProvider.js"></script>
```

Load MapLibreComtProvider.

```javascript
comtiles.MapLibreComtProvider.register();
```

Specify the style.json URL for the style.

```javascript
style: "https://com-tiles-202212.s3.ap-northeast-1.amazonaws.com/assets/style.json",
```

<br>

For this display environment, execute the simple local server and check it. After execution, access "http://localhost:8080".

/packages/maplibre-provider/demo

```sh
python -m http.server 8080
```

![img](https://day-journal.com/memo/images/try-098_21.png)

<br>

Using COMTiles, I could visualize a huge single file (vector tiles) in MapLibre GL JS without a map distribution server! Also, it renders fast!
![img](https://day-journal.com/memo/images/try-098_22.png)
![img](https://day-journal.com/memo/images/try-098_23.png)

<br>

Related Articles
{% link https://dev.to/aws-heroes/vite-support-for-various-map-library-starters-4m82 %}
{% link https://dev.to/aws-builders/trying-out-various-settings-for-amazon-s3-publishing-2hd1 %}

<br>

References
[zimmermannpeter/com-tiles](https://github.com/zimmermannpeter/com-tiles)