I'm trying to add markers to my map. I want to have all the location data on a separate file so I'm trying to extract the coordinates from my data.json file. The latlng coordinates are in an array in the json file. Am I using the position attribute incorrectly?
render() {
return (
<View style={styles.container}>
<DestinationButton />
<CurrentLocationButton
cb={() => {
this.centerMap();
}}
/>
<MapView
initialRegion={this.state.region}
showsUserLocation={true}
showsCompass={true}
rotateEnabled={false}
ref={(map) => {
this.map = map;
}}
style={{ flex: 1, zIndex: 0 }}
>
{data.features.map((tc) => (
<Marker
key={tc.properties.NAME}
position={{
lat: tc.geometry.coordinates[1],
lng: tc.geometry.coordinates[0],
}}
/>
))}
</MapView>
</View>
);
}
Seems like you are giving a wrong prop to <Marker/> it should be coordinate instead of position. As per docs: https://github.com/react-native-maps/react-native-maps#rendering-a-list-of-markers-on-a-map
<Marker
key={tc.properties.NAME}
coordinate={{
latitude: tc.geometry.coordinates[1],
longitude: tc.geometry.coordinates[0],
}}
/>
Related
I want to display overlay component when pressing the map marker. When pressing the button, overlay is showing fine. But when pressing the marker, it is not showing. Can someone let me know about how to display overlay when pressing the map marker.
Here is the code.
const toggleOverlay = () => {
setVisible(!visible);
};
return(
<View style={styles.container}>
<MapView style={styles.map}
showsUserLocation={true}
followUserLocation={true}
zoomEnabled={true}
showsMyLocationButton={true}
initialRegion={ mapRegion}
provider = {PROVIDER_GOOGLE}
showsTraffic={true}
>
{
locationPoints? locationPoints.map((point) => (
<Marker
coordinate={{
longitude: parseFloat(point.PointLongitude),
latitude: parseFloat(point.PointLatitude)
}}
title= {point.name}
pinColor={'blue'}
**onPress={() => (toggleOverlay)}**
>
</Marker>
))
: null}
</MapView>
<Button title="Confirm Address"
**onPress={toggleOverlay}** />
<Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
<Text>Your Address</Text>
<View>
<Text>Address</Text>
</View>
</Overlay>
</View>
);
try, maybe it works)
{
locationPoints? locationPoints.map((point) => (
<Marker
coordinate={{
longitude: parseFloat(point.PointLongitude),
latitude: parseFloat(point.PointLatitude)
}}
title= {point.name}
pinColor={'blue'}
onPress={toggleOverlay}
/>
))
: null
}
I'm implementing display of multiple markers in React Native. Checking for help in different links such as Getting- Warning: Each child in a list should have a unique "key" prop. in my React Native app, How can I get rid of this warning message?: Each child in a list should have a unique "key" prop, Warning: Each child in a list should have a unique “key” prop, Warning - Each child in a list should have a unique "key" prop etc, have been unsuccessful. All of them provide an addition of a key e.g index but the same warning pops and the app restarts. My key is vehicle.vid as indicated on the code snippet. What am I getting wrong?
....
{vehicles ?
vehicles.map((vehicle, _index) => {
return (
<>
<Marker
key={vehicle.vid}
coordinate={{
latitude: vehicle.vl_long,
longitude: vehicle.vl_lati,
}}
title={vehicle.co_name + ' - ' + vehicle.num_plate}
onPress={() => {
navigation.navigate(routes.BUS_STATUS, { car: vehicle, uTravel: travelDetials })
}}
>
<MaterialCommunityIcons
name="bus-marker"
color="red"
size={40}
/>
</Marker>
{/* <MapViewDirections
origin={{
latitude: Number(vehicle.vl_lati) ? Number(vehicle.vl_lati) : 0,
longitude: Number(vehicle.vl_long) ? Number(vehicle.vl_long) : 0,
}}
destination={{
latitude: 1.326014,
longitude: 32.418924,
}}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={3}
// strokeColor="hotpink"
strokeColor="green"
lineDashPattern={[1]}
/> */}
</>
)
})
: null}
</MapView>
</View>
<TouchableWithoutFeedback
// onPress={() => {
// console.log("Map Clicked");
// }}
>
<View
style={{
padding: 10,
color: colors.primary,
}}
>
<View style={styles.row1}>
<Feather name="activity" color={colors.iconColor} size={40} />
<Text style={{ color: colors.text }}>
No. of Available Vehicles: {vehicles.length}
</Text>
</View>
</View>
</TouchableWithoutFeedback>
</>
)
}
...
You need to add the key to the most top-level element. Is your case thats the fragment(the <>) instead of the <Marker> component. You can add a key to the fragment like so:
{vehicles ?
vehicles.map((vehicle, _index) => {
return (
<React.Fragment key={vehicle.vid}> // Was <>
<Marker
coordinate={{
latitude: vehicle.vl_long,
longitude: vehicle.vl_lati,
}}
title={vehicle.co_name + ' - ' + vehicle.num_plate}
onPress={() => {
navigation.navigate(routes.BUS_STATUS, { car: vehicle, uTravel: travelDetials })
}}
>
<MaterialCommunityIcons
name="bus-marker"
color="red"
size={40}
/>
</Marker>
...
</React.Fragment>
Checkout the React docs for more information: Fragment Docs
I want to add Images to my call out component in react-native-maps-markers. But it only shows empty rectangles. How can I fix this? Without putting image component inside a Text component. Because then its harder to align images.
return (
<View style={styles.container} >
<MapView
Provider= {PROVIDER_GOOGLE}
ref={map => this._map = map}
showsUserLocation={true}
style={styles.map}
initialRegion={this.state.initialPosition}
customMapStyle={mapStyle}>
{
this.state.coordinates.map((marker, index) => (
<Marker
key={marker.name}
ref={ref => this.state.markers[index] = ref}
//onPress={() => this.onMarkerPressed(marker, index)}
coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
title={'Safe Parking'}>
<Image
source={require('../icons/park.jpg')}
style={styles.icon}/>
<Callout>
<Image
source={marker.image}
style={styles.image}
/>
</Callout>
</Marker>
))
}
</MapView>
</View>
);
}
};
Have you set an height and width to your image ?
If yes, try to import your image instead of require like
import parkIcon from '../icons/park.jpg'
<Image source={parkIcon}
I am using react-native-map package to draw a polyline using coordinates i am receiving in API call. Line is being drawn when HOT reload is enabled on expo but not when LIVE reload is enabled.
I have converted all coordinates to array of objects in following template.
[{latitude:33.00, longitude:-74.00},{latitude:33.10, longitude:-74.02}]
And passed this array to coordinates in MapView.Polyline.
This how i am rendering MapView
<MapView
showsUserLocation
followsUserLocation
style={{ flex: 1 }}
initialRegion={{
latitude: 31.5623499,
longitude: 74.3287183,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
{this.state.allPlants.map((item, index) => {
return <MapView.Marker
key={item.id.toString()}
coordinate={{
latitude: item.latitude,
longitude: item.longitude,
}}>
<Image source={item.isDead?require("../../assets/dead_tree.png"):require("../../assets/tree.png")} key={item.id.toString()} /> </MapView.Marker>
})}
<MapView.Polyline
coordinates={this.allCoords}
strokeWidth={6}
strokeColor="red"
fillColor="rgba(100,0,0,0.5)"
/>
</MapView>
And this is how i am creating array of coordinates objects
let tmpArray=[]
if(tmp.length!==0){
for(let i=0; i<tmp.length;i++){
let tmpObj={
latitude:tmp[i].latitude,
longitude:tmp[i].longitude
}
tmpArray.push( tmpObj)
}
}
this.allCoords=tmpArray
It should be able to show polyline as it is already showing on HOT reloading, i don't understand if that is the expected behavior or this is some bug.
I wrapped MapView code into following
<View style={{ flex: 1 }}>
{this.state.isDataFetched && (
<MapView
showsUserLocation
followsUserLocation
style={{ flex: 1 }}
initialRegion={{
latitude: 31.5623499,
longitude: 74.3287183,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
{this.state.allPlants.map((item, index) => {
return <MapView.Marker
key={item.id.toString()}
coordinate={{
latitude: item.latitude,
longitude: item.longitude,
}}>
<Image source={item.isDead?require("../../assets/dead_tree.png"):require("../../assets/tree.png")} key={item.id.toString()} /> </MapView.Marker>
})}
<MapView.Polyline
coordinates={this.allCoords}
strokeWidth={6}
strokeColor="red"
fillColor="rgba(100,0,0,0.5)"
/>
</MapView>
)}
</View>
And used this.state.isDataFetched as a flag to condition rendering and it worked as expected.
I'm having trouble displaying my <MapView /> inside a Tab. I'm using react-native-scrollable-tab-view
The <MapView /> won't display in the map even after using : ...StyleSheet.absoluteFillObject. I can display the map only if I put a fix height. For example: height: 500.
Here is what my sample tab screen looks like.
styles = StyleSheet.create({
tabContent: {
flex: 1,
},
map: {
...StyleSheet.absoluteFillObject,
},
});
class HomeTemporary extends Component {
render() {
return (
<ScrollableTabView
renderTabBar={() => <ScrollableTabBar />}
>
<ScrollView tabLabel="List" style={styles.tabContent}>
<Text>Content Tab One</Text>
</ScrollView>
<ScrollView tabLabel="Map" style={styles.tabContent}>
<MapView
scrollEnabled
style={styles.map}
provider={MapView.PROVIDER_GOOGLE}
initialRegion={{
latitude: 25.2048493,
longitude: 55.2707828,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
/>
</ScrollView>
</ScrollableTabView>
);
}
}
Absolutely about what? If the map inside the view, the view component must also specify the absolute value of the width and height. In your case for tabContent.