OpenLayers JS with MapTiler maps

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

  1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  3. 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, or create your own to truly differentiate your application.

Geocoding with MapTiler OpenLayers plugins

Geocoding control

The GeocodingControl() plugin for OpenLayers utilizes MapTiler Geocoding API. 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.

Check out the OpenLayers geocoding control how to search places 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 tutorial.

Unlock your OpenLayers mapping potential now! Look at the OpenLayers JS examples we have prepared, from a quick start with OpenLayers to advanced examples like using vector tiles with OpenLayers.