Thêm Marker Custom

import React, {Component} from 'react';
 
import {StyleSheet, View} from 'react-native';
 
import MapboxGL from '@react-native-mapbox-gl/maps';
 
export default class App extends Component {
 
constructor(props) {
super(props);
this.state = {
coordinates: [109.11,16.34] //Việt Nam
};
}
 
render() {
return (
 
<View style={styles.MainContainer}>
 
<View style={styles.SubContainer}>
 
<MapboxGL.MarkerView id={"marker"} coordinate={[109.11,16.34]}>
<View>
<View style={styles.markerContainer}>
<View style={styles.textContainer}>
<Text style={styles.text}>{"Ví dụ Market"}</Text>
</View>
<Image
source={require("./location.jpeg")}
style={{
width: 20,
height: 30,
backgroundColor: "red",
resizeMode: "cover",
}}
/>
</View>
</View>
</MapboxGL.MarkerView>
 
</View>
 
</View>
 
);
}
}
 
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
},
SubContainer: {
height: '100%',
width: '100%',
backgroundColor: 'white',
},
Mapbox: {
flex: 1,
},
markerContainer: {
alignItems: "center",
width: 60,
backgroundColor: "transparent",
height: 70,
},
textContainer: {
backgroundColor: "white",
borderRadius: 10,
flex: 1,
flexDirection: "row",
alignItems: "center",
},
text: {
textAlign: "center",
paddingHorizontal: 5,
flex: 1,
}
});
 
 
 
<div id="map"></div>
 
//mapbox
<script>
var map = new mapboxgl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
 
/* Bản đồ nền */
var basemap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
basemap.addTo(map);
 
//thêm marker
new mapboxgl.Marker({ color: '#c014df' })
.setLngLat([105.842392, 21.025755])
.addTo(map);
new mapboxgl.Marker().setLngLat([108.203065, 16.042951]).addTo(map);
new mapboxgl.Marker({ color: 'black' })
.setLngLat([106.634588, 10.807779])
.addTo(map);
</script>
//end