# BeNomad Tiles

Vector map tiles, styles and fonts for MapLibre on the web and on mobile, with 3D buildings, terrain and the globe.

See it live: [BeNomad Tiles demo](https://mptiles-demo.benomad.net/).

## Add it to your application

Vector tiles drawn in your browser by the BeMap JS API on MapLibre: the default BeNomad map of the environment, straight from BeNomad Tiles. The page draws this map live with your own account.

With the BeMap JS API 2.0.4, the release the page's live map runs, or with the library you already use. Replace `YOUR_ACCOUNT` and `YOUR_API_KEY` with your own.

### BeMap JS API

```html
<!-- The BeMap JS API and the engine it drives -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/maplibre-gl.css" integrity="sha256-qx5w1Z7EBGW65+cDDaLzzPKBM/1QLmK9WY7vut/XpzI=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.css" integrity="sha256-6JTuf+5yR2uKDbRMVCKVkicMghqX/fopHJUUH0a9IwE=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/maplibre-gl.js" integrity="sha256-RamwepGJzlYFTGIKlHzPQeKR5YyV6bYVM7dAqqZe5cs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/pmtiles.js" integrity="sha256-9c3A9bJWe6KCmo4QL39UNh8Ig9oxFaFuxcqQlz8sz2c=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.min.js" integrity="sha256-9nw1Dpfl6zDEakYlPDODJHrz9RvsqjZ+HttOFJNJMss=" crossorigin="anonymous"></script>

<div id="map" style="height: 480px"></div>
<script>
  var ctx = new bemap.Context({
    host: 'bemap.benomad.com', secure: true,
    login: 'YOUR_ACCOUNT', password: 'YOUR_API_KEY', // for evaluation: in production, use the proxy option
    tilesHost: 'mptiles-api.benomad.net'
  });
  var map = new bemap.MapLibreMap(ctx, 'map');
  map.move(2.35, 48.85, 12); // longitude, latitude, zoom
</script>
```

### MapLibre GL JS

```javascript
// MapLibre GL JS alone, in a <script type="module">.
const TILES = 'https://mptiles-api.benomad.net';
const ACCOUNT = 'YOUR_ACCOUNT', KEY = 'YOUR_API_KEY'; // for evaluation: in production, get the token from your server

// 1. A token, valid for about an hour.
const login = await fetch(`${TILES}/api/login`, { method: 'POST', headers: { Authorization: 'Basic ' + btoa(`${ACCOUNT}:${KEY}`) } });
if (!login.ok) throw new Error(`login: HTTP ${login.status}`);
const { token } = await login.json();

// 2. /api/default-style names the default style; the style comes next.
const auth = { headers: { 'X-Session-Token': token } };
const { default: path } = await (await fetch(`${TILES}/api/default-style`, auth)).json();
const style = await (await fetch(`${TILES}/${path}`, auth)).json();

// 3. Its URLs are relative to the tiles server, and each carries the token.
const withToken = (url) => {
  const full = url.startsWith('/') ? TILES + url : url;
  return full.startsWith(TILES) ? `${full}${full.includes('?') ? '&' : '?'}token=${token}` : full;
};
for (const source of Object.values(style.sources)) {
  if (source.url) source.url = withToken(source.url);
  if (source.tiles) source.tiles = source.tiles.map(withToken);
}
for (const key of ['glyphs', 'sprite']) if (typeof style[key] === 'string') style[key] = withToken(style[key]);

new maplibregl.Map({ container: 'map', style, center: [2.35, 48.85], zoom: 12 });
```

### curl

```bash
# 1. Sign in: a token valid for about an hour
TOKEN=$(curl -s -X POST 'https://mptiles-api.benomad.net/api/login' -u 'YOUR_ACCOUNT:YOUR_API_KEY' \
  | sed -n 's/.*"token":"\([^"]*\)".*/\1/p')

# 2. The environment's default map, and the name of its default style
curl -s -w '\n' -H "X-Session-Token: $TOKEN" 'https://mptiles-api.benomad.net/api/default'
curl -s -w '\n' -H "X-Session-Token: $TOKEN" 'https://mptiles-api.benomad.net/api/default-style'

# 3. One vector tile, a gzip-encoded Mapbox Vector Tile: --compressed inflates it, once
curl -s --compressed -o tile.mvt -H "X-Session-Token: $TOKEN" \
  'https://mptiles-api.benomad.net/default/12/2074/1409.pbf'
```

On mobile and on a server, read the same map as z/x/y vector tiles: [Mobile & fleet: z/x/y tiles](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-mobile-zxy.md).

## Guides

- [Overview & access](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-overview.md)
- [Sessions & tokens](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-auth.md)
- [Web: PMTiles](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-web-pmtiles.md)
- [Mobile & fleet: z/x/y tiles](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-mobile-zxy.md)
- [Styles & BeMaputnik](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-styles.md)
- [Cache, slices & resilience](https://benomad.com/dev/doc/bemap-api/guides/maps/tiles-cache.md)
- [WMS → BeNomad Tiles](https://benomad.com/dev/doc/bemap-api/guides/maps/migration-wms-to-tiles.md)

## With the BeMap JS API

- [BeNomad Tiles (live demo)](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-bemap-tiles.html): runs live in the JS API gallery
- [3D & Globe](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-maplibre-3d.html): runs live in the JS API gallery
- [Style: custom JSON](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-maplibre-custom-style.html): runs live in the JS API gallery
- [Style picker (server styles)](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/style-picker.html): runs live in the JS API gallery