I'm trying to showing multiple marker in React Native Mapview. My code
this.state = {
coords: [
{ latitude: 23.759119, longitude: 90.411804 },
{ latitude: 23.759188, longitude: 90.41167 },
{ latitude: 23.759127, longitude: 90.41138 },
{ latitude: 23.759224, longitude: 90.411995 },
{ latitude: 23.7591, longitude: 90.41138 }
]}
It's working when code like as
<Marker coordinate={this.state.coords[0]} />
<Marker coordinate={this.state.coords[1]} />
<Marker coordinate={this.state.coords[2]} />
<Marker coordinate={this.state.coords[3]} />
<Marker coordinate={this.state.coords[4]} />
But not working when code like as
{this.state.coords.map((c, index) => {
<Marker key={index} coordinate={c} />;
})}
I didn't get any error. Also not understood why not working the codes. Anyone can help me?
I got the solution. I've not returning anything. So modify the code like
{this.state.coords.map((c, index) => {
return <Marker key={index} coordinate={c} />;
})}
Related
The map renders just fine but ignores the setMapBoundaries.
What am I doing wrong please?
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
mapType="hybrid"
region={location}
setMapBoundaries ={{
northEast: {
latitude: 17.31,
longitude: -61.55,
},
southWest: {
latitude: 16.85,
longitude: -62.07,
},
}}
>
In my Android app it drawing the polyline but it not functioning in Web. I could not found any example even in that storybook. but In docs mentioned that it supports polyline.
MyCode
<MapView
provider={this.props.provider}
style={styles.map}
initialRegion={this.state.region}
onPress={e => this.onMapPress(e)}
onLayout={()=>console.log('map on layout')}
ref={(ref) => { this.mapRef = ref }}
onRegionChange={this.onRegionChange}
>
<MapView.Marker
coordinate={
{
latitude: 17.43745,
longitude: 78.48229
}
}
title={'pickup Location'}
/>
<MapView.Marker
coordinate={
{
latitude: 17.4049696,
longitude: 78.4043356
}
}
title={'pickup Location'}
pinColor="green"
/>
<MapView.Polyline coordinates={this.dummyCoords} strokeWidth={2} strokeColor={'rgba(r,g,b,0.5)'} fillColor={'rgba(r,g,b,0.5)'}/>
</MapView>
Can anyone can share example, I'm stuck.
I created the map using react-native-maps.Now i need to get latitude & longitude as a text when click on map.
I tried this way but it gives an error"Can't find variable:coordinate".
export default class Location extends Component {
constructor(props) {
super(props);
this.state = {
markers: []
};
this.handlePress = this.handlePress.bind(this);
}
handlePress(e) {
this.setState({
markers: [
...this.state.markers,
{
coordinate: e.nativeEvent.coordinate,
key: coordinate,
color: randomColor()
}
]
});
console.log(e.nativeEvent);
}
render() {
return (
<MapView
style={styles.map}
initialRegion={{
latitude: 7.8731,
longitude: 80.7718,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
onPress={e => this.handlePress(e)}
>
{this.state.markers.map(marker => (
<Marker
key={marker.key}
coordinate={marker.coordinate}
pinColor={marker.color}
>
<View style={styles.marker}>
<Text style={styles.text}>{marker.coordinate}</Text>
</View>
</Marker>
))}
</MapView>
);
}
}
How i fix it?
I solved it.
export default class Location extends Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
markers: {
coordinate: {
latitude: 4,
longitude: 4,
},
key: id,
color: randomColor(),
}
};
}
onMapPress(e) {
this.setState({
markers:
{
coordinate: e.nativeEvent.coordinate,
key: id++,
color: randomColor(),
},
});
SaveAddress=()=>{
console.log(JSON.stringify(this.state.markers[0].coordinate.latitude))
}
}
render() {
return (
<MapView
provider={this.props.provider}
style={styles.map}
initialRegion={this.state.region}
onPress={e => this.onMapPress(e)}
>
<Marker
key={this.state.markers.key}
coordinate={this.state.markers.coordinate}
pinColor={this.state.markers.color}
>
<View style={styles.marker}>
<Text style={styles.text}>
{JSON.stringify(this.state.markers.coordinate)}</Text>
</View>
</Marker>
</MapView>
);
}
}
Add an onPress event to the map. like below. It will return the coordinates of pressed location in the map.
onPress={ (event) => console.log(event.nativeEvent.coordinate) }
So the code will be,
<MapView style = {styles.map}
initialRegion = {{
latitude: 7.8731,
longitude: 80.7718,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421, }}
onPress={ (event) => console.log(event.nativeEvent.coordinate) }
/>
I have implemented a MapView with react-native-maps. I'm trying to change Marker's pinColor by clicking on it.
Note: I have large amounts of markers. So I don't think refreshing all view can be a good solution. I need directly change the selected marker's color.
I didn't find how to do it. I tried below code:
class TestMap extends React.Component {
constructor(props) {
this.state = {
testColor: "#FFFFFF",
userLatitude:0,
userLongitude:0,
data:[]
}
}
render() {
return (
<MapView
provider={PROVIDER_GOOGLE}
showsTraffic={true}
showsBuildings={true}
toolbarEnabled={true}
loadingEnabled={true}
style={styles.map}
initialRegion={{
latitude: this.state.userLatitude,
longitude: this.state.userLongitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}}
onPoiClick={this.onPoiClick}
showsUserLocation={true}
followsUserLocation={true}
showsMyLocationButton={true}
loadingBackgroundColor="#FEA405"
loadingIndicatorColor="white"
onLongPress={e => this.onMapPress(e)}
enableZoomControl
>
{this.ListMarkers()}
</MapView>
)};
ListMarkers() {
return this.state.data.map((data, i) => {
return (
<Marker
key={i}
onPress={e => this.onPressMarker(e, i, data)}
coordinate={{
longitude: data.LONGITUDE,
latitude: data.LATITUDE
}}
pinColor={this.state.testColor}
/>
)}
)};
onPressMarker(e, index, data) {
this.setState({testColor:"#000000"});
}
}
I expect the color of marker should change after clicking on it but it is not working.
Thanks for your help.
You can set the selected pin in the state and use a different style in that case, if you have some id in your data you can use that value instead of the index:
constructor(props) {
this.state = {
selectedPin: -1,
}
}
ListMarkers = () => {
return this.state.data.map((data, i) => {
return (
<Marker
key={i}
onPress={e => this.onPressMarker(e, i, data)}
coordinate={{
longitude: data.LONGITUDE,
latitude: data.LATITUDE
}}
pinColor={ i === this.state.selectedPin ? '#FF0000' : '#FFFFFF'}
/>
)}
)};
onPressMarker = (e, index, data)=> {
this.setState({selectedPin:index});
}
Is possible to remove marker from map view? How to remove marker from google map view. I using "react-native-maps" display google map.
Please Help.
To be able to remove or add markers, you just need to do this
//Note : my map markers is => this.props.markers
componentDidMount() {
this.renderMarkers(this.props.markers)
}
async renderMarkers(mapMarkers) {
let markers = [];
markers = mapMarkers.map(marker => (<Marker
key={marker.code}
coordinate={{latitude: marker.lat, longitude: marker.lng}}
onPress={{}}
/>)
);
this.setState({markers});
}
refreshMarkers() {
this.renderMarkers(this.props.markers).then(() => {
this.forceUpdate();
});
}
render() {
return (
<MapView
ref={(ref) => this.mapView = ref}
style={styles.map}
region={this.props.coordinate}
>
{this.state.markers}
</MapView>
);
}
Here's how I do it.
Essentially, you need to keep an array of markers in the state, then remove the marker you want to delete from the state.
I store the list of markers in the state like so:
this.state = {
markers: [],
};
When you actually create the markers, you pass the index in the function that will remove the marker from the state. In this case onMarkerPress(index)
createMarkers() {
return this.state.markers.map((marker, index) => (
<Marker
draggable
onPress={event => this.onMarkerPress(index)}
key={index}
coordinate={{
latitude: parseFloat(marker.latitude),
longitude: parseFloat(marker.longitude),
}}
/>
));
}
Here's the onMarkerPress function:
onMarkerPress(index) {
this.state.markers.splice(index, 1);
this.setState({markers: this.state.markers});
}
And finally, you map component will look like this:
<MapView
style={styles.map}
mapType={'satellite'}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 45.50235905860018,
longitude: -73.60357092645054,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onLongPress={e => this.addNewMarker(e)}>
{this.createMarkers()}
</MapView>
And that's it!