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}
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 trying to render other markers on the map.
I have a variable in a useState that updates the location of other markers.
I've tried a lot of things but none of them has worked so far so hopefully, someone can help.
Below is my code:
<MapView
ref={mapView}
provider={PROVIDER_GOOGLE}
style={styles.map}
mapType={props.mapType}
loadingEnabled={true}
userInterfaceStyle="dark"
>
{marker != null && (
<Marker coordinate={getMarkerCoords()}>
<Entypo name="location-pin" size={50} color="purple" />
</Marker>
)}
{/* {console.log('check ------------------',trusteeMarker)} */}
{trusteeMarker !== undefined &&
trusteeMarker.length > 0 &&
trusteeMarker !== null &&
trusteeMarker.map((trustee) => {
const id = trustee.fullName;
const trusteeCoords = trustee.currentLocation.location;
<Marker key={id} coordinate={trusteeCoords}>
<Entypo name="location-pin" size={80} color="red" />
</Marker>;
})}
</MapView>
In my app I'm using react-native-maps and every time states change the map reloads. How can I avoid this behaviour? I've tried to use React.memo but it seems to don't work.
[update]
I've tried to put the MapView directly inside the return and it doesn't reload, why?
Feel free to link me everything. Here's my code:
[functional component]
const MapViewContainer = () => {
return (
<MapView
initialRegion={initialRegion}
provider="google"
ref={mapRef}
style={styles.map}
>
{/* {items.map((item, index) => {
return <Marker {...{ item, index }} />;
})} */}
</MapView>
);
};
const MemorizeMap = React.memo(MapViewContainer, areEqual);
return (
<View style={styles.container}>
<MemorizeMap />
<Button
title="update"
style={{ flex: 1 }}
onPress={() => {
setOpacity(0);
}}
/>
</View>
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>
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>