Blank map when using open-street-maps

Viewed 16

I'm trying to use open street maps tile server with react-native-maps in an expo app. But, with any tile url, for example: http://c.tile.openstreetmap.org/{z}/{x}/{y}.png I got only a blank screen

blank map

                <MapView
                    ref={map}
                    style={styles.map}
                    customMapStyle={colorMode === "dark" ? mapThemes.dark : mapThemes.light}
                    showsUserLocation={true}
                    showsMyLocationButton={false}
                    followsUserLocation={true}
                    showsCompass={false}
                    showsTraffic={false}
                    onPanDrag={() => {
                        setFollowUser(false);
                    }}
                    onUserLocationChange={(location) => {
                        if (followUser) {
                            map?.current.animateCamera({
                                center: {
                                    latitude: location.nativeEvent.coordinate?.latitude || 0,
                                    longitude: location.nativeEvent.coordinate?.longitude || 0,
                                },
                                heading: location.nativeEvent.coordinate?.heading,
                                pitch: 25,
                                zoom: 18,
                            });
                        }

                        setLine([...line, location.nativeEvent.coordinate]);
                    }}
                    provider={PROVIDER_GOOGLE}
                    mapType={MAP_TYPES.NONE}
                >
                    <UrlTile urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png" zIndex={1} />
                    {/* <Polyline coordinates={line} strokeColor="#F00" strokeWidth={6} /> */}
                </MapView>

obs: Map works fine when using google provider

0 Answers
Related