---
title: "How to use MapLibre GL JS | Maplibre gl js"
description: "Create and display MapLibre GL JS maps with MapTiler easily."
---
# How to use MapLibre GL JS
This tutorial shows how to create a MapLibre GL JS map and display it on a web page using MapTiler. 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 is an extension of MapLibre.
The SDK includes many modules with pre-built functions, so you can quickly implement search and other geocoding features, display 3D models on maps, build weather applications, and more. Check out all [modules](https://docs.maptiler.com/sdk-js/modules/).
### 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.