Quick start

Show a Tilehouse map on your site with MapLibre GL JS. You need an API key, and every request to our host carries it: the style, and the tiles, fonts and sprites the style points to.

1. Get a key

Sign up and create a key in the portal, or ask for a pilot. Lock the key to the domains your map runs on: a request from any other site is refused.

2. Load MapLibre

If your site doesn't use MapLibre GL JS yet, install it, import it with its stylesheet, and give the map a container with a height.

npm install maplibre-gl

import * as maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

// and in your page: <div id="map" style="height: 400px"></div>

3. Create the map

Replace YOUR_KEY with your key. The transformRequest function adds it to every request to tiles.tilehouse.io and leaves any other request alone.

const KEY = 'YOUR_KEY';
const HOST = 'tiles.tilehouse.io';

const map = new maplibregl.Map({
  container: 'map',
  style: `https://${HOST}/styles/liberty?key=${KEY}`,
  center: [-0.1, 51.5],
  zoom: 13,
  // The style points at our tiles, fonts and sprites,
  // and each of those needs the key too.
  transformRequest: (url) => {
    const u = new URL(url);
    if (u.host !== HOST) return { url };
    u.searchParams.set('key', KEY);
    return { url: u.toString() };
  }
});

Styles

Five styles, from OpenFreeMap: swap liberty in the style URL for any of them.

• bright
• liberty
• positron
• dark
• fiord

Moving from OpenFreeMap

Our styles are OpenFreeMap's, so the map looks the same. Change the style URL's host to tiles.tilehouse.io and add the transformRequest above. The style already points its tiles, fonts and sprites at our host.

When a request is refused

• 401: no key, or a key we don't know.
• 403: the key is locked to other domains than the page's.
• 429: over the key's rate limit.

Credits

Keep MapLibre's attribution control on the map. It shows the OpenFreeMap, OpenMapTiles and OpenStreetMap credits that the data's licence requires.