iOS google maps custom tile support (react-native-maps#770)

therealgilles · Nov 11, 2016 · 8e78aa3 · 8e78aa3
1 parent 498896f
commit 8e78aa3
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 7 deletions.
diff --git a/components/MapUrlTile.js b/components/MapUrlTile.js
@@ -1,9 +1,14 @@
 import React, { PropTypes } from 'react';
+
 import {
   View,
-  requireNativeComponent,
 } from 'react-native';
 
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  SUPPORTED,
+} from './decorateMapComponent';
+
 const propTypes = {
   ...View.propTypes,
 
@@ -25,6 +30,7 @@ const propTypes = {
 
 class MapUrlTile extends React.Component {
   render() {
+    const AIRMapUrlTile = this.getAirComponent();
     return (
       <AIRMapUrlTile
         {...this.props}
@@ -35,6 +41,12 @@ class MapUrlTile extends React.Component {
 
 MapUrlTile.propTypes = propTypes;
 
-const AIRMapUrlTile = requireNativeComponent('AIRMapUrlTile', MapUrlTile);
-
-module.exports = MapUrlTile;
+module.exports = decorateMapComponent(MapUrlTile, {
+  componentType: 'UrlTile',
+  providers: {
+    google: {
+      ios: SUPPORTED,
+      android: USES_DEFAULT_IMPLEMENTATION,
+    },
+  },
+});
diff --git a/example/App.js b/example/App.js
@@ -138,7 +138,7 @@ class App extends React.Component {
       [FitToSuppliedMarkers, 'Focus Map On Markers', true],
       [FitToCoordinates, 'Fit Map To Coordinates', true],
       [LiteMapView, 'Android Lite MapView'],
-      [CustomTiles, 'Custom Tiles'],
+      [CustomTiles, 'Custom Tiles', true],
       [ZIndexMarkers, 'Position Markers with Z-index', true],
     ]
     // Filter out examples that are not yet supported for Google Maps on iOS.

diff --git a/example/examples/CustomTiles.js b/example/examples/CustomTiles.js
@@ -6,7 +6,7 @@ import {
   Dimensions,
 } from 'react-native';
 
-import MapView, { MAP_TYPES } from 'react-native-maps';
+import MapView, { MAP_TYPES, PROVIDER_DEFAULT } from 'react-native-maps';
 
 const { width, height } = Dimensions.get('window');
 
@@ -30,12 +30,19 @@ class CustomTiles extends React.Component {
     };
   }
 
+  get mapType() {
+    // MapKit does not support 'none' as a base map
+    return this.props.provider === PROVIDER_DEFAULT ?
+      MAP_TYPES.STANDARD : MAP_TYPES.NONE;
+  }
+
   render() {
     const { region } = this.state;
     return (
       <View style={styles.container}>
         <MapView
-          mapType={MAP_TYPES.NONE}
+          provider={this.props.provider}
+          mapType={this.mapType}
           style={styles.map}
           initialRegion={region}
         >
@@ -54,6 +61,10 @@ class CustomTiles extends React.Component {
   }
 }
 
+CustomTiles.propTypes = {
+  provider: MapView.ProviderPropType,
+};
+
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',

diff --git a/example/ios/AirMapsExplorer.xcodeproj/project.pbxproj b/example/ios/AirMapsExplorer.xcodeproj/project.pbxproj
@@ -48,6 +48,9 @@
 		8620CC931DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m in Sources */ = {isa = PBXBuildFile; fileRef = 8620CC861DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m */; };
 		8697D6221DBEDE6100DB7D0F /* AIRGoogleMapCircle.m in Sources */ = {isa = PBXBuildFile; fileRef = 8697D6211DBEDE6100DB7D0F /* AIRGoogleMapCircle.m */; };
 		8697D6251DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 8697D6241DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m */; };
+		86DE6F881DCE7D21002A5053 /* AIRGoogleMapUrlTile.m in Sources */ = {isa = PBXBuildFile; fileRef = 86DE6F871DCE7D21002A5053 /* AIRGoogleMapUrlTile.m */; };
+		86DE6F8B1DCE8543002A5053 /* AIRGoogleMapURLTileManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 86DE6F8A1DCE8543002A5053 /* AIRGoogleMapURLTileManager.m */; };
+		C9315A21AD5A149EB5B40F29 /* Pods_AirMapsExplorer.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 24EB66BA0860A4DCD4CA3D77 /* Pods_AirMapsExplorer.framework */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -146,6 +149,10 @@
 		8697D6241DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AIRGoogleMapCircleManager.m; sourceTree = "<group>"; };
 		BE5DE1E9AE25978F88CD940A /* Pods-AirMapsExplorer.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AirMapsExplorer.debug.xcconfig"; path = "Pods/Target Support Files/Pods-AirMapsExplorer/Pods-AirMapsExplorer.debug.xcconfig"; sourceTree = "<group>"; };
 		E138AD0CDB08FE57B09B18F8 /* Pods-AirMapsExplorer.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AirMapsExplorer.release.xcconfig"; path = "Pods/Target Support Files/Pods-AirMapsExplorer/Pods-AirMapsExplorer.release.xcconfig"; sourceTree = "<group>"; };
+		86DE6F861DCE7D21002A5053 /* AIRGoogleMapUrlTile.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AIRGoogleMapUrlTile.h; sourceTree = "<group>"; };
+		86DE6F871DCE7D21002A5053 /* AIRGoogleMapUrlTile.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AIRGoogleMapUrlTile.m; sourceTree = "<group>"; };
+		86DE6F891DCE8543002A5053 /* AIRGoogleMapUrlTileManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AIRGoogleMapUrlTileManager.h; sourceTree = "<group>"; };
+		86DE6F8A1DCE8543002A5053 /* AIRGoogleMapURLTileManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AIRGoogleMapURLTileManager.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -316,6 +323,10 @@
 				8697D6211DBEDE6100DB7D0F /* AIRGoogleMapCircle.m */,
 				8697D6231DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.h */,
 				8697D6241DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m */,
+				86DE6F861DCE7D21002A5053 /* AIRGoogleMapUrlTile.h */,
+				86DE6F871DCE7D21002A5053 /* AIRGoogleMapUrlTile.m */,
+				86DE6F891DCE8543002A5053 /* AIRGoogleMapUrlTileManager.h */,
+				86DE6F8A1DCE8543002A5053 /* AIRGoogleMapURLTileManager.m */,
 			);
 			name = AirGoogleMaps;
 			path = ../../ios/AirGoogleMaps;
@@ -521,6 +532,8 @@
 				2166AB3E1D82EC56007538D7 /* RCTConvert+MoreMapKit.m in Sources */,
 				8697D6251DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
+				86DE6F8B1DCE8543002A5053 /* AIRGoogleMapURLTileManager.m in Sources */,
+				86DE6F881DCE7D21002A5053 /* AIRGoogleMapUrlTile.m in Sources */,
 				2166AB331D82EC56007538D7 /* AIRMapPolygonManager.m in Sources */,
 				8620CC901DBD814A00B79BFE /* AIRGoogleMapPolyline.m in Sources */,
 				2166AB2B1D82EC56007538D7 /* AIRMapCalloutManager.m in Sources */,

diff --git a/ios/AirGoogleMaps/AIRGoogleMap.h b/ios/AirGoogleMaps/AIRGoogleMap.h
@@ -27,6 +27,7 @@
 @property (nonatomic, strong) NSMutableArray *polygons;
 @property (nonatomic, strong) NSMutableArray *polylines;
 @property (nonatomic, strong) NSMutableArray *circles;
+@property (nonatomic, strong) NSMutableArray *tiles;
 
 @property (nonatomic, assign) BOOL showsBuildings;
 @property (nonatomic, assign) BOOL showsTraffic;

diff --git a/ios/AirGoogleMaps/AIRGoogleMap.m b/ios/AirGoogleMaps/AIRGoogleMap.m
@@ -10,6 +10,7 @@
 #import "AIRGoogleMapPolygon.h"
 #import "AIRGoogleMapPolyline.h"
 #import "AIRGoogleMapCircle.h"
+#import "AIRGoogleMapUrlTile.h"
 #import <GoogleMaps/GoogleMaps.h>
 #import <MapKit/MapKit.h>
 #import "RCTConvert+MapKit.h"
@@ -44,6 +45,7 @@ - (instancetype)init
     _polygons = [NSMutableArray array];
     _polylines = [NSMutableArray array];
     _circles = [NSMutableArray array];
+    _tiles = [NSMutableArray array];
     _initialRegionSet = false;
   }
   return self;
@@ -85,6 +87,10 @@ - (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex
     AIRGoogleMapCircle *circle = (AIRGoogleMapCircle*)subview;
     circle.circle.map = self;
     [self.circles addObject:circle];
+  } else if ([subview isKindOfClass:[AIRGoogleMapUrlTile class]]) {
+    AIRGoogleMapUrlTile *tile = (AIRGoogleMapUrlTile*)subview;
+    tile.tileLayer.map = self;
+    [self.tiles addObject:tile];
   }
   [_reactSubviews insertObject:(UIView *)subview atIndex:(NSUInteger) atIndex];
 }
