> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Add a PMTiles vector source
This example shows how to add a [PMTiles](https://github.com/protomaps/PMTiles) vector tile source to a map. After the vector source is added, its features are displayed using a [circle](https://docs.mapbox.com/style-spec/reference/layers/#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.
> Example code:
**JavaScript**
```html
Add a PMTiles vector source
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
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 ;
};
export default MapboxExample;
```