---
title: "addProtocol | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Variable addProtocol

addProtocol: (customProtocol: string, loadFn: [AddProtocolAction](https://docs.maptiler.com/sdk-js/api-reference/types/AddProtocolAction/)) \=> void

#### Type Declaration

-   -   (customProtocol: string, loadFn: [AddProtocolAction](https://docs.maptiler.com/sdk-js/api-reference/types/AddProtocolAction/)): void
    -   Adds a custom load resource function that will be called when using a URL that starts with a custom url schema. This will happen in the main thread, and workers might call it if they don't know how to handle the protocol. The example below will be triggered for custom:// urls defined in the sources list in the style definitions. The function passed will receive the request parameters and should return with the resulting resource, for example a pbf vector tile, non-compressed, represented as ArrayBuffer.
        
        #### Parameters
        
        -   customProtocol: string
            
            the protocol to hook, for example 'custom'
            
        -   loadFn: [AddProtocolAction](https://docs.maptiler.com/sdk-js/api-reference/types/AddProtocolAction/)
            
            the function to use when trying to fetch a tile specified by the customProtocol
            
        
        #### Returns void
        
        #### Example[](#example)
        
        ```typescript
        // This will fetch a file using the fetch API (this is obviously a non interesting example...)
        addProtocol('custom', async (params, abortController) => {
             const t = await fetch(`https://${params.url.split("://")[1]}`);
             if (t.status == 200) {
                 const buffer = await t.arrayBuffer();
                 return {data: buffer}
             } else {
                 throw new Error(`Tile fetch error: ${t.statusText}`);
             }
         });
        // the following is an example of a way to return an error when trying to load a tile
        addProtocol('custom2', async (params, abortController) => {
             throw new Error('someErrorMessage');
        });
        ```
        
        #### See[](#see)
        
        -   [Add a COG raster source](https://maplibre.org/maplibre-gl-js/docs/examples/add-a-cog-raster-source/)
        -   [Add Contour Lines](https://maplibre.org/maplibre-gl-js/docs/examples/add-contour-lines/)
        -   [PMTiles source and protocol](https://maplibre.org/maplibre-gl-js/docs/examples/pmtiles-source-and-protocol/)
        -   [Use addProtocol to Transform Feature Properties](https://maplibre.org/maplibre-gl-js/docs/examples/use-addprotocol-to-transform-feature-properties/)