[Android Kotlin] Chi tiết bản đồ Việt Nam với Mapbox SDK

Hi anh em, trong tổng số 63 tỉnh thành Việt Nam thì anh em đã đi được bao nhiêu tỉnh rồi? :D
Mình thì do say tàu xe từ nhỏ nên 26 năm rồi mới chỉ đi được có 5 tỉnh hoy :v

Thôi tắt văn nhé, vào bài luôn này!
Như tiêu đề, hôm nay mình sẽ làm 1 chiếc tut nho nhỏ để nhúng data bản đồ Việt Nam và sử dụng trên thiết bị Android.

Những thứ ae cần chuẩn bị:

• Android Studio
• Thiết bị chạy Android 4.0 trở lên

Link hướng dẫn cài Mapbox SDK:

1. Tạo mapbox access token:

Sau khi đăng ký tài khoản mapbox, ae sẽ vào đây để tạo access token nhé.
Đây là config quyền cho token của mình:

2. Thêm SDK vào dependencies và config trong android studio

Ở file build.gradle (module level) chúng ta thêm dòng sau:

implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.7.0'

Sau khi thêm xong thì sẽ có 1 popup nhỏ ở phía trên bên phải hiện lên, ae click "sync gradle" nhé.

Ở file build.gradle (project level) chúng ta thêm maven sau vào repositories:

Để credentials vừa thêm vào maven có thể xác thực được access token mà ae đã tạo ở bước trước, chúng ta thêm vào file gradle.properties biến constant sau:

Đây chính là private key access token nha, khi tạo xong ae nhớ lưu lại vào đâu đó vì chúng ta sẽ chỉ xem được nó 1 lần duy nhất ở trang account thôi.

3. Khởi tạo Mapbox trong fragment

Đối với ae nào setup map với activity thì chỉ cần làm theo hướng dẫn trong doc của Mapbox, còn mình setup map với fragment nên thêm dòng này vào hàm onCreateView:

Với "R.string.mapbox_access_token" chính là public key mà ae đã tạo ở bước 1 nhé.

4. Lấy dữ liệu geoJson của Việt Nam:

Cái này mình google là mò được nha

growasia_calculator/vietnam.geojson at master · Vizzuality/growasia_calculator

An application to calculate the carbon emissions from crops in South East Asia. A project built in collaboration with Winrock for Grow Asia. - growasia_calculator/vietnam.geojson at master · Vizzua...

GitHubVizzuality

ae clone về và lấy file để làm source.

Sau đó copy file geojson vào thư mục assets nhé.

5. Load data từ geoJson và hiển thị lên map

Ở bước này mình sẽ đọc file geojson ở thư mục assets và tạo ra 1 file tạm, để sử dụng, và dùng thư viện Gson của google để convert content bên trong file geojson thành model.

Extension này chúng ta có thể dùng cho cả 2 context: activity lẫn fragment.

API getMapAsync của mapbox có tác dụng xử lý bất đồng bộ cho đến khi mapbox sẵn show lên view, mọi style, layer, source, chèn ảnh lên map, set vị trí camera..v.v đều được thực hiện ở đây. Đến bước này thì ae mới chỉ hiển thị được bản đồ lên thôi nha chứ chưa show được vùng lãnh thổ được bôi đậm của Việt Nam đâu.

function addGeoJsonSourceToMap() sẽ sử dụng model mà chúng ta đã convert được ở bên trên để làm source data. Với mapbox, mỗi source hoặc layer sẽ có 1 id riêng và duy nhất khi được add vào, và khi muốn tái sử dụng id thì phải remove layer/source có id đó.

Sau khi đã có source data thì chúng ta sẽ thêm 1 layer dựa vào data đó và phủ layer đó lên map sử dụng style của map.

*Lưu ý, khi remove thì thứ tự sẽ là remove layer -> remove source nếu ko sẽ có exception xảy ra và dẫn đến crash app.

Và cuối cùng là thành quả của mình:

Geojson còn rất nhiều data hữu ích khác, dựa vào bài viết của mình mà ae khám phá thêm nhé.

Chúc ae thành công !