---
title: "How to display a custom map on a web with OpenLayers | Openlayers"
description: "Display custom MapTiler maps on webpages using OpenLayers."
---
> 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.
# How to display a custom map on a web with OpenLayers
This example demonstrates how to display a custom map from MapTiler on a web page using OpenLayers.
To create your first custom map, check out the [How to create a custom map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/) tutorial.
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a custom map
```
Check out the step-by-step tutorial [How to use OpenLayers](https://docs.maptiler.com/openlayers/examples/how-to-use-openlayers/)
1. Install the npm package.
```bash
npm install --save ol
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN
```js
import "ol/ol.css";
```
```html
```
3. Include the following code in your JavaScript file (Example: main.js).
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import TileJSON from 'ol/source/TileJSON.js';
import Attribution from 'ol/control/Attribution.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const attribution = new Attribution({
collapsible: false,
});
const source = new TileJSON({
url: `https://api.maptiler.com/maps/streets-v4/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
const map = new Map({
layers: [
new TileLayer({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([10.989249486220501, 46.948652944430734]), // starting position [lng, lat]
zoom: 12 // starting zoom
})
});
```
1. 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.
2. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
1. Replace the TileJSON source URL with your custom map style. Check the [Publish the map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/#publish-the-map) section to get the URL of your custom style.
```js
const source = new ol.source.TileJSON({
url: `https://api.maptiler.com/maps/YOUR_CUSTOM_MAP_ID/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
```
### Complete source code
```html
Display a custom map
```
1. Replace the TileJSON source URL with your custom map style. Check the [Publish the map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/#publish-the-map) section to get the URL of your custom style.
```js
const source = new TileJSON({
url: `https://api.maptiler.com/maps/YOUR_CUSTOM_MAP_ID/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
```
### Complete source code
```bash
npm install --save ol
```
#### main.js
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import TileJSON from 'ol/source/TileJSON.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';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const attribution = new Attribution({
collapsible: false,
});
const source = new TileJSON({
url: `https://api.maptiler.com/maps/YOUR_CUSTOM_MAP_ID/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
const map = new Map({
layers: [
new TileLayer({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([10.989249486220501, 46.948652944430734]), // starting position [lng, lat]
zoom: 12 // starting zoom
})
});
```
#### index.html
```html
How to display a custom map on a web with OpenLayers | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
## Learn more
Check out this tutorial [How to create a custom map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/) to learn how to create the map of the ski slopes of the online demo.
## Related examples
### [Raster tiles](https://docs.maptiler.com/openlayers/examples/raster-tiles-in-openlayers/)
Tutorials
Display raster tiles in OpenLayers via TileJSON or XYZ.
### [OGC WMTS service](https://docs.maptiler.com/openlayers/examples/wmts/)
Tutorials
Use OGC WMTS services in OpenLayers web maps.
### [Raster Layer](https://docs.maptiler.com/openlayers/examples/raster-layer/)
Tutorials
Add raster image overlays to OpenLayers maps.
