Add a PMTiles vector source | Mapbox GL JS

This example shows how to add a PMTiles vector tile source to a map. After the vector source is added, its features are displayed using a circle layer.

PMTiles is a single-file format for storing and serving tiled geospatial data, including vector tiles. Individual tiles are requested using HTTP range requests, which allows for efficient retrieval of only the necessary data. PMTiles can be hosted on any static file server, such as Amazon S3 or GitHub Pages.

Mapbox GL JS automatically detects PMTiles vector source by the .pmtiles file extension in a vector source's url property.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a PMTiles vector source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.21.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.21.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/standard',
        // Configure the Mapbox Standard style to use the monochrome basemap theme with the night light preset
        config: {
            basemap: {
                theme: 'monochrome',
                lightPreset: 'night'
            }
        },
        zoom: 1.78,
        center: [-103.64548, 51.14245]
    });

    map.on('load', () => {
        // Add a vector source from a PMTiles file including USGS earthquake data from April 2026
        map.addSource('pmtiles-earthquakes', {
            type: 'vector',
            url: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.pmtiles'
        });

        // Add a circle layer to visualize the earthquake data
        map.addLayer({
            id: 'pmtiles-vector-layer',
            type: 'circle',
            source: 'pmtiles-earthquakes',
            'source-layer': 'earthquakes', // Replace with your source layer name
            paint: {
                'circle-color': 'transparent',
                'circle-stroke-color': 'teal',
                'circle-stroke-width': 0.5,
                'circle-radius': 3,
                'circle-emissive-strength': 1
            }
        });
    });
</script>

</body>
</html>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/standard',
      // Configure the Mapbox Standard style to use the monochrome basemap theme with the night light preset
      config: {
        basemap: {
          theme: 'monochrome',
          lightPreset: 'night'
        }
      },
      zoom: 1.78,
      center: [-103.64548, 51.14245]
    });

    mapRef.current.on('load', () => {
      // Add a vector source from a PMTiles file including USGS earthquake data from April 2026
      mapRef.current.addSource('pmtiles-earthquakes', {
        type: 'vector',
        url: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.pmtiles'
      });

      // Add a circle layer to visualize the earthquake data
      mapRef.current.addLayer({
        id: 'pmtiles-vector-layer',
        type: 'circle',
        source: 'pmtiles-earthquakes',
        'source-layer': 'earthquakes',
        paint: {
          'circle-color': 'transparent',
          'circle-stroke-color': 'teal',
          'circle-stroke-width': 0.5,
          'circle-radius': 3,
          'circle-emissive-strength': 1
        }
      });
    });

    return () => mapRef.current.remove();
  }, []);

  return <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>;
};

export default MapboxExample;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

Was this example helpful?