MapLibre | geolith Tiles docs

A MapLibre map drawn from the hosted india tile set. The source is the TileJSON URL; MapLibre reads the tile URL, zooms and bounds from it, and the tile URL already carries your key.

Use a publishable key (gc_pk_…) whose allowed origins include your site and http://localhost:5173 for development. See API keys.

Set up

npm create vite@latest geolith-tiles -- --template vanilla-ts
cd geolith-tiles
npm install maplibre-gl@6
echo "VITE_GEOLITH_KEY=gc_pk_your_publishable_key" > .env.local

In index.html, give the map a full-page element:

<div id="map" style="position: absolute; inset: 0"></div>
<script type="module" src="/src/main.ts"></script>

src/main.ts

import { Map, setWorkerUrl } from 'maplibre-gl';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url';
import 'maplibre-gl/dist/maplibre-gl.css';

// MapLibre 6 runs its worker from a separate module; let Vite emit it.
setWorkerUrl(workerUrl);

const KEY = import.meta.env.VITE_GEOLITH_KEY as string; // gc_pk_…, allowed origin: this site
const TILEJSON = `https://api.geolith.app/v1/tiles/india.json?api_key=${KEY}`;

new Map({
  container: 'map',
  center: [73.86, 18.52],
  zoom: 11,
  style: {
    version: 8,
    sources: {
      geolith: { type: 'vector', url: TILEJSON },
    },
    layers: [
      {
        id: 'background',
        type: 'background',
        paint: { 'background-color': '#dfe7ec' },
      },
      {
        id: 'earth',
        type: 'fill',
        source: 'geolith',
        'source-layer': 'earth',
        paint: { 'fill-color': '#f4f1ea' },
      },
      {
        id: 'water',
        type: 'fill',
        source: 'geolith',
        'source-layer': 'water',
        filter: ['==', ['geometry-type'], 'Polygon'],
        paint: { 'fill-color': '#a9cde0' },
      },
      {
        id: 'buildings',
        type: 'fill',
        source: 'geolith',
        'source-layer': 'buildings',
        paint: { 'fill-color': '#dcd6cc' },
      },
      {
        id: 'minor-roads',
        type: 'line',
        source: 'geolith',
        'source-layer': 'roads',
        filter: ['==', ['get', 'kind'], 'minor_road'],
        paint: { 'line-color': '#ffffff', 'line-width': 1 },
      },
      {
        id: 'major-roads',
        type: 'line',
        source: 'geolith',
        'source-layer': 'roads',
        filter: ['in', ['get', 'kind'], ['literal', ['highway', 'major_road']]],
        paint: { 'line-color': '#f2b56b', 'line-width': 2 },
      },
      {
        id: 'boundaries',
        type: 'line',
        source: 'geolith',
        'source-layer': 'boundaries',
        paint: { 'line-color': '#8a7f99', 'line-dasharray': [3, 2] },
      },
    ],
  },
});

The style has no label layers, so it needs no glyphs URL. For labels, add symbol layers on places and roads with a glyphs URL of your own.

MapLibre shows the attribution from the TileJSON (© OpenStreetMap contributors (ODbL), Overture Maps Foundation) in its attribution control. Keep that control on.

Notes

A map view asks for about 30 tiles at once. A publishable key allows 20 tile requests a second per visitor, enough for two such views; see Keys and limits.
Outside India the tile set has no data: tiles there answer 204.
To add place search to the same map, see Search with MapLibre.