Get custom map code examples

The fastest way to integrate a map is by using the pre-configured code examples available in your MapTiler account. You can get these snippets for any map including custom.

Find your code examples

  1. Log in to your MapTiler account.
  2. Click on your desired map style.
  3. Scroll down for code snippets for various libraries and frameworks.
  4. Copy the source code directly into your project.
The example code uses your default API key, which is only intended for testing. In production environments, you need to protect your API key!

Choose implementation method

Vector style

Vector tiles are rendered on the client side using WebGL. They’re a fast, lightweight modern technology that delivers smooth zooming and panning experience to end users.

To display a map with vector tiles, the API calls the style JSON of the map. The style JSON conforms to the schema described in the GL style specification. See an example of a style JSON.

We’ve prepared ready-made code examples to use vector tiles with multiple JavaScript libraries, frameworks, and mobile SDKs. We recommend implementing a vector style map with MapTiler SDK JS which is optimized for MapTiler and services. It supports 3D terrain, globe projection, and automatically handles HiDPI (Retina) displays.

Raster tiles

Raster tiles are pre-rendered images (256x256 or 512x512 pixels). This older technology is typically used in legacy software or in environments with limited hardware resources where WebGL is unavailable. In MapTiler, raster tiles are generally available on paid plans.

For HiDPI/Retina displays, use the (@2x) suffix. Example:

https://api.maptiler.com/maps/streets-v4/256/3/4/2@2x.png?key=mNLmXyaTH4gRlwJHSYWp

Other options

If a JavaScript library is not required, use these standard integration methods: