Initialize a Map

Initialize and embed a map with tiles, pan, zoom, and markers Each library has its own approach: here's how they compare.

Quick Recommendations

Leaflet — Best for simple embeds where minimal bundle size and fast setup matter more than visual richness.

MapLibre GL JS — Best when you need WebGL-powered vector rendering with smooth 60fps interactions and data-driven styling.

OpenLayers — Ideal for enterprise or GIS applications that need projection support, WMS/WFS, and OGC standards compliance.

MapTiler SDK — The fastest setup overall: built-in style constants and API key config eliminate boilerplate.

At a Glance

	Leaflet	MapLibre	OpenLayers	SDK
Coordinates	`[lat, lng]`	`[lng, lat]`	`fromLonLat([lng, lat])`	`[lng, lat]`
Rendering	DOM + Canvas (2D)	WebGL (GPU, 60fps)	Canvas + WebGL	WebGL (GPU, 60fps)
Bundle size	~42 KB gzipped	~250 KB gzipped	~290 KB gzipped (tree-shakeable)	~280 KB gzipped (includes MapLibre)
Learning curve	Easiest (simple API, great tutorials)	Moderate (source/layer model, expressions)	Steepest (projections, OGC standards, verbose API)	Easy (MapLibre API with convenience helpers)
3D support	No native 3D (2D only)	Full: terrain, fill-extrusion, globe, sky	Limited: WebGL layers, no native globe	Full (same as MapLibre)
Code lines	6	11	5	11

Implementation Details

	Leaflet	MapLibre	OpenLayers	SDK
Coordinate Order	[lat, lng] (opposite of GeoJSON)	[lng, lat] (same as GeoJSON)	ol.proj.fromLonLat([lng, lat])	[lng, lat] (same as GeoJSON)
Rendering	DOM + Canvas (2D raster)	WebGL (GPU, 60fps vector)	Canvas + WebGL	WebGL via MapLibre (GPU)
Tile Format	Raster PNG tiles (256 or 512px)	Vector tiles (style.json)	Both raster and vector (via ol-mapbox-style)	Vector tiles (built-in style constants)

Code Snippets

Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.

Leaflet6 linesShow code

arrow_forwardFull example

const map = L.map('map').setView([48.8566, 2.3522], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
L.marker([48.8566, 2.3522]).addTo(map).bindPopup('Paris').openPopup();

MapLibre GL JS11 linesShow code

arrow_forwardFull example

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [2.3522, 48.8566],
  zoom: 13
});
map.addControl(new maplibregl.NavigationControl());
new maplibregl.Marker({ color: '#2196F3' })
  .setLngLat([2.3522, 48.8566])
  .setPopup(new maplibregl.Popup().setHTML('<b>Paris</b>'))
  .addTo(map);

OpenLayers5 linesShow code

arrow_forwardFull example

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);
  });

MapTiler SDK11 linesShow code

arrow_forwardFull example

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);

Things to Know

Implementation-specific details that matter for initialize a map.

Leaflet

Uses raster PNG tiles which look pixelated on high-DPI screens unless you use 512px tiles; coordinate order is [lat, lng], opposite of GeoJSON.

MapLibre GL JS

Requires a style.json URL rather than a tile URL template; heavier bundle (~250 KB) but enables vector styling and 3D features.

OpenLayers

Uses ol-mapbox-style bridge for MapTiler vector styles; verbose API with separate View, Layer, and Map objects.

MapTiler SDK

Wraps MapLibre with MapTiler-specific conveniences like MapStyle constants and automatic API key injection; behavior is otherwise identical to MapLibre.

Which Library to Use?

Leaflet

Create and embed an interactive Leaflet map with MapTiler raster tiles, pan/zoom controls, and a marker in just a few lines of code.

check_circle

Best for simple embeds where minimal bundle size and fast setup matter more than visual richness.

MapLibre GL JS

Create a maplibregl.Map instance with MapTiler vector tiles, navigation controls, and a marker popup.

check_circle

Best when you need WebGL-powered vector rendering with smooth 60fps interactions and data-driven styling.

OpenLayers

Create an ol.Map instance with MapTiler vector tiles using ol-mapbox-style and navigation controls.

check_circle

Ideal for enterprise or GIS applications that need projection support, WMS/WFS, and OGC standards compliance.

MapTiler SDK

Create a maptilersdk.Map with built-in MapTiler cloud integration, navigation controls, and a marker.

check_circle

The fastest setup overall: built-in style constants and API key config eliminate boilerplate.

auto_awesome

Build Maps with AI

Generate code like these examples using mapping library skills in your IDE.

auto_awesomeGet skills keyGet a free API key