---
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.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# MapTiler SDK JS
 [Get it from npm registry](https://www.npmjs.com/package/@maptiler/sdk)
 [View source code on GitHub](https://github.com/maptiler/maptiler-sdk-js)
MapTiler SDK JS is your complete toolkit for building web maps. At its core, it bundles everything needed to render interactive maps in the browser. On top of that, it provides features to make integration of MapTiler [maps](https://www.maptiler.com/maps/) and [API services](https://docs.maptiler.com/cloud/api/reference/) as easy as possible. It’s also open-source so you can check how it handles your data under the hood. Prompting an AI coding assistant instead? See [how to use MapTiler with AI](https://docs.maptiler.com/guides/ai/how-to-use-with-ai/).
## Designed for frontend devs
This SDK was built for JavaScript developers who work on map-based web applications. Focus on your app while the SDK handles all the heavy lifting! _If you only need a specific [location service](https://docs.maptiler.com/guides/location-services/) without a map, using our [APIs](https://docs.maptiler.com/cloud/api/reference/) directly or via [JS client](https://docs.maptiler.com/api-clients/) might be a lighter fit._
## In-built maps
MapTiler SDK JS comes with built-in [map styles](https://www.maptiler.com/maps/) to pick from, showing detailed street-level information, 3D terrain, and satellite imagery for the entire world. Each map can be displayed in either [flat (Mercator) or globe projection](#projection).
## Rich data visualization
Your data can be displayed in many ways, from simple maps with markers to dynamic heatmaps and filtered visualizations of millions of features, all using WebGL technology in a browser. There’s [hundreds of code examples](https://docs.maptiler.com/sdk-js/examples) for inspiration.
## Modules for added functions
The SDK has many modules with pre-built functions, so it’s possible to quickly implement search and other geocoding features, show 3D models in the maps, build weather applications, and much more. Check out [all modules](https://docs.maptiler.com/sdk-js/modules/).
## Favorable usage tracking
MapTiler SDK JS by default uses the **session-based** model of tracking map usage.
- **Map sessions:** Once a map is loaded, any user interactions like panning, zooming, and tilting are included within a single session, rather than billing every individual tile request.
- **Geocoding sessions:** When using the [built-in search components](https://docs.maptiler.com/sdk-js/modules/geocoding/), the SDK JS bundles all keystrokes and search refinements into a single geocoding session without inflating your API costs.
To learn more about what this means, how it affects your map traffic billing, and how to change the model if desired, go to [Map usage: Sessions vs requests.](https://docs.maptiler.com/guides/account/sessions-vs-requests/)
## Open source at heart
The core of MapTiler SDK JS is MapLibre GL JS, an open-source web map library based on WebGL. Our SDK extends MapLibre GL JS with functions related to the MapTiler mapping platform. MapTiler SDK JS itself has [public source code](https://github.com/maptiler/maptiler-sdk-js) and is BSD-licensed.
## Examples
Browse code examples
[Go to examples](./examples)
## Modules
Get ready-to-use functions
[Go to modules](./modules)
## Reference
Read full SDK JS reference
[Go to reference](./api)
## Get started
To integrate a map using MapTiler SDK JS, simply use the code below the map.
For a more detailed tutorial on how to initialize a map and load the style, see [Learn the basics – How to use the MapTiler SDK JS](./examples/how-to-use/).
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a map
```
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 [``](#) in the head of the document via the CDN
```js
import "@maptiler/sdk/dist/maptiler-sdk.css";
```
```html
```
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_HERE';
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_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
## Map projection
The **Web Mercator projection** has been the go-to standard in cartography since the early days of web mapping. It is great for navigation and shows the entire world in one screen, with no hidden face. However, Mercator’s heavy distortion at high latitudes and discontinuity at the poles can be a limitation for data visualization. There’s been also criticism of providing a biased view of the world. Learn more about Mercator projection on [_Wikipedia_](https://en.wikipedia.org/wiki/Web_Mercator_projection).
The **globe projection**, available from MapTiler SDK v3, does not suffer from these biases and can feel overall more playfull than Mercator. It’s a great choice for semi-global data visualization, especially for data close to the poles, thanks to its geographic continuity.
To learn how to set the projection in your map using SDK JS, see the related [projection examples](https://docs.maptiler.com/sdk-js/examples/?q=projection).
| Mercator projection | Globe projection |
| --- | --- |
|  |  |