Skip to main content

Class: PmTilesSource

The PmTiles source. It mainly should work as a regular source as other mapbox sources.

Remarks

The Source will automatically set its type [vector|raster] based on the type defined in the pmTiles metadata. The different PmTiles data type is defined as here: https://github.com/protomaps/PMTiles/blob/main/spec/v3/spec.md#tile-type-tt. We also use the rest of the headers to set source boundary. This includes minZoom, maxZoom, minLon, minLat, maxLon and maxLat if they are available.

Param

The unique id of the source

Param

The main pmtiles options

Param

Param

Example

import mapboxgl from "mapbox-gl";

import { PmTilesSource } from "mapbox-pmtiles";
//Define custom source
mapboxgl.Style.setSourceType(PmTilesSource.SOURCE_TYPE, PmTilesSource);

map.on("load", () => {

const PMTILES_URL =
   "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";

    map.addSource("pmTileSourceName", {
    type: PmTilesSource.SOURCE_TYPE, //Add this line
    url: PMTILES_URL,
    maxzoom: 10,
    });

    map.current.showTileBoundaries = true;
    map.current.addLayer({
        id: "places",
        source: "pmTileSourceName",
        "source-layer": "places",
        type: "circle",
        paint: {
            "circle-color": "steelblue",
        },
        maxzoom: 14,
    });
});

Hierarchy​

  • VectorTileSourceImpl

    ↳ PmTilesSource

Constructors​

constructor​

• new PmTilesSource(id, options, _dispatcher, _eventedParent): PmTilesSource

The PmTiles source. It mainly should work as a regular source as other mapbox sources.

Parameters​

NameTypeDescription
idstringThe unique id of the source
optionsPmTilesOptionsThe main pmtiles options
_dispatcherany
_eventedParentany

Returns​

PmTilesSource

Remarks

The Source will automatically set its type [vector|raster] based on the type defined in the pmTiles metadata. The different PmTiles data type is defined as here: https://github.com/protomaps/PMTiles/blob/main/spec/v3/spec.md#tile-type-tt. We also use the rest of the headers to set source boundary. This includes minZoom, maxZoom, minLon, minLat, maxLon and maxLat if they are available.

Example

import mapboxgl from "mapbox-gl";

import { PmTilesSource } from "mapbox-pmtiles";
//Define custom source
mapboxgl.Style.setSourceType(PmTilesSource.SOURCE_TYPE, PmTilesSource);

map.on("load", () => {

const PMTILES_URL =
   "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";

    map.addSource("pmTileSourceName", {
    type: PmTilesSource.SOURCE_TYPE, //Add this line
    url: PMTILES_URL,
    maxzoom: 10,
    });

    map.current.showTileBoundaries = true;
    map.current.addLayer({
        id: "places",
        source: "pmTileSourceName",
        "source-layer": "places",
        type: "circle",
        paint: {
            "circle-color": "steelblue",
        },
        maxzoom: 14,
    });
});

Overrides​

VectorTileSourceImpl.constructor

Defined in​

index.ts:287

Properties​

_dataType​

• _dataType: string

Defined in​

index.ts:210

_implementation​

• _implementation: PmTilesOptions

Defined in​

index.ts:211

_instance​

• _instance: PMTiles

Defined in​

index.ts:213

_loaded​

• _loaded: boolean

Defined in​

index.ts:208

_protocol​

• _protocol: Protocol

Defined in​

index.ts:212

_tileJSONRequest​

• _tileJSONRequest: undefined | Promise<any>

Defined in​

index.ts:214

_tileWorkers​

• _tileWorkers: Object

Index signature​

▪ [string: string]: any

Defined in​

index.ts:209

attribution​

• attribution: undefined | string

Defined in​

index.ts:191

contentType​

• contentType: string

Defined in​

index.ts:218

dispatcher​

• dispatcher: any

Defined in​

index.ts:203

fire​

• fire: Function

Defined in​

index.ts:201

• header: any

Defined in​

index.ts:217

id​

• id: string

Defined in​

index.ts:186

loadTile​

• loadTile: (tile: Tile, callback: Callback<void>) => void

Type declaration​

▸ (tile, callback): void

Parameters​
NameType
tileTile
callbackCallback<void>
Returns​

void

Defined in​

index.ts:215

map​

• map: MapboxMap

Defined in​

index.ts:193

maxTileCacheSize​

• maxTileCacheSize: undefined | number

Defined in​

index.ts:198

maxzoom​

• maxzoom: number

Defined in​

index.ts:189

minTileCacheSize​

• minTileCacheSize: undefined | number

Defined in​

index.ts:197

minzoom​

• minzoom: number

Defined in​

index.ts:188

promoteId​

• promoteId: undefined | string

Defined in​

index.ts:199

reparseOverscaled​

• reparseOverscaled: boolean

Defined in​

index.ts:204

roundZoom​

• roundZoom: boolean = true

Defined in​

index.ts:195

scheme​

• scheme: string

Defined in​

index.ts:187

scope​

• scope: undefined | string

Defined in​

index.ts:202

setEventedParent​

• setEventedParent: any

Defined in​

index.ts:205

tileBounds​

• tileBounds: undefined | TileBounds

Defined in​

index.ts:196

tileSize​

• tileSize: number

Defined in​

index.ts:190

tileType​

• tileType: TileType

Defined in​

index.ts:216

tiles​

• tiles: string[]

Defined in​

index.ts:192

type​

• type: string = 'vector'

Defined in​

index.ts:200

SOURCE_TYPE​

▪ Static SOURCE_TYPE: string = SOURCE_TYPE

Defined in​

index.ts:184

Methods​

getExtent​

▸ getExtent(): LngLatBoundsLike

the extent of the entire source extracted from pmtiles header

Returns​

LngLatBoundsLike

Defined in​

index.ts:324

hasTile​

▸ hasTile(tileID): boolean

Parameters​

NameType
tileIDTileID

Returns​

boolean

Defined in​

index.ts:330

load​

▸ load(callback?): void

Parameters​

NameType
callback?Callback<void>

Returns​

void

Defined in​

index.ts:333

loadRasterTile​

▸ loadRasterTile(tile, callback): void

Parameters​

NameType
tileTile
callbackCallback<void>

Returns​

void

Defined in​

index.ts:497

loadRasterTileData​

▸ loadRasterTileData(tile, data): void

Parameters​

NameType
tileTile
dataany

Returns​

void

Defined in​

index.ts:493

loadVectorTile​

▸ loadVectorTile(tile, callback): void

Parameters​

NameType
tileTile
callbackCallback<void>

Returns​

void

Defined in​

index.ts:409

loaded​

▸ loaded(): boolean

Returns​

boolean

Defined in​

index.ts:405

getHeader​

▸ getHeader(url): Promise<any>

An static function to get the header of an pmtiles

Parameters​

NameTypeDescription
urlstringThe pmTiles URL

Returns​

Promise<any>

A Json object of the PmTile's header

Defined in​

index.ts:236

getMetadata​

▸ getMetadata(url): Promise<any>

An static function to get the metadata of a pmtiles

Parameters​

NameTypeDescription
urlstringThe pmTiles URL

Returns​

Promise<any>

A Json object of the PmTile's metadata

Defined in​

index.ts:226