[iOS] Google Maps Custom Tile Support

[nitaliano]

• Added support for custom tiles with googles maps on iOS
• Updated current example

[nitaliano]

I also added subdomain support in this branch for Android and iOS(google maps and mapkit) can combine that with this one if there are no objections nitaliano/react-native-maps@google-ios-tilelayers...unboundfire:google-ios-tile-subdomains

[gilbox]

@unboundfire any idea why this isn't working for me? I don't get any errors, but it's blank...

[nitaliano]

@gilbox just did a fresh install and I'm seeing this

can you try on a clean install?

You can also place a breakpoint here to see if it is generating the correct url

[gilbox]

Thanks @unboundfire ( ◠‿◠ )

[shenst1]

@unboundfire I am seeing the same problem as gilbox where i'm just getting the beige screen overtop of the map that I used to see. Did you add support for GoogleMaps because you had to, or should it work for Apple maps on iOS too. Are Maptiles formatted in a certain way to work with a specific provider? I used Maptiler and am trying to add the tiles locally for better performance. Haven't seen any examples of that but I assume it is possible.

            style={{ flex: 1, width: Dimensions.get('window').width }}
            initialRegion={{
              latitude: 47.177314,
              longitude: -122.304190,
              latitudeDelta: 0.008882,
              longitudeDelta: 0.014682
            }}
          >
            <MapView.UrlTile
              urlTemplate= "../../assets/images/maptiles/{z}/{x}/{y}.png"
              zIndex={-1}
            />
          </MapView>

I switched out my url for the example hosted one and I still get a beige screen, so I'm guessing its because of the provider or something about my installation is broken.

    "react-dom": "~15.4.2",
    "react-native": "0.42.0",
    "react-native-code-push": "^2.1.0-beta",
    "react-native-maps": "^0.15.2",```

[nitaliano]

@shenst1 map tiles can be formatted in tms which basically inverts the y axis. The current implementation in react-native-maps does not support these types of map tiles. I have gotten these types of tiles to work on my own branches.

I had a hackathon recently where I added this support to react-native-maps on one of my branches for gmaps on iOS to always have the y axis inverted. https://github.com/unboundfire/react-native-maps/tree/subdomains

Here is the diff master...unboundfire:subdomains

Look at lib/ios/AirGoogleMaps/AIRGoogleMapUrlTile.m to see the code I'm talking about.

Let me know if this helps, would be happy to send a proper PR out for this that works on both Android and iOS(gmaps, apple)

[shenst1]

@unboundfire thanks for the response. I'm not sure if my tiles are formatted in TMS. Right now I'm having problems getting any tiles to work, starting with the demo. I created a new react-native project with only one component based off the example in the air-bnb repo. Completely isolated and with the demo i'm still getting just a beige map. If i delete the maptile, the map shows san francisco just fine.