Osmdroid (Open Street Maps) not working on iOS, but working on Android

[Android773]

Is this a bug report?

Yes.

Have you read the Installation Instructions?

Yes.

Environment

react-native: 0.59.9 react: 16.8.3 react-native-maps-osmdroid: ^0.23.0-rc2 Target Platform: iOS - 12.2 Simulator/iPhone XR

Steps to Reproduce

1. Created new React Native project using, react-native-init AppName
2. Added osmdroid library using, yarn add react-native-maps-osmdroid
3. Linked using react-native link react-native-maps-osmdroid
4. Added following code,

import MapView from 'react-native-maps-osmdroid';

<MapView
    style={{flex: 1}}
    initialRegion={{
        latitude: 30.7333,
        longitude: 76.7794,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}
/>

If I follow the above mentioned steps and run the app on Android, then it shows Open Street Maps, I think that is because on Android the default provider is osmdroid.

But if I run the app on iOS device, then by default it shows Apple Maps.

5. So I changed provider to osmdroid like the following,

import MapView, { PROVIDER_OSMDROID } from 'react-native-maps-osmdroid';

<MapView
    style={{flex: 1}}
    provider={ PROVIDER_OSMDROID }
    initialRegion={{
        latitude: 30.7333,
        longitude: 76.7794,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}
/>

But it doesn't work and throws error.

Expected Behavior

It should show Open Street Map on App.

Actual Behavior

Getting following Error,

"Invariant Violation: Element type is invalid: expected a string (for built in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports."

Suggestion:

• Right now it only shows installation instructions of react-native-maps. From that a new developer might not get that he/she needs to install react-native-maps-osmdroid. So it will be better and very helpful if you could add installation instructions as well in the read me file. Thanks.

Reproducible Demo

[Peretz30]

react-native-maps-osmdroid based on Osmdroid. Osmdroid - OpenStreetMaps implementation for Android You can use AppleMaps provider for iOS.

Final code can look like this:

import {  Platform} from 'react-native'
import MapView from "react-native-maps-osmdroid"

<MapView
provider={Platform.OS === 'ios' ? null : 'osmdroid'}
/>

[Android773]

@Peretz30 Basically I want to show Osmdroid - Open Street Maps on iOS as well. That is what I was trying to achieve.

[fqborges]

Hello @Android773, I understand but this project does not support that at this moment. I created this fork to enable me to remove all dependencies on Google Maps on my projects, and I just didn't care about using Apple maps.

It would be amazing to have OSM on all platforms, but I just don't have the time nor the knowledge to implement this on iOS. To be honest, I am not even have the time to maintain this fork as it deserves: we are two versions behind react-native-maps.

I will left this issue open, since this is a common question and/or request. Maybe someone interested in this could help on this implementation. ;-)

[Android773]

@fqborges Hey thanks buddy ! I understand this and really appreciate your efforts for creating the library. Let's hope if someone could help further on this.

[slavikdenis]

@Android773 How about using UrlTile ?

        <UrlTile
          urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

[anastely]

hello, @slavikdenis I just want to ask {z/x/y} what does mean?

[anastely]

here's I got after trying MapView as you write in your code, How can I solve it? @Android773

https://i.imgur.com/wrnR9Hi.png

[slavikdenis]

@anastely

https://wiki.openstreetmap.org/wiki/Tile_servers https://github.com/fqborges/react-native-maps-osmdroid#tile-overlay-using-tile-server

[hanifmhd]

Is this a bug report?

Yes.

Have you read the Installation Instructions?

Yes.

Environment

react-native: 0.59.9 react: 16.8.3 react-native-maps-osmdroid: ^0.23.0-rc2 Target Platform: iOS - 12.2 Simulator/iPhone XR

Steps to Reproduce

1. Created new React Native project using, react-native-init AppName
2. Added osmdroid library using, yarn add react-native-maps-osmdroid
3. Linked using react-native link react-native-maps-osmdroid
4. Added following code,

import MapView from 'react-native-maps-osmdroid';

<MapView
    style={{flex: 1}}
    initialRegion={{
        latitude: 30.7333,
        longitude: 76.7794,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}
/>

If I follow the above mentioned steps and run the app on Android, then it shows Open Street Maps, I think that is because on Android the default provider is osmdroid.

But if I run the app on iOS device, then by default it shows Apple Maps.

1. So I changed provider to osmdroid like the following,

import MapView, { PROVIDER_OSMDROID } from 'react-native-maps-osmdroid';

<MapView
    style={{flex: 1}}
    provider={ PROVIDER_OSMDROID }
    initialRegion={{
        latitude: 30.7333,
        longitude: 76.7794,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}
/>

But it doesn't work and throws error.

Expected Behavior

It should show Open Street Map on App.

Actual Behavior

Getting following Error,

"Invariant Violation: Element type is invalid: expected a string (for built in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports."

Suggestion:

• Right now it only shows installation instructions of react-native-maps. From that a new developer might not get that he/she needs to install react-native-maps-osmdroid. So it will be better and very helpful if you could add installation instructions as well in the read me file. Thanks.

Reproducible Demo

same with me