Tích Hợp Bản Đồ Vào Website Với Mapbox: Hướng Dẫn Chi Tiết Cho Người Việt

Bạn đang tìm kiếm giải pháp bản đồ thay thế Google Maps với chi phí hợp lý hơn? Mapbox chính là lựa chọn tuyệt vời. Bài viết này sẽ hướng dẫn bạn cách tích hợp bản đồ Mapbox vào website một cách đơn giản và hiệu quả, giúp bạn tạo ra những bản đồ tương tác ấn tượng.

Sau khi Google Maps áp dụng chính sách tính phí cho các API, nhiều nhà phát triển đã tìm kiếm các giải pháp thay thế vừa mạnh mẽ, vừa tiết kiệm chi phí. Mapbox nổi lên như một lựa chọn lý tưởng, cung cấp các API lập bản đồ với mức giá cạnh tranh, đặc biệt là gói miễn phí hào phóng, cho phép bạn thử nghiệm và phát triển ứng dụng mà không cần lo lắng về chi phí ban đầu.

Mapbox cung cấp các đoạn mã đơn giản để tích hợp bản đồ vào website hoặc ứng dụng. Tuy nhiên, tài liệu của họ có thể hơi phức tạp. Vì vậy, bài viết này sẽ đơn giản hóa quy trình, giúp bạn dễ dàng tích hợp bản đồ Mapbox vào dự án của mình.

Có hai phương pháp chính để tích hợp bản đồ Mapbox:

Cách đơn giản (sử dụng iframe): Dễ thực hiện, nhưng ít tùy chỉnh.
Cách tùy chỉnh (sử dụng Mapbox GL JS): Linh hoạt hơn, cho phép bạn kiểm soát hoàn toàn bản đồ.

Mục Lục

1 Cách 1: Sử Dụng Iframe (Cách Đơn Giản)
2 Cách 2: Sử Dụng Mapbox GL JS (Cách Tùy Chỉnh)
3 Mã Thông Báo Truy Cập (Access Token)
4 Hiển Thị Vị Trí Động: Mã Hóa Địa Lý (Geocoding)
- 4.1 Thêm Hộp Tìm Kiếm (Search Box)
5 Tùy Chỉnh Bản Đồ: Thêm Điều Khiển Thu Phóng và Điểm Đánh Dấu
6 Kết luận

Cách 1: Sử Dụng Iframe (Cách Đơn Giản)

Để nhúng bản đồ bằng iframe, bạn chỉ cần sử dụng thẻ <iframe> trong HTML.

<iframe src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-74.5,40,9,0,0/600x400?access_token=YOUR_ACCESS_TOKEN"></iframe>

Lưu ý: Theo tài liệu của Mapbox, phương pháp iframe có thể không hỗ trợ tất cả các tính năng nâng cao như cửa sổ bật lên hoặc tương tác với các đối tượng trên bản đồ. Ngoài ra, iframe đôi khi có thể gây ra vấn đề về bố cục trang web.

Nếu iframe phù hợp với nhu cầu của bạn, đây là cách nhanh nhất để tích hợp bản đồ. Nếu không, hãy chuyển sang phương pháp thứ hai để có nhiều quyền kiểm soát hơn.

Cách 2: Sử Dụng Mapbox GL JS (Cách Tùy Chỉnh)

Mapbox GL JS là một thư viện JavaScript sử dụng WebGL để hiển thị bản đồ tương tác từ các ô vector (vector tiles) và các kiểu bản đồ (Mapbox styles).

Đừng lo lắng, bạn không cần phải học một thư viện hoàn toàn mới!

Bạn chỉ cần hiểu cách đối tượng map hoạt động. Đối tượng này định nghĩa bản đồ bạn muốn hiển thị và chỉ định các thuộc tính của nó. Dưới đây là cấu trúc cơ bản của đối tượng map:

let map = new mapboxgl.Map({
  container: 'map', // ID của phần tử HTML chứa bản đồ
  style: 'mapbox://styles/mapbox/streets-v11', // Kiểu bản đồ
  center: [-74.5, 40], // Vị trí trung tâm ban đầu [kinh độ, vĩ độ]
  zoom: 9 // Mức thu phóng ban đầu
});

Bây giờ, hãy xem xét từng thuộc tính của đối tượng map:

container: Xác định phần tử HTML (hoặc ID của phần tử) nơi bản đồ sẽ được hiển thị.
style: Chỉ định kiểu bản đồ. Mapbox cung cấp nhiều kiểu có sẵn như “streets”, “dark”, “light”, và nhiều hơn nữa. Bạn cũng có thể tùy chỉnh kiểu bản đồ của riêng mình bằng Mapbox Studio.
center: Xác định vị trí trung tâm ban đầu của bản đồ, sử dụng tọa độ kinh độ và vĩ độ.
zoom: Xác định mức thu phóng ban đầu của bản đồ. Giá trị lớn hơn có nghĩa là mức thu phóng gần hơn.

