---
title: "OpenLayers JS with MapTiler maps | Openlayers"
description: "Display MapTiler maps using the OpenLayers JavaScript library."
---

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

# OpenLayers JS with MapTiler maps

[OpenLayers](https://openlayers.org) is a high-performance, full-featured web mapping library that displays maps from various sources and formats. If you need to develop a web application that interacts with most OGC standards, this is your tool, whether connecting to a WFS or reprojecting a raster.

You can use your MapTiler maps in OpenLayers as vector tiles or the more traditional raster tiles. You can also add a geocoding control to your map with one line of code.

## Get started

This is the easiest and fastest way to use your MapTiler maps in OpenLayers. Simply use the code below the 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 [`<link>`](#) in the head of the document via the CDN
    
    ```js
    import "ol/ol.css";
    ```
    
    ```html
    <link href='https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js' rel='stylesheet' />
    ```
    
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([16.62662018, 49.2125578]), // starting position [lng, lat]
        zoom: 14 // 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.  Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
    
    ```html
    <!DOCTYPE html>
     <html>
       <head>
         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
         <title>Display a map</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">
         <script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>
         <style>
           #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
         </style>
       </head>
       <body>
         <div id="map">
           <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
         </div>
         <script>
           const key = 'YOUR_MAPTILER_API_KEY_HERE';
    
           const attribution = new ol.control.Attribution({
             collapsible: false,
           });
    
           const source = new ol.source.TileJSON({
             url: `https://api.maptiler.com/maps/streets-v4/tiles.json?key=${key}`, // source URL
             tileSize: 512,
             crossOrigin: 'anonymous'
           });
    
           const map = new ol.Map({
             layers: [
               new ol.layer.Tile({
                 source: source
               })
             ],
             controls: ol.control.defaults.defaults({attribution: false}).extend([attribution]),
             target: 'map',
             view: new ol.View({
               constrainResolution: true,
               center: ol.proj.fromLonLat([16.62662018, 49.2125578]), // starting position [lng, lat]
               zoom: 14 // starting zoom
             })
           });
         </script>
       </body>
     </html>
    ```
    
    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.
        

## Geocoding with MapTiler OpenLayers plugins

### Geocoding control

![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg)[OpenLayers geocoding control](https://github.com/maptiler/maptiler-geocoding-control#example-for-openlayers-using-module-bundler)

The [GeocodingControl()](https://github.com/maptiler/maptiler-geocoding-control#example-for-openlayers-using-module-bundler) plugin for OpenLayers utilizes [MapTiler Geocoding API](https://www.maptiler.com/cloud/geocoding/). With this control, users of your application can find any place on Earth (States, Cities, Streets, …) down to the address level, restrict the search area to a specific country, highlight search results on the map, autocomplete words while typing, and much more.

```js
import { GeocodingControl } from "@maptiler/geocoding-control/openlayers";
import "@maptiler/geocoding-control/style.css";

...

map.addControl(new GeocodingControl({ apiKey: `YOUR_MAPTILER_API_KEY_HERE` }));
```

```js
map.addControl(new openlayersMaptilerGeocoder.GeocodingControl({ apiKey: `YOUR_MAPTILER_API_KEY_HERE` }));
```

Check out the [OpenLayers geocoding control how to search places](./examples/geocoding-control/) example.

## Learn more

If you want to learn how to initialize a map and load the style, see the [Learn the basics - How to use OpenLayers](./how-to-use-openlayers/) tutorial.

Unlock your OpenLayers mapping potential now! Look at the [OpenLayers JS examples](https://docs.maptiler.com/openlayers/examples/) we have prepared, from a quick start with OpenLayers to advanced examples like using vector tiles with OpenLayers.