Build your first map in ten minutes
Quick answer
This tutorial builds a complete Leaflet page from a CDN stylesheet and script, a sized map container and an L.map initialized with center and zoom. It adds an L.tileLayer using the {z}/{x}/{y} template with maxZoom and attribution. It explains the three points beginners miss: the container needs a real height, coordinates are [lat, lng], and swapping the tile URL changes the basemap. Readers end with a draggable, zoomable map of their own.
Key points
- Give html, body and #map an explicit height, otherwise the map renders as a blank box.
- Pass center as [lat, lng]; Leaflet differs from GeoJSON, which uses [lng, lat].
- Set maxZoom and a correct attribution string on every L.tileLayer.
Example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<style>
html, body { height: 100%; margin: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
var map = L.map('map', {
center: [39.907359, 116.391263],
zoom: 11
});
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>Notes
- Gray tiles mean failed requests; listen to tileerror or switch to a reachable tile service.
- GCJ-02 tiles from Gaode or Tencent shift WGS84 GPS points by several hundred meters.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Build your first map in ten minutes. https://www.jingweizhi.com/en/leaflet/tutorials/minimal-scene.html (accessed 2026-11-03).