---
title: "Build a map application | Guides"
description: "Add MapTiler maps to your web or mobile app."
---

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

# Build a map application

To add a MapTiler map to your website or app, start with the quick start below. It shows where your style ID and API key go, depending on how you want to use the map. Further down, you’ll find all the libraries, SDKs, and APIs you can build with.

## Quick start 🚀

Don’t have a map yet? [Get started](https://docs-beta-4y5.pages.dev/guides/getting-started/) to create your account and pick one.

To show a map on your website or in your app, you need two things:

-   **Style ID** of the map, e.g. `streets-v4` for a ready-made map, or an alphanumeric ID for your custom map,
-   **API key** that authorizes the requests to the MapTiler API.

To get both:

1.  Go to [your MapTiler account](https://cloud.maptiler.com/) and open the [project](https://docs-beta-4y5.pages.dev/guides/getting-started/projects/) with your map.
2.  Open the map and click **Share**.
3.  Copy the `style ID` and select the `API key` you want to use. If you’re new to API keys, learn how to [create and secure your API key](https://docs-beta-4y5.pages.dev/guides/developer/credentials/api-key/).

![Share dialog: Build an application](https://docs-beta-4y5.pages.dev/guides/img/share-build-app.png)

You have the ID and the key. What now? Where they go depends on how you want to use your map:

-   For basic options such as a map iFrame or static image, see 👉 [Use a map](https://docs-beta-4y5.pages.dev/guides/using-map/).
-   To copy complete, ready-to-go HTML code for a simple full-screen map app, click **Get code** in the sharing dialog.
-   To build your own app, use MapTiler SDK JS as shown below, or pick another tool from 👉 [All ways to build](#options) below.

With [MapTiler SDK JS](https://docs-beta-4y5.pages.dev/sdk-js/), the `style ID` and `API key` go into your map setup like this:

```js
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY';

const map = new maptilersdk.Map({
  container: 'map', // ID of the HTML element for the map
  style: 'YOUR_STYLE_ID_HERE',
});
```

For complete steps on how to install the SDK and set up your project, see 👉 [SDK JS basics tutorial](https://docs-beta-4y5.pages.dev/sdk-js/examples/how-to-use/).

Tip

If you prefer to code with AI, see [AI & agents](https://docs-beta-4y5.pages.dev/guides/developer/ai/how-to-use-with-ai/) for the skills, MCP server, and other resources you can use.

## All ways to build

Besides MapTiler SDK JS, you can build with other JavaScript libraries, create mobile apps, add photorealistic 3D scenes, or call our APIs directly. Here’s everything at a glance.

Some tools and libraries need the map in a specific format instead of a style ID. You’ll find the URLs for each format in the sharing dialog under **Use map in other ways**:

-   [StyleJSON](https://docs-beta-4y5.pages.dev/cloud/api/maps/#tag/maps/GET/maps/{mapId}/style.json)
-   [XYZ tiles](https://docs-beta-4y5.pages.dev/cloud/api/maps/#tag/maps/GET/maps/{mapId}/{tileSize/}/{z}/{x}/{y}{scale}.{format})
-   [TileJSON](https://docs-beta-4y5.pages.dev/guides/how-maps-work/formats/tilejson/)
-   [OGC API – Tiles](https://docs-beta-4y5.pages.dev/guides/how-maps-work/formats/ogc-api/)
-   [WMTS](https://docs-beta-4y5.pages.dev/guides/how-maps-work/formats/wmts/)

### MapTiler SDK JS

[MapTiler SDK JS](https://docs-beta-4y5.pages.dev/sdk-js/) is a JavaScript/TypeScript library for building web map applications. It bundles map rendering with built-in support for MapTiler maps and APIs, so it’s the most straightforward way to integrate our maps.

-   [Get started](https://docs-beta-4y5.pages.dev/sdk-js/#get-started)
-   [Code examples & tutorials](https://docs-beta-4y5.pages.dev/sdk-js/examples/)

We also have step-by-step guides for using the SDK with popular frontend frameworks 👉 [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/) • [Vite](https://docs-beta-4y5.pages.dev/vite/)

### Other map libraries

Apart from our own SDK, MapTiler maps can be implemented using many other libraries. We have guides and code examples for the most popular ones:

-   [MapLibre GL JS](https://docs-beta-4y5.pages.dev/maplibre/) – an open-source library for vector maps, which MapTiler SDK JS is built on
-   [Leaflet](https://docs-beta-4y5.pages.dev/leaflet/) – a lightweight open-source library to build simple apps quickly
-   [OpenLayers](https://docs-beta-4y5.pages.dev/openlayers/) – a robust open-source library to build complex apps
-   [Deck.gl](https://docs-beta-4y5.pages.dev/deck-gl/) – a framework for visualizing large data
-   [Cesium](https://docs-beta-4y5.pages.dev/cesium/) – a library to build 3D maps, offering also plugins for **game engines**: [Unreal](https://docs-beta-4y5.pages.dev/unreal/) • [Unity](https://docs-beta-4y5.pages.dev/unity/)

### Mobile apps

If you’re specifically looking to build map applications for mobile platforms, you’ll find everything related to that under 👉 [Mobile SDKs](https://docs-beta-4y5.pages.dev/guides/developer/mobile/).

### GeoSplats SDK

To show photorealistic 3D scenes made from your own data on top of MapTiler maps, use 👉 [GeoSplats SDK](https://docs-beta-4y5.pages.dev/geosplats-sdk/).

### APIs

-   [Public APIs](https://docs-beta-4y5.pages.dev/cloud/api/reference/) for end-user applications (read-only access)
-   [Service APIs](https://docs-beta-4y5.pages.dev/cloud/admin-api/) for MapTiler account administration (full access)