olms.apply('map', 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY') .then(function(map) { map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566])); map.getView().setZoom(13); });

How it works

OpenLayers is a full-featured GIS library that supports raster tiles, vector tiles, WMS, WFS, and many more source types. For MapTiler vector styles, the ol-mapbox-style library translates a Mapbox/MapTiler style.json into OpenLayers layers and sources.

olms.apply() takes a target element and a style URL. It returns a promise that resolves with the configured map instance. The view is then adjusted to center on Paris.

OpenLayers uses its own projection system. ol.proj.fromLonLat() converts [lng, lat] (EPSG:4326) to the map’s internal projection (EPSG:3857 by default).

Key APIs

API	Description	Docs
`olms.apply()`	Apply MapTiler style to map	npmjs.com/package/ol-mapbox-style
`ol.proj.fromLonLat()`	Convert [lng,lat] to map coords	openlayers.org
`ol.Map`	Map instance	openlayers.org

FAQ

Why use ol-mapbox-style instead of raw OpenLayers?

MapTiler provides style.json files designed for Mapbox GL / MapLibre. ol-mapbox-style bridges this gap, giving OpenLayers access to all MapTiler styles without manual layer configuration.

Can I use raster tiles instead?

Yes. Use ol.layer.Tile with ol.source.XYZ and a MapTiler raster URL. But vector styles offer better quality, smaller downloads, and dynamic styling.

Common mistakes

Forgetting ol.proj.fromLonLat(): raw [lng, lat] won’t place the map correctly
Missing the ol-mapbox-style script tag: olms will be undefined
Not waiting for the promise: the map object isn’t ready until .then() resolves

Initialize an OpenLayers Map

How it works

Key APIs

FAQ

Common mistakes

Build maps using OpenLayers with AI

Related Examples