Ngoài các thuộc tính trên, Mapbox GL JS còn cung cấp nhiều tùy chọn khác để tùy chỉnh bản đồ. Bạn có thể tham khảo tài liệu chính thức của Mapbox để biết thêm chi tiết.

Mã Thông Báo Truy Cập (Access Token)

Để sử dụng Mapbox GL JS, bạn cần có mã thông báo truy cập (access token). Đây là một khóa được Mapbox cấp khi bạn đăng ký tài khoản. Mã thông báo này cho phép Mapbox xác định các yêu cầu API đến từ người dùng hợp lệ.

Bạn có thể nhận mã thông báo truy cập miễn phí bằng cách đăng ký tài khoản Mapbox.

Sau khi có mã thông báo, hãy thêm nó vào mã JavaScript của bạn, trước khi tạo đối tượng map:

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

Hiển Thị Vị Trí Động: Mã Hóa Địa Lý (Geocoding)

Nếu bạn muốn hiển thị vị trí động trên bản đồ, bạn cần sử dụng mã hóa địa lý (geocoding). Mã hóa địa lý là quá trình chuyển đổi địa chỉ hoặc tên địa điểm thành tọa độ vĩ độ và kinh độ.

Có hai loại mã hóa địa lý:

Mã hóa địa lý chuyển tiếp (Forward Geocoding): Chuyển đổi văn bản (địa chỉ, tên địa điểm) thành tọa độ địa lý.
Mã hóa địa lý đảo ngược (Reverse Geocoding): Chuyển đổi tọa độ địa lý thành mô tả văn bản (địa chỉ).

Trong ví dụ này, chúng ta sẽ sử dụng mã hóa địa lý chuyển tiếp.

Thêm Hộp Tìm Kiếm (Search Box)

Để cho phép người dùng tìm kiếm địa điểm và hiển thị vị trí trên bản đồ, bạn có thể thêm hộp tìm kiếm vào bản đồ. Mapbox cung cấp một plugin tiện lợi để thực hiện việc này:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tìm kiếm địa điểm với Mapbox GL Geocoder</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [-96, 37.8], // starting position [lng, lat]
        zoom: 3 // starting zoom
    });

    // Add the control to the map.
    map.addControl(
        new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        })
    );
</script>

</body>
</html>

Đoạn mã trên sẽ thêm một hộp tìm kiếm vào bản đồ, cho phép người dùng nhập địa chỉ và tìm kiếm vị trí.

Tùy Chỉnh Bản Đồ: Thêm Điều Khiển Thu Phóng và Điểm Đánh Dấu

Để làm cho bản đồ tương tác hơn, bạn có thể thêm các điều khiển thu phóng và xoay (các nút “+” và “-” để phóng to/thu nhỏ và xoay bản đồ) và một điểm đánh dấu tại vị trí trung tâm.

// Thêm điều khiển thu phóng và xoay vào bản đồ.
map.addControl(new mapboxgl.NavigationControl());

map.on('load', function () {
    /* Hình ảnh: Một hình ảnh được tải và thêm vào bản đồ. */
    map.loadImage('https://i.imgur.com/MK4NUzI.png', function(error, image) {
        if (error) throw error;
        map.addImage('custom-marker', image);
        /* Lớp kiểu: Một lớp kiểu liên kết nguồn và hình ảnh và chỉ định cách chúng được hiển thị trên bản đồ. */
        map.addLayer({
            id: 'markers',
            type: 'symbol',
            /* Nguồn: Một nguồn dữ liệu chỉ định tọa độ địa lý nơi điểm đánh dấu hình ảnh được đặt. */
            source: {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [{
                        type: 'Feature',
                        properties: {},
                        geometry: {
                            type: "Point",
                            coordinates: [-74.5, 40]
                        }
                    }]
                }
            },
            layout: {
                "icon-image": "custom-marker",
            }
        });
    });
});

Đoạn mã trên sẽ thêm các điều khiển điều hướng và một điểm đánh dấu tùy chỉnh vào bản đồ.

Kết luận

Chúc mừng! Bạn đã tích hợp thành công bản đồ Mapbox vào website của mình. Với Mapbox, bạn có thể tạo ra những bản đồ tương tác đẹp mắt và tùy chỉnh để đáp ứng nhu cầu cụ thể của mình.

Hy vọng hướng dẫn này hữu ích cho bạn. Hãy thử nghiệm và khám phá thêm các tính năng của Mapbox để tạo ra những trải nghiệm bản đồ độc đáo cho người dùng của bạn.