คู่มือการเชื่อมต่อ
เพิ่มแผนที่ MapScale ใน React Native
ใช้ MapLibre React Native และชี้ style URL ไปที่ MapScale
เริ่มต้น
ติดตั้ง native map package
ถ้าใช้ Expo ให้ใช้ development build เพราะ native map package รันใน Expo Go ไม่ได้
npm install @maplibre/maplibre-react-nativeเพิ่ม permission เฉพาะเมื่อแสดงตำแหน่งผู้ใช้
คุณแสดงแผนที่ได้โดยไม่ต้องขอ location ขอ permission เฉพาะตอนเปิดฟีเจอร์ติดตามตำแหน่งผู้ใช้
// app.json
{
"expo": {
"ios": {
"infoPlist": {
"NSLocationWhenInUseUsageDescription": "Show your position on the map."
}
}
}
}แสดงแผนที่
ส่วนที่เฉพาะของ MapScale คือ style URL เท่านั้น เก็บ key ใน app config หรือ runtime config ที่เหมาะสม
import MapLibreGL from "@maplibre/maplibre-react-native"
import { StyleSheet, View } from "react-native"
const key = "pk_test_your_key_here"
export function MapScreen() {
return (
<View style={styles.screen}>
<MapLibreGL.MapView
style={styles.map}
styleURL={`https://api.mapscale.io/styles/v1/streets?key=${key}`}
>
<MapLibreGL.Camera zoomLevel={11} centerCoordinate={[100.5018, 13.7563]} />
</MapLibreGL.MapView>
</View>
)
}
const styles = StyleSheet.create({
screen: { flex: 1 },
map: { flex: 1 },
})