Put your map on the web

The map files a bake writes are standard: vector tiles in a PMTiles archive, and a MapLibre style. Any recent MapLibre GL JS page can show them. That lets you put the map of your game world on a website, a wiki or a companion app, with the same look as in the game.

This page shows a small web page that does it. It was tested with MapLibre GL JS 6.16.0 and PMTiles 4.5.0 on the demo island.

What to copy

Open Assets/StreamingAssets/Worldprint/<scene>/ (see Make a player build) and copy these into a folder called map next to your web page:

style.json	The Topographic theme. The other themes are style-tanaka.json, style-papier.json, style-osm.json, style-parchemin.json, style-tactique.json and style-cartoon.json, and any style you made with New Custom Style.
tiles.pmtiles	The map tiles.
shade.pmtiles	The shaded relief drawn under the map.
fonts/	The fonts of the labels.
sprites/	The icons.

Leave the .meta files and terrain.json behind: a web page does not need them.

The page

Save this as index.html, next to the map folder:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Worldprint map</title>
  <link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet">
  <style>html, body, #map { margin: 0; height: 100%; }</style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/pmtiles@4.5.0/dist/pmtiles.js"></script>
  <script type="module">
    import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs';

    maplibregl.addProtocol('pmtiles', new pmtiles.Protocol().tile);

    const base = new URL('map/', location.href).href;
    const style = await (await fetch(base + 'style.json')).json();
    for (const source of Object.values(style.sources)) {
      if (source.url.startsWith('pmtiles://')) source.url = 'pmtiles://' + base + source.url.slice(10);
    }
    style.glyphs = base + style.glyphs;
    style.sprite = base + style.sprite;

    new maplibregl.Map({ container: 'map', style });
  </script>
</body>
</html>

The for loop and the two lines after it are needed. The style written by the bake gives its files by a short path such as pmtiles://tiles.pmtiles, which Worldprint resolves next to the style. MapLibre GL JS does not, so the page turns them into full addresses first.

Host it

Put index.html and the map folder on any static web host. The host must support HTTP range requests, because a PMTiles archive is read piece by piece instead of being downloaded whole. Most hosts do. A local test server does not always: Python’s built-in http.server does not, and the page then shows an empty map.

The map is placed near longitude 0 and latitude 0, which is not a real place. The style tells MapLibre where to start, so the page opens on your map without any setup.

When something is wrong

• The page is blank, and there is no error. The host probably does not support range requests. Try another host, or open the browser’s network tab: the .pmtiles requests should answer 206, not 200.

• The map shows, but not the labels. The fonts folder is missing, or its address is wrong.

• The console warns about an image named _11. A label has no icon. The warning is harmless.

• An old MapLibre version shows nothing. The tiles use the MLT format, which only recent versions of MapLibre GL JS read. Use the version in the example above, or a newer one.