react-nativeexporeact-native-mapsmaptiler

How to implement MapTiler server in React Native app

I am building a mobile app that includes a map and some markers, I found that using react-native-maps with Google API will cost a lot.

I started hosting my own map tile server using MapTiler.

My problem is I can't find a library that can display my map in React native component.

This is my MapTiler server: I don't know how to implement these raster tiles in my react native app.

I am using Expo.

enter image description here

Which library should I use that doesn't have any pricing or commercial license. If you have a good solution please give me an example.

I tried to use react-native-maps but it didn't show any tiles.

        <MapView
          region={location}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
          mapType="none"
        >
          <UrlTile
            tileSize={512}
            urlTemplate="http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"
            maximumZ={19}
          />
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>

enter image description here

Solution

  • The problem was that react native doesn't understand what localhost is. I had to change localhost into my IP address 192.168.1.1

    I got it from CMD using command ipconfig

    urlTemplate="http://192.168.1.1:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"