@@ -112,6 +118,10 @@ - (void)removeReactSubview:(id<RCTComponent>)subview {
     AIRGoogleMapCircle *circle = (AIRGoogleMapCircle*)subview;
     circle.circle.map = nil;
     [self.circles removeObject:circle];
+  } else if ([subview isKindOfClass:[AIRGoogleMapUrlTile class]]) {
+    AIRGoogleMapUrlTile *tile = (AIRGoogleMapUrlTile*)subview;
+    tile.tileLayer.map = nil;
+    [self.tiles removeObject:tile];
   }
   [_reactSubviews removeObject:(UIView *)subview];
 }

diff --git a/ios/AirGoogleMaps/AIRGoogleMapURLTileManager.m b/ios/AirGoogleMaps/AIRGoogleMapURLTileManager.m
@@ -0,0 +1,26 @@
+//
+//  AIRGoogleMapURLTileManager.m
+//  Created by Nick Italiano on 11/5/16.
+//
+
+#import "AIRGoogleMapUrlTileManager.h"
+#import "AIRGoogleMapUrlTile.h"
+
+@interface AIRGoogleMapUrlTileManager()
+
+@end
+
+@implementation AIRGoogleMapUrlTileManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  AIRGoogleMapUrlTile *tileLayer = [AIRGoogleMapUrlTile new];
+  return tileLayer;
+}
+
+RCT_EXPORT_VIEW_PROPERTY(urlTemplate, NSString)
+RCT_EXPORT_VIEW_PROPERTY(zIndex, int)
+
+@end
diff --git a/ios/AirGoogleMaps/AIRGoogleMapUrlTile.h b/ios/AirGoogleMaps/AIRGoogleMapUrlTile.h
@@ -0,0 +1,15 @@
+//
+//  AIRGoogleMapURLTile.h
+//  Created by Nick Italiano on 11/5/16.
+//
+
+#import <Foundation/Foundation.h>
+#import <GoogleMaps/GoogleMaps.h>
+
+@interface AIRGoogleMapUrlTile : UIView
+
+@property (nonatomic, strong) GMSURLTileLayer *tileLayer;
+@property (nonatomic, assign) NSString *urlTemplate;
+@property (nonatomic, assign) int zIndex;
+
+@end
diff --git a/ios/AirGoogleMaps/AIRGoogleMapUrlTile.m b/ios/AirGoogleMaps/AIRGoogleMapUrlTile.m
@@ -0,0 +1,34 @@
+//
+//  AIRGoogleMapURLTile.m
+//  Created by Nick Italiano on 11/5/16.
+//
+
+#import "AIRGoogleMapUrlTile.h"
+
+@implementation AIRGoogleMapUrlTile
+
+- (void)setZIndex:(int)zIndex
+{
+  _zIndex = zIndex;
+  _tileLayer.zIndex = zIndex;
+}
+
+- (void)setUrlTemplate:(NSString *)urlTemplate
+{
+  _urlTemplate = urlTemplate;
+  _tileLayer = [GMSURLTileLayer tileLayerWithURLConstructor:[self _getTileURLConstructor]];
+}
+
+- (GMSTileURLConstructor)_getTileURLConstructor
+{
+  NSString *urlTemplate = self.urlTemplate;
+  GMSTileURLConstructor urls = ^(NSUInteger x, NSUInteger y, NSUInteger zoom) {
+    NSString *url = urlTemplate;
+    url = [url stringByReplacingOccurrencesOfString:@"{x}" withString:[NSString stringWithFormat: @"%ld", (long)x]];
+    url = [url stringByReplacingOccurrencesOfString:@"{y}" withString:[NSString stringWithFormat: @"%ld", (long)y]];
+    url = [url stringByReplacingOccurrencesOfString:@"{z}" withString:[NSString stringWithFormat: @"%ld", (long)zoom]];
+    return [NSURL URLWithString:url];
+  };
+  return urls;
+}
+@end
diff --git a/ios/AirGoogleMaps/AIRGoogleMapUrlTileManager.h b/ios/AirGoogleMaps/AIRGoogleMapUrlTileManager.h
@@ -0,0 +1,10 @@
+//
+//  AIRGoogleMapURLTileManager.h
+//  Created by Nick Italiano on 11/5/16.
+//
+
+#import <Foundation/Foundation.h>
+#import "RCTViewManager.h"
+
+@interface AIRGoogleMapUrlTileManager : RCTViewManager
+@end