---
title: "MapTiler SDK JS | JavaScript maps SDK"
description: "Get started with the MapTiler SDK JS."
---

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

# MapTiler SDK JS

 ![NpmLogo](https://docs-beta-4y5.pages.dev/assets/img/npm.svg) [Get it from npm registry](https://www.npmjs.com/package/@maptiler/sdk)  
![GitHubLogo](https://docs-beta-4y5.pages.dev/assets/img/github.svg) [View source code on GitHub](https://github.com/maptiler/maptiler-sdk-js)

MapTiler SDK JS is a complete JavaScript/TypeScript toolkit for building web maps. It renders interactive maps in the browser and adds built-in support for MapTiler [maps](https://www.maptiler.com/maps/) and [APIs](https://docs-beta-4y5.pages.dev/cloud/api/reference/). What the SDK offers:

**Built-in maps:** Choose from Streets, Satellite, 3D terrain, and other [map styles](https://www.maptiler.com/maps/) for the whole world, in [flat or globe projection](https://docs-beta-4y5.pages.dev/sdk-js/examples/?q=projection).

**Data visualization:** Show your data from simple markers to heatmaps of millions of features, rendered directly in the browser with WebGL.

**Session-based tracking:** With the SDK, map usage is counted [per session, not per request](https://docs-beta-4y5.pages.dev/guides/account/sessions-vs-requests/), which usually lowers API costs.

**Open source:** Built on MapLibre GL JS, the SDK is [BSD-licensed and open](https://github.com/maptiler/maptiler-sdk-js).

## Resources and tips

-   Browse hundreds of [code examples and tutorials](https://docs-beta-4y5.pages.dev/sdk-js/examples/) to copy and adapt, for npm projects or plain HTML and JavaScript.
-   Use the SDK with popular JS frameworks like [React](https://docs-beta-4y5.pages.dev/react/), [Angular](https://docs-beta-4y5.pages.dev/angular/), [Svelte](https://docs-beta-4y5.pages.dev/svelte/), [Vue.js](https://docs-beta-4y5.pages.dev/vuejs/), or [Vite](https://docs-beta-4y5.pages.dev/vite/).
-   Install additional [modules](https://docs-beta-4y5.pages.dev/sdk-js/modules/) on top of the SDK to implement extra features such as place search, 3D models, weather, and more.

For all classes, methods, and options, see the [API reference](https://docs-beta-4y5.pages.dev/sdk-js/api/).

Tip

If you only need [location services](https://docs-beta-4y5.pages.dev/guides/developer/location-services/) without a map, our [APIs](https://docs-beta-4y5.pages.dev/cloud/api/reference/) or the [JS client](https://docs-beta-4y5.pages.dev/api-clients/) will be a lighter fit.

## Get started

To integrate a map using MapTiler SDK JS, simply use the code below the map.

For more detailed instructions on how to initialize a map and load the style, see the [SDK JS basics tutorial](./examples/how-to-use/).

1.  Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
    
    ```html
    <!DOCTYPE html>
       <html lang="en">
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Display a map</title>
         <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.1/maptiler-sdk.umd.min.js"></script>
         <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.1/maptiler-sdk.css" rel="stylesheet" />
         <style>
           body { margin: 0; padding: 0; }
           #map { position: absolute; top: 0; bottom: 0; width: 100%; }
         </style>
       </head>
       <body>
         <div id="map"></div>
         <script>
             maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY';      
             const map = new maptilersdk.Map({
               container: 'map', // container's id or the HTML element to render the map
               style: maptilersdk.MapStyle.STREETS,
             });
         </script>
       </body>
       </html>
    ```
    

1.  Install the npm package.
    
    ```bash
    npm install --save @maptiler/sdk
    ```
    
2.  Include the CSS file.
    
    If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [`<link>`](#) in the head of the document via the CDN
    
    ```js
    import "@maptiler/sdk/dist/maptiler-sdk.css";
    ```
    
    ```html
    <link href='https://cdn.maptiler.com/maptiler-sdk-js/v4.2.1/maptiler-sdk.css' rel='stylesheet' />
    ```
    
3.  Include the following code in your JavaScript file (Example: app.js).
    
    ```js
    import * as maptilersdk from '@maptiler/sdk';
        
     maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY';
     const map = new maptilersdk.Map({
       container: 'map', // container's id or the HTML element to render the map
       style: maptilersdk.MapStyle.STREETS,
     });
    ```
    

1.  Replace `YOUR_MAPTILER_API_KEY` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs-beta-4y5.pages.dev/guides/developer/credentials/api-key/#secure-key) before you publish it.