[screenshot][1]
mapview :
return (
<MapView
provider={PROVIDER_GOOGLE}
style={[styles.container, style?.container]}
// customMapStyle={mapStyle.current}
initialRegion={{
latitude: currentPosition?.lat ? currentPosition?.lat : point.lat,
longitude: currentPosition?.lng ? currentPosition?.lng : point.lng,
longitudeDelta: 0.1,
latitudeDelta: 0.1
}}
mapType="standard"
showsUserLocation={true}
showsMyLocationButton={true}
followsUserLocation={true}
>
<GymCard></GymCard>
</MapView>
);
my component(GymCard) :
return (
<View style={styles.container}>
<Text.H1> hello </Text.H1>
</View>
);
Component style :
export default StyleSheet.create({
container: {
backgroundColor: "red",
position: "absolute",
top: 100,
left: 100,
height: 200,
borderRadius: SMALL_BORDER_RADIUS
}
});
Related
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps"
const Location = (props)=>{
const { states } = useContext(Context)
const place = states.place
return(
<ImageBackground
style={{flex:1}}
source={require('../../img/mypoint-wallpaper.jpg')}>
<View style={styles.container}>
<MapView style={{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}}
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
initialRegion={{
latitude: place && place.latitude,
longitude: place && place.longitude,
longitudeDelta: 0.01,
latitudeDelta: 0.01
}}>
{
(place.latitude && place.longitude) ?
<Marker
title={place.nome}
coordinate={{
latitude: place.latitude,
longitude: place.longitude
}}/>
: null
}
</MapView>
</View>
</ImageBackground>
)
}
import MapView, { Polyline, Circle, Marker, MAP_TYPES } from 'react-native-maps';
<MapView
style={styles.maps}
mapType={MAP_TYPES.HYBRID}
liteMode={false}
ref={(ref) => (this.map = ref)}[![enter image description here][1]][1]
zoomEnabled={true}
zoomControlEnabled={true}
showsCompass={true}
moveOnMarkerPress={true}
onMapReady={this.onMapRender.bind(this)}
onRegionChangeComplete ={this.OnRegionChange.bind(this)}
region={
this.state.createRouteMapArray.length > 0 ?
this.getRegionForCoordinates(this.state.createRouteMapArray)
:
{
latitude: this.state.selectedBoatLatitude,
longitude: this.state.selectedBoatLongitude,
latitudeDelta: 0.1245,
longitudeDelta: 0.1245,
}
}
initialRegion = {
this.state.createRouteMapArray.length > 0 ?
this.getRegionForCoordinates(this.state.createRouteMapArray)
:
{
latitude: this.state.selectedBoatLatitude,
longitude: this.state.selectedBoatLongitude,
latitudeDelta: 0.1245,
longitudeDelta: 0.1245,
}
}>
{
this.state.screenType == "completedtrip" || this.state.screenType == "ongoingtrip" ?
this.state.createRouteMapArray != null && this.state.createRouteMapArray.map((marker, index) => (
<Marker key={index}
coordinate={this.state.createRouteMapArray[index]}
// coordinate={{
// latitude: this.state.selectedBoatLatitude,
// longitude: this.state.selectedBoatLongitude,
// }}
tracksViewChanges={false}>
{
index == 0 ? <View style={{ backgroundColor: '#DED532', height: 14, width: 14,
borderRadius: 14 / 2, marginTop: 4 }}>
:
index == this.state.createRouteMapArray.length - 1 ? <View style={{
backgroundColor: '#71CE43', height: 14, width: 14 }}> :
<View style={{ backgroundColor: '#AAB328', height: 14, width: 14,
borderRadius: 14 / 2, marginTop: 4 }}>
}
))
: null
}
[1]: https://i.stack.imgur.com/3rS8C.png
Please find that image, like that i need to display. Right now we are using react-native-maps package display the marker in the maps.
Also i need to display arrow mark. I don't how to achieve. help me...
Thanks in advance.
I use react-native-maps to display an array of positions using custom marker. I want to overlay the selected maker, but did not found the right solution. Using position: 'absolute' for the selected marker changes its position in the map.
Here is the code of the MapView:
<MapView
style={styles.map}
region={region} // initial region is user location if myPosition or coordinates of search
// onRegionChange={onRegionChange}
>
<View style={{position: 'absolute'}}>
{data.map((item) => (
<Marker
onPress={() => handleMarkerPress(item)}
coordinate={{
latitude: item.latitude,
longitude: item.longitude,
}}
// image={require('Resources/geoloc.png')}
// pinColor={item.id === visibleItemId ? 'red' : 'blue'}
key={item.id}>
<MosqueMarquer
mosqueImage={item.images}
itemId={item.id}
visibleItemId={visibleItemId}
distance={item.distance_result}
/>
</Marker>
))}
{isUserGeoLoc ? (
<Marker
coordinate={{
latitude: userLocation.latitude,
longitude: userLocation.longitude,
}}
description={'Your are here'}>
<Image
resizeMode="contain"
source={require('Resources/user_location.png')}
style={{tintColor: '#4280ee', height: 25}}
/>
</Marker>
) : null}
</View>
</MapView>
And here is the custom marker code:
const MosqueMarquer = (props) => {
const relativeStyle =
props.itemId == props.visibleItemId
? {position: 'absolute', tintColor: '#428947', color: '#fff', zIndex: 1}
: {position: null, tintColor: '#fff', color: '#3c423d', zIndex: 0};
return (
<ImageBackground
resizeMode="contain"
source={require('Resources/square_marker.png')}
style={{
...styles.imageBackground,
position: relativeStyle.position,
zIndex: relativeStyle.zIndex,
}}
imageStyle={{tintColor: relativeStyle.tintColor}}>
<Text style={{...styles.text, color: relativeStyle.color}}>
{props.distance}m
</Text>
</ImageBackground>
);
};
export default MosqueMarquer;
const styles = StyleSheet.create({
imageBackground: {
width: 70,
height: 70,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: common.FONT_SIZE_H38,
},
});
the selected marker in green is under the none selected one:
THANKS
<XMarksTheSpot coordinates={coordinatesOfYOurMarker} center={center} />
XMarksTheSpot ->
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { Polygon, Polyline, Marker } from 'react-native-maps';
class XMarksTheSpot extends React.Component {
render() {
return (
<View>
<Polygon
coordinates={this.props.coordinates}
strokeColor="rgba(0, 0, 0, 1)"
strokeWidth={3}
/>
<Polyline
coordinates={[this.props.coordinates[0], this.props.coordinates[2]]}
/>
<Polyline
coordinates={[this.props.coordinates[1], this.props.coordinates[3]]}
/>
<Marker coordinate={this.props.center} />
</View>
);
}
}
XMarksTheSpot.propTypes = {
coordinates: PropTypes.array,
center: PropTypes.object,
zIndex: PropTypes.number,
};
export default XMarksTheSpot;
This function would be called to get the location of circle on
Button OnPress
const checkPosition = () => {
circle.measure((fx, fy, width, height, px, py) => {
console.log('Component width is: ' + width);
console.log('Component height is: ' + height);
console.log('X offset to page: ' + px);
console.log('Y offset to page: ' + py);
});
};
Return statement of the Functional Component in React Native
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} style={styles.mapStyle}>
<Circle
ref={circle}
center={area}
radius={radius}
draggable
fillColor="rgba(112, 181, 44, 0.52)"
strokeColor="rgba(85, 85, 85, 0.52)"
/>
</MapView>
<View style={{ position: "absolute", bottom: 10, width: "100%",
justifyContent: "center", alignItems: "center" }}>
<Button onPress={checkPosition} title="Submit"></Button>
</View>
</View>
Complete code and Link to Snack:
https://snack.expo.io/#fahad492/mapview-issue
I am using react-native-maps on android. I put a custom button clicking on which should go to supplied coordinates (my current location)
<MapView
ref={(map) => { this.map = map; }}
provider={PROVIDER_GOOGLE}
style={{ height: '100%', width: '100%' }}
annotations={markers}
showsUserLocation={true}
showsMyLocationButton={true}
initialRegion={this.state.region}
onRegionChangeComplete={this.onRegionChange}
>
my button -
<TouchableOpacity onPress={this.gotToMyLocation} style={[Style.alignJustifyCenter, {
width: 60, height: 60,
position: "absolute", bottom: 20, right: 20, borderRadius: 30, backgroundColor: "#d2d2d2"
}]}>
<Image
style={{ width: 40, height: 40 }}
source={Images.myLocation}
/>
</TouchableOpacity>
gotToMyLocation method -
gotToMyLocation(){
console.log('gotToMyLocation is called')
navigator.geolocation.getCurrentPosition(
({ coords }) => {
console.log("curent location: ", coords)
console.log(this.map);
if (this.map) {
console.log("curent location: ", coords)
this.map.animateToRegion({
latitude: coords.latitude,
longitude: coords.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005
})
}
},
(error) => alert('Error: Are location services on?'),
{ enableHighAccuracy: true }
)
}
console.log(this.map) always shows undefined.
I want to move map to my current location when clicking the button.
Default my location button
showsUserLocation={true}
showsMyLocationButton={true}
Example:
<MapView
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={{
...StyleSheet.absoluteFillObject,
width: '100%',
}}
initialRegion={{
latitude: targetLocation.latitude,
longitude: targetLocation.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
A custom button
<MaterialIcons
style={style.myLocationIcon}
name="my-location"
onPress={() => {
dispatch(settingActions.getLocation());
mapRef.current.animateToRegion({
latitude: myLatitude,
longitude: myLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
}}
/>
For this you need to define mapRef
export const mapRef = React.createRef();
return(
<MapView
ref={mapRef}
Animation
mapRef.current.animateToRegion({ will take care of animation while you switch from one location to another.
Actually i found out a silly mistake where binding the method would make it work. may be useful to someone.
this.gotToMyLocation = this.gotToMyLocation.bind(this);
move your function gotToMyLocation:
if Using Class - in class before render()
or
if using function - use function gotToMyLocation(){...} and don't use this