Join us online - 19th of November
Save your spot

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 and APIs. What the SDK offers:

Built-in maps: Choose from Streets, Satellite, 3D terrain, and other map styles for the whole world, in flat or globe 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, which usually lowers API costs.

Open source: Built on MapLibre GL JS, the SDK is BSD-licensed and open.

Resources and tips

  • Browse hundreds of code examples and tutorials to copy and adapt, for npm projects or plain HTML and JavaScript.
  • Use the SDK with popular JS frameworks like React, Angular, Svelte, Vue.js, or Vite.
  • Install additional 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.

Tip

If you only need location services without a map, our APIs or the JS client 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.

  1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  1. Install the npm package.

  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

  3. Include the following code in your JavaScript file (Example: app.js).

  1. Replace YOUR_MAPTILER_API_KEY with your own API key. Make sure to secure the key before you publish it.
Was this helpful?