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: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>' }).addTo(map); L.marker([48.8566, 2.3522]).addTo(map).bindPopup('Paris').openPopup();

How it works

Leaflet uses L.map() to create a map instance attached to a DOM element. The setView() method sets the initial center coordinates and zoom level. Leaflet uses [lat, lng] coordinate order: the opposite of GeoJSON and MapLibre.

L.tileLayer() loads raster tiles from MapTiler Cloud. The {z}/{x}/{y} template is replaced with tile coordinates as the user pans and zooms. The 256 in the URL specifies 256px tiles: use 512 with tileSize: 512, zoomOffset: -1 for retina displays.

L.marker() places a pin at the specified coordinates. bindPopup() attaches an HTML popup that opens when the marker is clicked.

Key APIs

API	Description	Docs
`L.map()`	Create map instance	leafletjs.com/reference.html#map
`L.tileLayer()`	Add raster tile layer	leafletjs.com/reference.html#tilelayer
`L.marker()`	Add marker pin	leafletjs.com/reference.html#marker

FAQ

Why is my map invisible?

The map container (#map) must have explicit CSS dimensions (e.g., height: 100vh). Without height, Leaflet renders a 0px-tall div.

Why is my marker in the wrong place?

Leaflet uses [lat, lng] coordinate order. If you accidentally pass [lng, lat], the marker will appear in the wrong location. Paris is [48.8566, 2.3522], not [2.3522, 48.8566].

Common mistakes

Forgetting to set container height: the map will be invisible
Using [lng, lat] instead of [lat, lng]: Leaflet is the opposite of GeoJSON
Missing API key in the tile URL: tiles won’t load without ?key=YOUR_MAPTILER_KEY

Initialize a Leaflet Map with MapTiler Tiles

How it works

Key APIs

FAQ

Common mistakes

Build maps using Leaflet with AI

Related Examples