I am trying to use openstreetmap tile in UrlTile but I am getting duplicate layers, openstreetmap and default google map, how can I remove google map layer?
This is my component:
import { StyleSheet, Text, View, Button } from "react-native";
import MapView, {
PROVIDER_GOOGLE,
MAP_TYPES,
PROVIDER_DEFAULT,
UrlTile,
Marker,
} from "react-native-maps";
import React, { useEffect } from "react";
export default function Home({ navigation }) {
let location = {
latitude: 23.259933,
longitude: 77.412613,
latitudeDelta: 0.009,
longitudeDelta: 0.009,
};
return (
<View style={styles.container}>
<View style={styles.myMap}>
<MapView
region={location}
rotateEnabled={false}
style={{ flex: 1 }}
style={styles.map}
showsUserLocation
>
<UrlTile
urlTemplate="https://a.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
maximumZ={19}
/>
<Marker
title="Home"
coordinate={{
latitude: location.latitude,
longitude: location.longitude,
}}
/>
</MapView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ffd",
alignItems: "center",
justifyContent: "center",
},
btn1: {
margin: 20,
},
btn2: {
margin: 20,
},
btns: {
flex: 1,
flexDirection: "row",
backgroundColor: "grey",
},
myMap: {
flex: 2,
backgroundColor: "white",
width: "100%",
marginTop: 30,
marginBottom: 30,
},
map: {
width: "100%",
height: "100%",
},
});
Also, when I switch openstreetmap tile with my own MapTiler server tiles it doesn't show anything, just google map
'http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png'
One last thing, I need to know if this going to cost me, I am required to use Google API key to run react-native-maps library, I need some explanation.
Thank you in advance.
