This is my code.
<View style={styles.map}>
<MapView
style={styles.map}
initialRegion={this.state.region}
onRegionChangeComplete={this.onRegionChange}
/>
{
this.state.allow_set_location ?
<View style={styles.markerFixed}>
<Image style={styles.marker} source={marker} />
</View> : null
}
<Polyline
coordinates={this.state.route_data}
strokeWidth={1}
strokeColor="red"
fillColor="rgba(255,0,0,0.5)"
/>
</View>
i am not able to get the polyline.
my route_data is array of objects, like [{latitude: data, longitude: data}.....]
Polyline should be wrapped by MapView component, instead of side by side.
<View style={styles.map}>
<MapView
style={styles.map}
initialRegion={this.state.region}
onRegionChangeComplete={this.onRegionChange}
>
<Polyline
coordinates={this.state.route_data}
strokeWidth={1}
strokeColor="red"
fillColor="rgba(255,0,0,0.5)"
/>
</MapView>
</View>
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've been trying to use Tap Gesture Handler in my React Native project but I'm facing some problem with nested gestures. I've one parent TapGestureHandler(let's call it A) and and child TapGestureHandler(let's call it B). When I click on B then A is also getting executed. Please help me to solve this problem.
Here's my code for TapGestureHandler A:
<TapGestureHandler
ref={ref}
onHandlerStateChange={() => console.log("1")}>
<Animated.View>
<View style={styles.container}>
<View style={styles.leftContainer}>
<ProfilePic image={user.image} />
</View>
<View style={styles.rightContainer}>
<PostCardHeader user={user} />
<Discription discription={discription} />
<View style={styles.gridContainer}>
<ImageGrid waitFor={ref} images={attachedfiles} />
</View>
<Footer />
</View>
</View>
</Animated.View>
</TapGestureHandler>
Here's my code for TapGestureHandler B:
const ImageGrid = ({waitFor}) => {
return (
<TapGestureHandler
waitFor={waitFor || undefined}
onHandlerStateChange={() => console.log("2")}>
<Animated.View style={{ flex: 1 }}>
<Image
style={styles.image}
source={images[0]} />
</Animated.View>
</TapGestureHandler>
)
}
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'm creating an APP to show points of interest of monuments. Right now I'm rendering the information on a ScrollView (vertical way). The output is like this:
I edited the image, it continues, but I think you get the point.
Here is my code:
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<ScrollView>
{monumento.pois.map((poi, index) => (
<View key={index} style={{marginBottom: 15}} >
<Tile
imageSrc = {{uri:poi.image}}
contentContainerStyle = {{marginBottom: -30}}
/>
<View style={styles.map}>
<Icon
raised
reverse
name='location-on'
color='#075e54'
size={36}
onPress={() => navigate('Mapa', {monumento: monumento})} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>{poi.name}</Text>
</View>
<View style={styles.bodyContent}>
<Text style={styles.bodyText}>{poi.description}</Text>
</View>
</View>
))}
</ScrollView>
</View>
</View>
);
What I want is to scroll normally for one Point of Interest (PoI), but the next PoI I want him to appear by scrooling horizontal (swiping left)...like this:
sample
How can I accomplish that? Thanks!
I am using react-native-maps module.I have given lat and long values and i have used MapView.Marker to show the Marker and tooltip when clicking on the marker.
But, Now I want to show the tooltip with out clicking on the marker when the map loads initially.
this is my code here:
<View style={styles.page}>
<MapView
ref="map"
style={styles.map}
region={this.state.region}
provider = {PROVIDER_DEFAULT}
zoomEnabled={true}
onRegionChange={this.onRegionChange.bind(this)}
pitchEnabled={true}
showsCompass={true}
liteMode={false}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
>
<MapView.Marker
coordinate={this.state.marker.latlng}
title={this.state.marker.title}
description={this.state.marker.description}
image={require('./assets/pin.png')}
/>
</MapView>
</View>
Can any one help how to solve this...
I couldn't find any documentation on any sort of onLoad prop for MapView so I used onLayout instead as suggested here. You will need to use the showCallout method for the Marker to show the tooltip. To do this, add a ref for the marker that you can then use in onLayout for the MapView.
<View style={styles.page}>
<MapView
ref="map"
style={styles.map}
region={this.state.region}
provider = {PROVIDER_DEFAULT}
zoomEnabled={true}
onRegionChange={this.onRegionChange.bind(this)}
pitchEnabled={true}
showsCompass={true}
liteMode={false}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
onLayout={() => { this.mark.showCallout(); }}
>
<MapView.Marker
ref={ref => { this.mark = ref; }}
coordinate={this.state.marker.latlng}
title={this.state.marker.title}
description={this.state.marker.description}
image={require('./assets/pin.png')}
/>
</MapView>
</View>