0

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

Bassel Turky
  • 371
  • 7
  • 15

2 Answers2

0

can you please check the following article and let me know, it you find some useful info there? It targets MapTiler Cloud, but I believe some principles will be very similar to Server.

https://documentation.maptiler.com/hc/en-us/articles/4405444890897-How-to-display-MapLibre-GL-JS-map-using-React-JS

MapTiler
  • 1,754
  • 14
  • 22
0

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"
Bassel Turky
  • 371
  • 7
  • 15