---
title: "MapLibre GL JS with MapTiler maps | Maplibre gl js"
description: "Learn to display MapTiler maps using MapLibre GL 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.
# MapLibre GL JS with MapTiler maps
[MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) is a open-source TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser. Great performance due to GPU-accelerated vector tile rendering.
For a better developer experience and easier integration with MapTiler [maps](https://www.maptiler.com/maps/) and [API services](https://docs.maptiler.com/cloud/api/reference/), it is best to use the [MapTiler SDK JS](https://docs.maptiler.com/sdk-js/). MapTiler SDK JS uses MapLibre as its main engine but extends it with more features.
## Get started
This is the way to use your MapTiler maps in MapLibre GL JS. Simply use the code below the map.
### NPM module setup
```bash
npm install --save maplibre-gl
```
#### main.js
```js
import { Map } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map', // container id
style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`, // style URL
center: [0, 0], // starting position [lng, lat]
zoom: 1 // starting zoom
});
```
#### index.html
```html
How to use MapLibre GL JS | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
```
### Basic JavaScript setup
```html
Display a map
```
## Learn more
Check out the [How to migrate/switch from MapLibre to MapTiler](https://docs.maptiler.com/sdk-js/examples/switch-from-maplibre/) tutorial.
Unlock your MapLibre mapping potential now! Look at the [MapLibre GL JS examples](https://docs.maptiler.com/maplibre/examples/) we have prepared.
Check out the more than 250 [MapTiler SDK examples](https://docs.maptiler.com/sdk-js/examples/)