How to use custom tiles with MapView?

[nico-idinteractive]

Please provide the following:

1. SDK Version: 40.0.0
2. Platforms(Android/iOS/web/all): iOS
3. Add the appropriate “Tag” based on what Expo library you have a question on.

Hello,

I’ve been going around in circles for a few days, here’s my problem.
I need to create an interactive map with custom tiles. I have created the tiles using MapTiler software.
(I should mention that I have already done this development on a website with Leaflet, and that I am trying to do it again for Android/iOS applications).

I use the MapView component of react-native-maps and “FileSystem.documentDirectory” to retrieve the base path of my tiles. These are located in a “/assets/tiles/” at the root of my project.

The stantard map displays fine, but whether I try to use “LocalTile” or “UrlTile” I never get my custom tiles to display.

Could someone help me?

Here is my code:

import React, { Component } from 'react';
import { Image, Platform, StyleSheet, Button, Text, View, Dimensions } from "react-native";
import MapView, { UrlTile, LocalTile } from 'react-native-maps';
import * as FileSystem from 'expo-file-system';

const styles = StyleSheet.create( {
                                      container: {
                                          height: 400,
                                          width: 400,
                                          justifyContent: 'flex-end',
                                          alignItems: 'center',
                                      },
                                      map: {
                                          width: 400,
                                          height: 500,
                                      },
                                  } );

class MapScreen extends Component {
    constructor( props ) {
        super( props );
        this.navigation  = props.navigation;

        this.templatePath = FileSystem.documentDirectory + "assets/tiles/{z}/{x}/{y}.png";
        
        this.mapRef = null;
    }

    componentDidMount() {
        this.mapRef.setMapBoundaries(
            {
                latitude: 47.59646,
                longitude: -2.40272
            },
            {
                latitude: 47.59170,
                longitude: -2.39332
            }
        )
    }

    render() {
        return (
            <View>
                <MapView
                    ref={ ( ref ) => this.mapRef = ref }
                    provider={ "google" }
                    style={ styles.map }
                    region={ {
                        latitude: 47.59452,
                        longitude: -2.39866,
                        latitudeDelta: 0.00005,
                        longitudeDelta: 0.00005,
                    } }
                    minZoomLevel={ 13 }
                     maxZoomLevel={ 18 }
                    showsUserLocation={ true }
                >
                    <UrlTile
                        urlTemplate={ this.templatePath }
                        maximumZ={ 6 }
                        zIndex={1}
                        tileSize={256}
                        shouldReplaceMapContent={true}
                        flipY={ false }
                    />
                </MapView>
            </View>
        )
    }
}

export default MapScreen