Mappinest Examples

Public examples for using Mappinest with common map clients.

Use this repo with the Mappinest map client guides. The standalone HTML examples match the JavaScript examples shown in the docs.

These examples show the three main integration paths:

• Maps API through StyleJSON URLs.
• Tiles API through TileJSON and direct XYZ tile URLs.
• Dataset API through authenticated GeoJSON URLs.

Examples

Map client	Examples
MapLibre GL JS	Map style · Vector tiles · Raster tiles · GeoJSON dataset
Mapbox GL JS	Map style · Vector tiles · Raster tiles · GeoJSON dataset
OpenLayers	Map style · Vector tiles · Raster tiles · GeoJSON dataset
Leaflet	Map style · Vector tiles · VectorGrid · Raster tiles · GeoJSON dataset

Run locally

Install dependencies:

npm install

Start the local preview server:

npm run dev

Open one of the example folders from the Vite local server, then add your API key as described in API keys.

The examples use public Mappinest samples. mappinest.COUNTIES is a vector tileset, mappinest.countries-raster is a raster tileset, and mappinest.world-cities is a dataset. Any valid API key can read them. Replace the sample IDs with your own tileset or Dataset IDs to load your data.

API keys

Get a free API key from API Keys & Access and replace YOUR_MAPPINEST_KEY with it. Restrict browser keys to your application's domains and include localhost when testing locally.

Show that you use Mappinest

Add a badge to your README or website. Copy Markdown, HTML, and more badge variants from Built with Mappinest. On the Free plan, a visible Mappinest credit is required. See the attribution rules for what to add in each setup.

[![Mappinest](https://www.mappinest.com/badges/mappinest-light.svg)](https://www.mappinest.com)

Documentation

• Mappinest docs: https://www.mappinest.com/docs
• Tiles API: https://www.mappinest.com/docs/tiles-api
• Maps API: https://www.mappinest.com/docs/maps-api
• Dataset API: https://www.mappinest.com/docs/dataset-api
• Guides: https://www.mappinest.com/docs/guides