Home

Awesome

mapgl-tile-renderer

Publish to DockerHub

This headless Node.js MapGL renderer can be used to generate styled raster tiles in an MBTiles or Styled Map Package format. It can work with self-provided tilesets and a stylesheet, or an online API source with optional GeoJSON and OpenStreetMap data overlays.

The motivation to build this utility is to create offline background maps for use in mobile data collection applications, such as Mapeo / CoMapeo, ODK Collect, Kobo Collect, Locus Map or other offline-compatible tools that can work with self-hosted tiles like Terrastories. However, it can be helpful for any use case where having self-hosted raster tileset is a requirement.

This tool started as an extension of mbgl-renderer, which was built to export single static map images. Our thanks go out to the contributors of that project.

Usage

This tool can be used in the following ways:

  1. Via CLI (npm, Node.js or Docker)
  2. Using a Github template to generate tiles using a manifest.json.
  3. As a task worker service to poll a queue for new requests, and update a database table with the render results.
    • Currently supported: Azure Storage Queue and PostgreSQL.
    • The tool may be extended with RabbitMQ for self-hosting in the future.

Supported online API sources

❗️ To use these services, you are responsible for providing your own API token, and abiding by the service's terms of use. In doing so, please carefully consult the terms of service and API limitations for each service.

Please see the CLI options below for information on how to leverage these API sources.

If you would like to request the addition of an online API source that is not currently supported, please file an issue or submit a PR.

Note that depending on your bounding box and maximum zoom level, this tool has the capability to send a lot of requests. You can use a utility like the Mapbox offline tile count estimator to ensure that your request will be reasonable, and in the case of any API sources with a freemium API limit, won't end up costing you.

Install via npm

To install the tool using npm, run:

$ npm install -g mapgl-tile-renderer

CLI options

If using a self-provided style (--style self):

If using an online style (--style with any online style name):

If using any of the imagery online styles without labels ("bing", "esri", "google", "mapbox-satellite", or "planet"):

If your style is mapbox:

If your style is planet:

Common options:

CLI example usage

Using a self-provided style:

mapgl-tile-renderer --style self --stylelocation tests/fixtures/alert/style-with-geojson.json --stylesources tests/fixtures/alert/sources --bounds "-79,37,-77,38" -Z 8

From an online source (Bing), with OpenStreetMap data overlaid:

mapgl-tile-renderer --style bing --bounds "-79,37,-77,38" --openstreetmap true -Z 8 --apikey YOUR_API_KEY_HERE

From an online source (Mapbox), SMP output:

mapgl-tile-renderer --style mapbox --mapboxstyle YOUR_USERNAME/YOUR_MAPBOX_STYLE_ID --apikey YOUR_API_KEY_HERE --bounds "-79,37,-77,38" -Z 8 -F smp

From an online source (Planet):

mapgl-tile-renderer --style planet --monthyear 2013-12 --apikey YOUR_API_KEY_HERE --bounds "-54,3,-53,4" -Z 8

Online source (Esri) with GeoJSON overlay:

mapgl-tile-renderer --style esri --apikey YOUR_API_KEY_HERE --bounds "-54,3,-53,4" -Z 8 --overlay '{"type": "FeatureCollection", "features": [{"geometry": {"coordinates": [[[-54.25348208981326, 3.140689896338671], [-54.25348208981326, 3.140600064810259], [-54.253841415926914, 3.140600064810259], [-54.25348208981326, 3.140689896338671]]], "geodesic": false, "type": "Polygon"}, "id": "-603946+34961", "properties": {"month": "09", "year": "2023"}, "type": "Feature"}]}'

Docker

To run the tool with Docker, run:

docker run -it --rm -v "$(pwd)":/app/outputs communityfirst/mapgl-tile-renderer --style "mapbox" --bounds "-79,37,-77,38" -Z 8 --mapboxstyle YOUR_USERNAME/YOUR_MAPBOX_STYLE_ID --apikey YOUR_API_KEY_HERE

This automatically pulls the latest image from Docker hub. The docker run command is used to execute the mapgl-tile-renderer tool with a set of options that define how the map tiles will be rendered and saved. Here's a breakdown of the command and its variables:

To run locally first build the Docker image:

docker build -t mapgl-tile-renderer .

Then run:

docker run -it --rm -v "$(pwd)":/app/outputs/ mapgl-tile-renderer --style "mapbox" --bounds "-79,37,-77,38" -Z 8 --mapboxstyle YOUR_USERNAME/YOUR_MAPBOX_STYLE_ID --apikey YOUR_API_KEY_HERE

Task worker listening to message queue

mapgl-tile-renderer can be configured as a task worker that listens for messages from a queue service, as submitted via a tool like map-packer. Upon retrieval of a message, the tool will initiate rendering, store the file on the container (ideally a volume mount location), and update a PostgreSQL table with the render results.

To set up mapgl-tile-renderer as a task worker, deploy the Docker image and provide the following environmental variables:

For Azure Storage Queue (and other queue services in the future), mapgl-tile-renderer expects a message with a JSON body, composed of the various input options. Example:

{
  "style": "bing",
  "apiKey": "bing-api-key",
  "bounds": "-79,37,-77,38",
  "minZoom": 0,
  "maxZoom": 8,
  "outputFilename": "bing"
  "outputDir": "/maps"
}

Note that outputDir likely needs to be a volume mount directory on your mapgl-tile-renderer container, so that it can be accessed by map-packer or other tools for sharing and downloading.

For more information on the complete flow where mapgl-tile-renderer is deployed as a task worker, see the map-packer documentation.

Running with Github Actions

To use the Github Actions workflow defined in .github/workflows/gen-tiles-input.yml for generating tiles, follow these steps:

  1. Fork the repository containing the workflow file.
  2. Navigate to your forked repository on Github.
  3. Click on the "Actions" tab.
  4. You will see a list of available workflows. Click on the "Generate Tiles from Input" workflow.
  5. Click on the "Run workflow" dropdown button.
  6. Fill in the required and optional input fields. See CLI options above for the list of fields.
  7. After providing the necessary information in the input fields, click on the "Run workflow" button to initiate the tile generation process.
  8. The workflow will execute the steps defined in gen-tiles-input.yml and upon completion, the generated tiles will be available as artifacts in the workflow run.

Make sure to review the gen-tiles-input.yml file to understand the inputs and outputs of the workflow.

Inspect the outputs

To examine and inspect MBTiles files:

  1. Load them in QGIS.
  2. Open them in this MBTiles Viewer webpage.
  3. Upload them to a Felt map.

To examine and inspect SMP files:

  1. Open them in this SMP Viewer webpage.

Formats other than MBTiles or SMP

In the future, we may decide to extend this tool to support creating raster tiles in a different format, such as XYZ or PMTiles. However, for the time being, you can use tools like tippecanoe or go-pmtiles to convert the MBTiles outputs generated by this tool.

For developers

Mapgl-tile-renderer uses Maplibre-GL Native to render tiles, Sharp to save them as an image, Mapbox's mbtiles to compile them into an MBTiles database (which is a SQLite file), and Awana Digital's styled-map-package to convert MBTiles to SMP.

Node installation requirements

Node version: 18.17.0 to 20.x.x.

(Sharp requires 18.17.0 at minimum, and MapLibre Native is currently only supported on stable releases of Node, 20 being the latest)

Tests

To run tests and view coverage, run:

npm run test

To run tests that require an access token, create a .env.test file and add the respective token vars (e.g. MAPBOX_TOKEN, PLANET_TOKEN, PROTOMAPS_TOKEN, STADIA_TOKEN). If not provided, tests requiring these will be skipped.