Blank display when using custom tile overlay in React Native Maps

41 views Asked by At

I want to use OpenStreetMap as a provider instead of default Google Maps or Apple Maps. I followed instructions in the documentation, my app compiles and starts successfully (through Expo Go).

Unfortunately, the screen is empty, no map is displayed.

Here is my App.js:

import { StyleSheet, View } from "react-native";
import MapView, { UrlTile } from "react-native-maps";

export default function App() {
  const urlTemplate =
    "https://openstreetmap.keannu1.duckdns.org/tile/{z}/{x}/{y}.png?";

  return (
    <View style={styles.container}>
      <MapView mapType={"none"}>
        <UrlTile
          shouldReplaceMapContent={true}
          urlTemplate={urlTemplate}
          maximumZ={19}
          flipY={false}
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Am I missing something?

0

There are 0 answers