We Keep Coding

React Native Map : How to fit Polyline coordinates to screen?

I am working with react native map and i used polyline and Marker but when i display polyline to map it not fit to screen its just shows some part of line in screen other i have to scroll then i see, so how to fit polyline coordinatin inside current screen .
But i want to make polyline look it like this. so how can i do it
here is my code look likes.
<MapView
style={styles.mapStyle}
provider={PROVIDER_GOOGLE}
minZoomLevel={0}
paddingAdjustmentBehavior="automatic"
ref={(ref) => {
this.mapRef = ref;
}}
onLayout={() =>
this.mapRef.fitToCoordinates(this.state.cord, {
edgePadding: {top: 50, right: 10, bottom: 10, left: 10},
animated: false,
})
}
onMapReady={this.onMapReadyHandler.bind(this)}
showsUserLocation={true}
fitToElements={true}
region={{
latitude: this.state.start[0],
longitude: this.state.start[1],
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
initialRegion={{
latitude: this.state.start[0],
longitude: this.state.start[1],
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<Circle
center={{
latitude: this.state.start[0],
longitude: this.state.start[1],
}}
radius={40}
strokeColor={'blue'}
strokeWidth={6}
fillColor={'#fff'}
zIndex={1}
/>
{speed.map((d) =>
d.segments.map((c, i) => (
<Polyline
key={i}
coordinates={c.coordinates.map((c) => ({
latitude: c[0],
longitude: c[1],
}))}
strokeColor={c.color}
strokeWidth={6}></Polyline>
)),
)}
</MapView>
Thanks in advance

There is a solution to your problem. You have to average the sets of location data.
Here is the sample code.
let coords=[{latitude:28.97979,longitude:73.386429864}, {latitude:28.32243,longitude:73.329437204}, {latitude:28.244234,longitude:73.32482894}, {latitude:28.686976,longitude:73.2342056}, {latitude:28.23325235,longitude:73.83562325}];
let sumLat = coords.reduce((a, c) => { return parseFloat(a) + parseFloat(c.latitude)}, 0);
let sumLong = coords.reduce((a, c) => { return parseFloat(a) + parseFloat(c.longitude)}, 0);
let avgLat = (sumLat / coords.length) || 0;
let avgLong = (sumLong / coords.length) || 0;
setRegion({
latitude: parseFloat(avgLat),
longitude: avgLong,
latitudeDelta: 0.20,
longitudeDelta: 0.20,
});

React Native Map Marker does NOT maintain the color assigned to it

I have 85 Locations in a list . Each location has a status of maybe , yes , or no. where
Yes = Green pin color
No = Red pin color
Maybe = Orange pin color
Whenever I tap on a certain marker, its color will change to green. then if I tap on the map, the color will go back to whatever its suppose to be. Sometimes the markers render with the wrong color too. it's starting to get very frustrating due to the fact that such a simple task is yet so complex in this accomplish in this framework.
This is my code :
const get_color = (v) => {
switch (v.stop_status) {
case 'yes':
return `green`
case 'maybe':
return `orange`
case 'no':
return `red`
}
}
<MapView
style={{ flex: 1 }}
region={{
latitude: 31.594,
longitude: -102.74,
latitudeDelta: 0.015 * 4000,
longitudeDelta: 0.015 * 4000,
}}
showsUserLocation={true}
>
{crossings.length != 0
? crossings.map((l, i) => (
<Marker
key={i}
pinColor={get_color(l.stop_status)}
coordinate={{
latitude: parseFloat(l.stop_latitude),
longitude: parseFloat(l.stop_longitude),
}}
title={l.stop_name}
/>
))
: null}
</MapView>
Any help would be very appreciated

How I set Markers in React Native Mapview

I'm using react-native-maps, I have map showing and also my current
latitude and longitude but I don't know how to show the marker in the map with latitude and longitude.
Code for lat and long:
callLocation(that){
navigator.geolocation.getCurrentPosition(
(position) => {
const currentLongitude = position.coords.longitude;
const currentLatitude = position.coords.latitude;
that.setState({ currentLongitude:currentLongitude });
that.setState({ currentLatitude:currentLatitude });
},
(error) => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
that.watchID = navigator.geolocation.watchPosition((position) => {
console.log(position);
const currentLongitude = position.coords.longitude;
const currentLatitude = position.coords.latitude;
that.setState({ currentLongitude:currentLongitude });
that.setState({ currentLatitude:currentLatitude });
});}
Code for Map:
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={{
latitude: this.state.currentLatitude,
longitude: this.state.currentLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
</MapView>
</View>

Working example:
<MapView provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT} // remove if not using Google Maps
style={{width: '100%', height: FULL_SH*0.51, marginTop: 65*SH}}
initialRegion={{
latitude: this.state.myLat ? this.state.myLat : 38.4555,
longitude: this.state.myLon ? this.state.myLon : 27.1199,
latitudeDelta: 0.015,
longitudeDelta: 0.0121}}>
<MapView.Marker
coordinate={{latitude: 38.4555, longitude: 27.1199}}
title={'Deneme'}
/>
<MapView.Marker
onPress={() => this.setState({visible: true}) + setTimeout(() => alert(this.state.visible), 200)}
description={'güzel mekan'}
coordinate={{latitude: 38.4555, longitude: 27.1129}}
title={'Deneme'}/>
</MapView>

You should use the Marker component.
Example:
import { MapView, Marker } from 'react-native-maps';
<MapView
style={styles.map}
initialRegion={{
latitude: this.state.currentLatitude,
longitude: this.state.currentLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{latitude: 40.741075, longitude: 74.0003317}}
title={'title'}
description={'description'}
/>
</MapView>

onUserLocationChange changes React Native Maps region

I'm using MapView from 'react-native-maps'
I can't get the "showsMyLocationButton" to show, so I'm implementing my own.
I want do this without using React Native's geolocation because I find it to be slower than react-native-maps prop showsUserLocation. I use onUserLocationChange event which returns the coordinates. However when firing the onUserLocationChange event and setting a state which contains the userLocation, it automatically updates the region without me explicitly asking for it.
This is my code:
display_my_location(coordinate){
alert("region changed")
this.setState({
region: {
latitude: coordinate.latitude,
longitude: coordinate.longitude,
latitudeDelta: 0.004,
longitudeDelta: 0.004
},
});
}
setUserLocation(coordinate){
//alert("User location changed MAP SHOULDNT MOVE")
this.setState({
userLocation: {
latitude: coordinate.latitude,
longitude: coordinate.longitude,
latitudeDelta: 0.004,
longitudeDelta: 0.004
}
})
}
<MapView
style={styles.map}
showsMyLocationButton={true}
onUserLocationChange={locationChangedResult => this.setUserLocation(locationChangedResult.nativeEvent.coordinate)}
initialRegion={this.state.region_amon}
showsUserLocation={true}
region={this.state.region}
mapType={this.state.map_style}
showsCompass = {true}
showsMyLocationButton={true}
chacheEnabled={false}
zoomEnabled={true}

I believe you can fix this by deleting the region prop from the MapView altogether. If you need to have the map's bounding box change programmatically you can attach a ref to the map and update in componentDidUpdate using the appropriate MapView method here:
https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods

I have a workaround for the above issue, we can have a custom icon on the map. After clicking on the custom icon trigger a method. In the method get the current location coordinates using Geolocation and fire animateToRegion and pass the coordinates.
Step 1: Declare mapRef
const mapRef = useRef(null);
Step 2: Assing mapRef to MapView
<View style={{flex: 1}>
<MapView
ref={mapRef}
...........
/>
<TouchableOpacity
onPress={currentLocationHandler}>
<MaterialIcons
name="my-location"
size={24}
color="black"
/>
</TouchableOpacity>
</View>
Step 3: currentLocationHandler method
const currentLocationHandler = () => {
<!-- Get location coordinates using GeoLocation npm package -->
let currentRegion = {
latitude: latitude from geolocation,
longitude: longitude from geolocation,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
};
mapRef.current.animateToRegion(currentRegion, 3 * 1000);
}
I hope the above steps help you to solve the issue

How do I set a marker in MapView of React Native

I want to set a marker on MapView in React Native, but I can't find any information through official documents of MapView.
If it is not allowed in that way, how can I use existed react module such as react-googlemaps in React Native?

Thank you #naoufal.
Finally I am able to display markers on map for react native IOS.
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0,
longitudeDelta: 0.0,
}}
>
<MapView.Marker
coordinate={{latitude: 37.78825,
longitude: -122.4324}}
title={"title"}
description={"description"}
/>
</MapView>
</View>
For map and container styles, I have used following styles:
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
});
I have referred following link:
React native IOS- Display Markers on map

You can set markers using the annotations prop.
For example:
var markers = [
{
latitude: 45.65,
longitude: -78.90,
title: 'Foo Place',
subtitle: '1234 Foo Drive'
}
];
<MapView
region={...}
annotations={markers}
/>

import MapView, { Marker } from 'react-native-maps';
<View>
<MapView
style={styles.mapStyle}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker coordinate = {{latitude: 37.78825,longitude: -122.4324}}
pinColor = {"purple"} // any color
title={"title"}
description={"description"}/>
</MapView>
</View>

For those looking for a dynamic (e.g., from API), rather than hardcoded coordinates; here's the copy/paste snippet from one of the screens automatically generated by Expo CLI, included React Hooks:
import axios from "axios";
import MapView from "react-native-maps";
import { Dimensions, StyleSheet } from "react-native";
import { Marker } from "react-native-maps";
import { Text, View } from "../components/Themed";
export default function TabTwoScreen() {
const [markers, setMarkers] = useState(null);
useEffect(() => {
axios({
method: "GET",
url: "https://API_URL...",
headers: {
Authorization: `Bearer MY_TOKEN_ABC123...`,
Accept: "application/json",
},
})
.then((response) => {
setMarkers(response.data.results);
})
.catch((error) => {
console.log(error);
});
}, []); // "[]" makes sure the effect will run only once.
return (
<View style={styles.container}>
<Text style={styles.title}>Tab Two</Text>
<MapView style={styles.map}>
{markers &&
markers.map((marker: any, index: number) => (
<Marker
key={index}
coordinate={{
latitude: marker.location[1],
longitude: marker.location[0],
}}
title={marker.title}
description={marker.description}
/>
))}
</MapView>
</View>
);
}
const styles = StyleSheet.create({
// Add your styles here...
});

Updated code - 2020 | React Native 0.63
import MapView, { Marker } from "react-native-maps";
<MapView
style={styles.mapStyle}
region={{
latitude: this.state.mapLat,
longitude: this.state.mapLong,
latitudeDelta: 0.001663,
longitudeDelta: 0.002001,
}}
onRegionChangeComplete={this.onRegionChange}
>
<Marker
coordinate={{latitude: 51.5078788, longitude: -0.0877321}}
>
</Marker>
</MapView>

According to this issue, it's not exposed yet. You won't be able to use the web-React package either, React Native doesn't work like that.
Two suggestions:
Wait for the above issue to be resolved to get a proper API
Try and use WebView to link to a Google Map with an annotation
I'm not actually certain whether #2 is possible though.

import MapView from 'react-native-maps';
<View style={StyleSheet.absoluteFillObject}>
<MapView style={styles.map}
showsUserLocation //to show user current location when given access
loadingEnabled //to show loading while map loading
style={styles.map}
initialRegion={{
latitude,
longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
{
locations && locations.map((location, index) => {
const {
coords: { latitude, longitude }
} = location;
return (
<MapView.Marker
key={index}
coordinate={{ latitude, longitude }}
title={"title"}
description={"address"}
// onPress={this.onMarkerPress(location)}
/>
)
})
}
</MapView>
</View>```
const styles = StyleSheet.create({
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
});
"dependencies": {
"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "0.61.2",
"react-native-maps": "git+https://git#github.com/react-native-community/react-native-maps.git"
},
Try using this. Hope it helps to mark for many locations. Happy Coding.

Thank you #zia_qureshi. Finally I am able to display markers on map for react native android.
import MapView, { Marker } from "react-native-maps";
const App = () => {
const [region, setRegion] = useState({
latitude: 51.5078788,
longitude: -0.0877321,
latitudeDelta: 0.009,
longitudeDelta: 0.009
});
return (
<MapView
style={{ flex: 1 }}
region={region}
onRegionChangeComplete={region => setRegion(region)}
>
<Marker coordinate={{ latitude: 51.5078788, longitude: -0.0877321 }} />
</MapView>
);
};
export default App;