MapTiler SDK JS

The easiest way for developers to integrate maps with their web applications and products is using our SDK JS. It is written in TypeScript and usable via NPM, which allows for modern development of web mapping applications.

Features

In-built maps – MapTiler SDK JS comes with built-in map styles 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.

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 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.

Favorable usage tracking – MapTiler SDK JS by default uses the session-based model of tracking map usage. 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.

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 is also open-source on GitHubLogoGitHub and BSD licensed.

Resources

Examples

Browse code examples

Go to examples

Modules

Get ready-to-use functions

Go to modules

Reference

Read full SDK JS reference

Go to reference

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.

  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_HERE with your own API key. Make sure to protect the key before publishing your map app!

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.

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.

Mercator projection Globe projection
An extension of MapLibre GL JS