Vừa qua thì trong quá trình tìm hiểu một số tính năng cho App, mình có chú ý tới 1 modules khá phổ biến là sử dụng map trong các ứng dụng di động và thấy điều này khá là cần thiết cho 1 số dự án.và mình có tìm hiểu và ứng dụng Map của bên thứ 3 đó là Mapbox và chạy thử trên React-Native.
------tài nguyên------------
- Mapbox token: dùng để định danh sản phẩm, cũng như yêu cầu tài nguyên từ Mapbox. mọi người có thể dễ dàng tạo trên web https://www.mapbox.com/
- basic skill về React Native.
- package sử dụng: @rnmapbox/maps
-------------start coding------------------
- b1: khởi tạo 1 dự án react native
mọi người có thể dễ dàng làm theo hướng dẫn ở link sau (https://reactnative.dev/docs/environment-setup). nếu có câu hỏi có thể liên hệ trực tiếp với team App
- b2: cài đặt mapbox
chạy lệnh: yarn add @rnmapbox/maps hoặc npm i @rnmapbox/maps
tiếp theo sẽ setup môi trường cho android/ios: mọi người lần lượt làm theo các bước ở link bên dưới
- b3: code: tìm tới file App.js và thay thế bằng dòng code sau
`import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';
Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');
const App = () => {
return (
<View style={styles.page}>
<View style={styles.container}>
<Mapbox.MapView style={styles.map} />
</View>
</View>
);
}
export default App;`
note: thay thế token đã tạo trên MapBox vào YOUR_ACCESSTOKEN
sau đó chạy dự án trên terminal:
- với android: yarn android
- với ios: cd ios && pod install. sau đó mở xcode mà Run.
đến đây thì mọi người có thể thấy 1 map cơ bản và đã hoàn thành việc cài đặt
----------------------------tính năng chính cần tìm hiểu --------------------
- các tính năng tiếp theo thì mình có chú ý tới 1 số tính năng chính của Mapbox thường sử dụng như nhau
- MarkerView: thẻ này cung cấp khả năng đánh dấu địa điểm trên bản đồ, nhận vào 2 giá trị toạ độ là kinh độ (longtitue) và vĩ độ (lattittue): có thể viết thêm giao diện như icon chúng ta muốn , và các nút nhấn xử lý để tương tác với địa điểm
- Camera: chính là màn hình điện thoại, qua thẻ này chúng ta có thể nhận các thông tin trung tâm màn hình, xác định độ Zoom và các thông tin rìa màn hình khi chúng ta di chuyển,
- userLocation: như tên gọi, thì nó sẽ cung cấp các thông tinn và vị trí mặc định của bạn khi đang sử dụng app
đây là các thẻ chính hay dùng mà mình làm qua khi thử nghiệm
-----------------------API docs -----------------------------------
về API MAPBOX cung cấp khá đầy đủ các api trải nghiệm mà qua đây chúng ta có thể trực tiếp lấy các thông tin về đường di chuyển, thông tin các điểm rẽ, lộ trình trên nhiều loại phương tiện. Mình có gọi thử và chúng ta hoàn toàn có thể làm 1 app đơn giản chỉ đường như gg maps, với 2 điểm đến bất kì. tuy nhiên đây chỉ là tham khảo và đề tài cho bạn nào muốn thử sức.
linnk api: https://docs.mapbox.com/api/overview/
--------------DEMO- APP---------------------
đây là project demo của mình khi thử sức trên mapbox
git : https://git.caerux.com/dopv/reactnativebase , branch: feat/mapbox
ảnh demo: 
-------happy coding -------
