series Leaflet Tutorials | Bài 1: Chào sân - Khởi tạo bản đồ tương tác đầu tiên

Leaflet là thư viện JavaScript mã nguồn mở nhẹ nhất (chỉ khoảng 40KB) để tạo bản đồ tương tác. Khác với Google Maps API hay Mapbox yêu cầu đăng ký API Key và trả phí khi đạt ngưỡng, Leaflet cho phép bạn tự do chọn nhà cung cấp gạch bản đồ (Tile Providers) như OpenStreetMap, mà không tốn một xu.

Trong series này, mình sẽ cùng bạn đi từ việc nhúng bản đồ, đánh dấu địa điểm, cho đến việc vẽ các tuyến đường (polylines) – cực kỳ hữu ích nếu sau này bạn muốn hiển thị lộ trình của các đoàn tàu hay vị trí các trạm Metro trên bản đồ.

1. Thiết lập môi trường (Zero Dependencies)

Leaflet cực kỳ đơn giản. Bạn chỉ cần nhúng 1 file CSS và 1 file JS vào trang HTML của mình.

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map Tutorial</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <style>
        #map { height: 500px; width: 100%; }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    
    <script>
        // Code khởi tạo bản đồ sẽ nằm ở đây
    </script>
</body>
</html>

2. Khởi tạo bản đồ và chọn "Tile Layer"

Để có một bản đồ, bạn cần 2 thứ:

Map Container: Khởi tạo instance của bản đồ.
Tile Layer: Nguồn cung cấp ảnh bản đồ (gạch). Ở đây chúng ta dùng OpenStreetMap.

// Khởi tạo bản đồ tại vị trí [vĩ độ, kinh độ] với mức zoom
// Ví dụ: Vị trí của một trạm Metro ở TP.HCM
var map = L.map('map').setView([10.7766, 106.7009], 15);

// Thêm lớp bản đồ từ OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

3. Thêm Marker (Đánh dấu) và Popup

Giả sử bạn muốn đánh dấu vị trí trạm tàu điện và hiển thị thông tin khi người dùng bấm vào.

// Tạo một marker tại tọa độ cụ thể
var marker = L.marker([10.7766, 106.7009]).addTo(map);

// Thêm popup với thông tin chi tiết
marker.bindPopup("<b>Trạm Metro Bến Thành</b><br>Tình trạng: Hoạt động bình thường.");

Giải thích các thành phần

setView([lat, lng], zoom): Thiết lập tâm bản đồ và mức độ phóng to.
L.tileLayer: Đây chính là "trái tim" của bản đồ. URL {s}.tile... là cấu trúc mà Leaflet tự thay đổi để tải các ảnh tile tương ứng với vị trí và mức zoom bạn đang nhìn.
bindPopup: Tạo ra một cửa sổ thông tin nhỏ gắn liền với đối tượng.

Bước tiếp theo là gì?

Anh em đã có một bản đồ "sống" trên màn hình rồi! Trong các bài thực hành chuyên sâu tới, chúng ta sẽ:

Bài 2: Vẽ các đối tượng địa lý (Markers, Polylines, Polygons) – vẽ tuyến đường Metro.

Bài 3: Xử lý GeoJSON – nạp dữ liệu bản đồ từ Server của bạn.

Bài 4: Tương tác với sự kiện (Events) – Click vào bản đồ để lấy tọa độ, hoặc theo dõi sự kiện di chuyển tàu

AIEngineering frontend

1. Thiết lập môi trường (Zero Dependencies)

2. Khởi tạo bản đồ và chọn "Tile Layer"

3. Thêm Marker (Đánh dấu) và Popup

Bước tiếp theo là gì?

Table of contents