maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY'; const map = new maptilersdk.Map({ container: 'map', style: maptilersdk.MapStyle.STREETS, center: [2.3522, 48.8566], zoom: 13 }); new maptilersdk.Marker({ color: '#9C27B0' }) .setLngLat([2.3522, 48.8566]) .setPopup(new maptilersdk.Popup().setHTML('<b>Paris</b>')) .addTo(map);

How it works

MapTiler SDK extends MapLibre GL JS with built-in cloud service integration. Set the API key once with maptilersdk.config.apiKey, then use MapStyle.STREETS instead of a full URL: the SDK resolves it automatically.

The API is nearly identical to MapLibre GL JS. The SDK adds convenience methods for geocoding, terrain, and geolocation that would require manual fetch() calls with raw MapLibre.

Like MapLibre, the SDK uses [lng, lat] coordinate order.

Key APIs

API	Description	Docs
`maptilersdk.config.apiKey`	Set API key globally	docs.maptiler.com/sdk-js/api/
`maptilersdk.Map`	Create map instance	docs.maptiler.com/sdk-js/api/
`maptilersdk.MapStyle`	Style constants (STREETS, SATELLITE…)	docs.maptiler.com/sdk-js/api/
`maptilersdk.Marker`	Add DOM marker	docs.maptiler.com/sdk-js/api/

FAQ

What is the difference between MapTiler SDK and MapLibre GL JS?

MapTiler SDK wraps MapLibre with cloud service helpers. You get the same rendering engine plus built-in geocoding, terrain, and API key management. Everything that works in MapLibre works in the SDK.

Do I need MapLibre if I use the SDK?

No. The SDK includes MapLibre internally. You only need the @maptiler/sdk package.

Common mistakes

Forgetting maptilersdk.config.apiKey: the map won’t load tiles without it
Using maplibregl namespace: use maptilersdk instead
Using [lat, lng]: the SDK uses [lng, lat] like MapLibre and GeoJSON

Initialize a Map with MapTiler SDK

How it works

Key APIs

FAQ

Common mistakes

Build maps using MapTiler SDK with AI

Related Examples