---
title: "Vector tiles in OpenLayers | Openlayers"
description: "Display vector tiles in OpenLayers with ol-mapbox-style plugin."
---
> 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.
# Vector tiles in OpenLayers
Vector tiles maps are made of mathematical interpretations of geometric features such as points, curves or polygons. Vector tiles are rendered on the client’s side with a style, which is a small text file that defines how certain map elements look and how they are displayed. Read more about Vector tiles in this article [What are vector tiles and why you should care?](https://www.maptiler.com/news/2019/02/what-are-vector-tiles-and-why-you-should-care/)
## Vector tiles ol-mapbox-style (plugin)
Vector tiles can be displayed in OpenLayers using the [ol-mapbox-style](https://github.com/openlayers/ol-mapbox-style) plugin
### NPM module setup
```bash
npm install --save ol ol-mapbox-style
```
#### main.js
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Attribution from 'ol/control/Attribution.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
import 'ol/ol.css';
import { apply } from 'ol-mapbox-style';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const styleJson = `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`;
const attribution = new Attribution({
collapsible: false,
});
const map = new Map({
target: 'map',
controls: defaultControls({attribution: false}).extend([attribution]),
view: new View({
constrainResolution: true,
center: fromLonLat([0, 0]),
zoom: 2
})
});
apply(map, styleJson);
```
#### index.html
```html
Vector tiles in OpenLayers | NPM example
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
### Summary
The easiest way to work with vector tiles in OpenLayers is to use the ol-mapbox-style plugin. OpenLayers supports vector tiles natively but you have to create a specific [style](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike). Check out the [example](https://openlayers.org/en/latest/examples/osm-vector-tiles.html).
## Related examples
### [Vector tiles with GeoJSON](https://docs.maptiler.com/openlayers/examples/vector-tiles-with-polygon-from-geojson/)
Tutorials
Display GeoJSON polygons over vector tiles using OpenLayers.
