I want to use MapView from react-native-maps library in my react native expo project without going into Google API key pricing.
Is there any way to do that?
Currently, I am using UrlTile to display Openstreetmap maps but I am not sure if this the right way.
<MapView
region={location}
rotateEnabled={false}
style={{ flex: 1 }}
style={styles.map}
showsUserLocation
mapType="none"
>
<UrlTile
urlTemplate="https://a.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
/>
<Marker
title="Home"
coordinate={{
latitude: location.latitude,
longitude: location.longitude,
}}
/>
</MapView>
Related
I am developing an app that involves tracking another user on the user's phone. I am trying to update a marker location and display it on my user's phone. The problem is that every time I update the marker location the entire map reloads to the initial user's coordinates. How can I only rerender the marker instead of the entire map?
<View style = {styles.container}>
{!this.state.ready &&(
<ActivityIndicator size='large' color="#0000ff"/>
)}
{this.state.ready &&(
<MapView style={styles.map} region={{
latitude: this.state.where.lat,
longitude: this.state.where.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421 }}
showsUserLocation={true}>
{this.state.friendMarkers &&(
<MapView.Marker
coordinate={this.state.friendMarkers[0].coordinates}
title={this.state.friendMarkers[0].title}/>
)}
</MapView>
)}
</View>
Use RNLocation or Geolocation react-native package to get real-time user live location. These packages will update the user's live location without re-rendering the whole screen.
Is there a way to move the position of MyLocationButton?
I am using Mapview with some additional views on top of it. one of those views is on top of the MyLocationButton, and aesthetically I would like to keep it like that --> so I should move the MyLocationButton instead. Is there a way to do it? x
<MapView
style={styles.map}
showsMyLocationButton = {true}
showsUserLocation = {true}
provider={PROVIDER_GOOGLE}
customMapStyle={mapStyle}
initialRegion={{
latitude: this.state.mylocation.coords.latitude,
longitude: this.state.mylocation.coords.longitude,
latitudeDelta: 0.0922,//Zoom
longitudeDelta: 0.0421,//Zoom
}}>
In case it helps somebody, I found the solution to move the position of the button while the map continues to cover all the screen:
<MapView
(...)
mapPadding={{top:0, right:0, left:0, bottom:230}}>
(...)
</Mapview>
I am trying to get map view to work, when I am using the code below I can see the map at the right location but no sign to my Marker, I tried removing dark mode and giving the Marker an Image but still no result.
Maybe you can locate the problem and help me.
Thank you very much.
Using react-native with expo, testing on my IOS device.
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 32.060797,
longitude: 34.7617,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
pinColor={"#d62424"}
coordinate={{
latitude: 32.060797,
longitude: 34.7617
}}
image={require('../assets/images/icon.png')}
/>
</MapView>
Finally I found the solution, instead of using Marker just use MapView.Marker.
I hope I fixed your problem as well!
I've spent about 5 hours trying to get this to work with many different permutations of code, and then rebuilding. I cannot for the life of me change the default "red pointer" marker as the default marker image in react native maps.
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
...
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
ref={ref => {this.map = ref;}}
minZoomLevel={4} // default => 0
maxZoomLevel={10} // default => 20
enableZoomControl={true}
showsUserLocation = {true}
showsMyLocationButton = {true}
zoomEnabled = {true}
initialRegion={{
latitude: 37.600425,
longitude: -122.385861,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
>
<MapView.Marker
coordinate={marker.location}
image={require('./images/test.png')} <------ HERE
width={48}
height={48}
/>
</MapView>
The images definitely exist in the right folder, I've tried different image formats png/gif/jpg/svg, I've tried using {{uri:...}} and icon/image, adding and removing width/height attributes. Nothing seems to work. I'm always getting the default red pointer.
Have I missed something obvious?
The project packager/compiler fails when I require an image that doesn't exist, or an unsupported type. It definitely can see the image, but just doesn't do anything with it. Same results on the emulator and on actual device.
image={require('./images/test.png')}
This line just does nothing, as if it's being ignored somehow.
<MapView
provider={PROVIDER_GOOGLE}
style={styles.container}
region={{
latitude: this.state.latitude,
longitude: this.state.longitude,
}}
>
<Marker
coordinate={{
latitude: this.state.latitude,
longitude: this.state.longitude,
}}
description={"This is a marker in React Natve"}
>
<Image source={require('./man_marker.png')} style={{height: 35, width:35 }} />
</Marker>
</MapView>
There are two solutions:
The first solution (recommended)
Resize your marker image with image editor(such as Photoshop,....) and use as icon in marker
To do this, you can make three photos of different sizes (YOUR_MARKER.png , YOUR_MARKER#2x.png , YOUR_MARKER#3x.png) (React Native automatically displays the appropriate item).
This is a good solution if you have a large number of markers.(You can refer here to clarify this)
<Marker
coordinate={ ... }
tracksViewChanges={false}
icon={require('./YOUR_MARKER.png')}
/>
The second solution
As #shubham-raitka said you can use the Image inside the marker
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />
</Marker>
In this case, if your number of markers is high (about 50 or more) the map performance will be very low.Therefore, it is not recommended to use this method
Here's an approach that worked for me in a similar situation: Use Image in place of Marker. Pop-ups work the same as with a marker. If you try this, Image is imported from react-native. The actual image is imported as:
var dotImage = require('./pathToImage.png')
<Marker
coordinate={meter.latlng}
title={"Parking Meter"}
key={idx}
>
<Image
source={dotImage}
style={{height: 6, width: 6}}
/>
</Marker>
The way you give the width and height is a bit strange, please try with this way.
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
const markerImg = require('./images/test.png'); // <-- create a const with the path of the image
<------
------>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
ref={ref => {this.map = ref;}}
minZoomLevel={4} // default => 0
maxZoomLevel={10} // default => 20
enableZoomControl={true}
showsUserLocation = {true}
showsMyLocationButton = {true}
zoomEnabled = {true}
initialRegion={{
latitude: 37.600425,
longitude: -122.385861,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
>
<Marker
image={markerImg} // <----- add this the const with image
onPress={() => this.setState({ marker1: !this.state.marker1 })}
coordinate={{
latitude: 37.600425,
longitude: -122.385861,
}}
centerOffset={{ x: -18, y: -60 }}
anchor={{ x: 0.69, y: 1 }}
/>
</Marker>
</MapView>
I hope it works for you, works for me!
Not enough rep yet to just leave a comment, but the first solution works, I just had to add resizeMode or it cuts off the image if it's bigger.
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35, resizeMode:"contain" }} />
</Marker>
<Marker
coordinate={d.driverLocation}
title={d.driverName}
description={d.autoNumber}
onPress={() => console.warn(d.mobaNumbers)}
image={require("../../../assets/bee.png")}
>
</Marker>
Try this it should work
import {Image} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
<MapView
style={styles.mapStyle}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
customMapStyle={mapStyle}>
<Marker
draggable
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
onDragEnd={e => alert(JSON.stringify(e.nativeEvent.coordinate))}
title={'Test Marker'}
description={'This is a description of the marker'}>
<Image
source={require('./assests/custom_marker.png')}
style={{height: 35, width: 35}}
/>
</Marker>
</MapView>
I want to integrate maps in my react-native app, I am using the “react-native-maps” library for that
https://github.com/airbnb/react-native-maps
I want to use clustering but I am unable to find proper documentations related to that.
Please help me to find documentation of how to integrate maps with clustering and also tell which library is best for the implementation of clustering for both platforms, iOS and Android.
You can use mapbox/supercluster repo, and here's a gist showing how to implements supercluster to React Native. It's initially developed for browser/node applications but you can still simply npm install and use it (javascript is javascript everywhere). Add the clustered markers into your MapView (originally shared here):
<MapView ref={ref => { this.map = ref; }}>
{ this.state.markers.map((marker, index) => {
return (
<MapView.Marker
coordinate={{ latitude: marker.geometry.coordinates[1], longitude: marker.geometry.coordinates[0] }}
onPress={() => this.markerPressed(marker)}>
<Marker model={place} active={this.isSelected(place)} />
</MapView.Marker>
);
})}
</MapView>
Warning from an issue of react-native-maps:
The major issue is performance, if you need to display hundreds or
thousands of markers you're gonna have to optimize the hell out of it,
and this is where it gets really hard.
react-native-maps also have an active conflicting PR which solves this issue both in Android and iOS natively, but it waits for a merge. However, you can manually implement it.
You can use react-native-maps-super-cluster. This module wraps AirBnB's react-native-maps and uses MapBox's SuperCluster as clustering engine. This module is super easy to use.
Demo
There is one more library for clustering react-native-map-clustering.
yarn add react-native-map-clustering
import {Marker} from 'react-native-maps';
import MapView from "react-native-map-clustering";
const INITIAL_REGION = {
latitude: 52.5,
longitude: 19.2,
latitudeDelta: 8.5,
longitudeDelta: 8.5,
};
const App = () => (
<MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
<Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
<Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
<Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
<Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
<Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
<Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
<Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
<Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
<Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
</MapView>
);
How does this work with callouts?
Using this code gives me an error: Element type is invalid: expected a string...
<Marker>
<MapView.Callout tooltip>
<Text>Test Text</Text>
</MapView.Callout>
</Marker>