Merge pull request react-native-maps#595 from airbnb/TileOverlayRebased

Tile overlay, rebased

Author: Spike Brehm

android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -37,7 +37,8 @@ public class AirMapManager extends ViewGroupManager<AirMapView> {
             "standard", GoogleMap.MAP_TYPE_NORMAL,
             "satellite", GoogleMap.MAP_TYPE_SATELLITE,
             "hybrid", GoogleMap.MAP_TYPE_HYBRID,
-            "terrain", GoogleMap.MAP_TYPE_TERRAIN
+            "terrain", GoogleMap.MAP_TYPE_TERRAIN,
+            "none", GoogleMap.MAP_TYPE_NONE
     );
 
     private ReactContext reactContext;

android/src/main/java/com/airbnb/android/react/maps/AirMapUrlTile.java

@@ -0,0 +1,100 @@
+package com.airbnb.android.react.maps;
+
+import android.content.Context;
+
+import com.google.android.gms.maps.GoogleMap;
+import com.google.android.gms.maps.model.TileOverlay;
+import com.google.android.gms.maps.model.TileOverlayOptions;
+import com.google.android.gms.maps.model.UrlTileProvider;
+
+import java.net.MalformedURLException;
+import java.net.URL;
+
+public class AirMapUrlTile extends AirMapFeature {
+
+    class AIRMapUrlTileProvider extends UrlTileProvider
+    {
+        private String urlTemplate;
+        public AIRMapUrlTileProvider(int width, int height, String urlTemplate) {
+            super(width, height);
+            this.urlTemplate = urlTemplate;
+        }
+        @Override
+        public synchronized URL getTileUrl(int x, int y, int zoom) {
+
+            String s = this.urlTemplate
+              .replace("{x}", Integer.toString(x))
+              .replace("{y}", Integer.toString(y))
+              .replace("{z}", Integer.toString(zoom));
+            URL url = null;
+            try {
+                url = new URL(s);
+            } catch (MalformedURLException e) {
+                throw new AssertionError(e);
+            }
+            return url;
+        }
+
+        public void setUrlTemplate(String urlTemplate) {
+            this.urlTemplate = urlTemplate;
+        }
+    }
+
+    private TileOverlayOptions tileOverlayOptions;
+    private TileOverlay tileOverlay;
+    private AIRMapUrlTileProvider tileProvider;
+
+    private String urlTemplate;
+    private float zIndex;
+
+    public AirMapUrlTile(Context context) {
+        super(context);
+    }
+
+    public void setUrlTemplate(String urlTemplate) {
+        this.urlTemplate = urlTemplate;
+        if (tileProvider != null) {
+            tileProvider.setUrlTemplate(urlTemplate);
+        }
+        if (tileOverlay != null) {
+            tileOverlay.clearTileCache();
+        }
+    }
+
+    public void setZIndex(float zIndex) {
+        this.zIndex = zIndex;
+        if (tileOverlay != null) {
+            tileOverlay.setZIndex(zIndex);
+        }
+    }
+
+    public TileOverlayOptions getTileOverlayOptions() {
+        if (tileOverlayOptions == null) {
+            tileOverlayOptions = createTileOverlayOptions();
+        }
+        return tileOverlayOptions;
+    }
+
+    private TileOverlayOptions createTileOverlayOptions() {
+        TileOverlayOptions options = new TileOverlayOptions();
+        options.zIndex(zIndex);
+        this.tileProvider = new AIRMapUrlTileProvider(256, 256, this.urlTemplate);
+        options.tileProvider(this.tileProvider);
+        return options;
+    }
+
+    @Override
+    public Object getFeature() {
+        return tileOverlay;
+    }
+
+    @Override
+    public void addToMap(GoogleMap map) {
+        this.tileOverlay = map.addTileOverlay(getTileOverlayOptions());
+    }
+
+    @Override
+    public void removeFromMap(GoogleMap map) {
+        tileOverlay.remove();
+    }
+}

android/src/main/java/com/airbnb/android/react/maps/AirMapUrlTileManager.java

@@ -0,0 +1,48 @@
+package com.airbnb.android.react.maps;
+
+import android.content.Context;
+import android.os.Build;
+import android.util.DisplayMetrics;
+import android.view.WindowManager;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+public class AirMapUrlTileManager extends ViewGroupManager<AirMapUrlTile> {
+    private DisplayMetrics metrics;
+
+    public AirMapUrlTileManager(ReactApplicationContext reactContext) {
+        super();
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+            metrics = new DisplayMetrics();
+            ((WindowManager) reactContext.getSystemService(Context.WINDOW_SERVICE))
+                    .getDefaultDisplay()
+                    .getRealMetrics(metrics);
+        } else {
+            metrics = reactContext.getResources().getDisplayMetrics();
+        }
+    }
+
+    @Override
+    public String getName() {
+        return "AIRMapUrlTile";
+    }
+
+    @Override
+    public AirMapUrlTile createViewInstance(ThemedReactContext context) {
+        return new AirMapUrlTile(context);
+    }
+
+    @ReactProp(name = "urlTemplate")
+    public void setUrlTemplate(AirMapUrlTile view, String urlTemplate) {
+        view.setUrlTemplate(urlTemplate);
+    }
+
+    @ReactProp(name = "zIndex", defaultFloat = -1.0f)
+    public void setZIndex(AirMapUrlTile view, float zIndex) {
+        view.setZIndex(zIndex);
+    }
+
+}

android/src/main/java/com/airbnb/android/react/maps/AirMapView.java

@@ -39,6 +39,7 @@
 import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.LatLngBounds;
 import com.google.android.gms.maps.model.Marker;
+import com.google.android.gms.maps.model.TileOverlay;
 
 import java.util.ArrayList;
 import java.util.Arrays;
@@ -67,6 +68,8 @@ public class AirMapView extends MapView implements GoogleMap.InfoWindowAdapter,
     private static final String[] PERMISSIONS = new String[] {
             "android.permission.ACCESS_FINE_LOCATION", "android.permission.ACCESS_COARSE_LOCATION"};
 
+    // TODO: don't need tileMap at all???
+    private HashMap<TileOverlay, AirMapUrlTile> tileMap = new HashMap<>();
     private final List<AirMapFeature> features = new ArrayList<>();
     private final Map<Marker, AirMapMarker> markerMap = new HashMap<>();
     private final ScaleGestureDetector scaleDetector;
@@ -393,6 +396,13 @@ public void addFeature(View child, int index) {
             AirMapCircle circleView = (AirMapCircle) child;
             circleView.addToMap(map);
             features.add(index, circleView);
+        } else if (child instanceof AirMapUrlTile) {
+            AirMapUrlTile urlTileView = (AirMapUrlTile) child;
+            urlTileView.addToMap(map);
+            features.add(index, urlTileView);
+            TileOverlay tile = (TileOverlay)urlTileView.getFeature();
+            // TODO: don't need tileMap at all???
+            tileMap.put(tile, urlTileView);
         } else {
             // TODO(lmr): throw? User shouldn't be adding non-feature children.
         }
@@ -410,6 +420,9 @@ public void removeFeatureAt(int index) {
         AirMapFeature feature = features.remove(index);
         if (feature instanceof AirMapMarker) {
             markerMap.remove(feature.getFeature());
+        } else if (feature instanceof AirMapUrlTile) {
+            // TODO: don't need tileMap at all???
+            tileMap.remove(feature.getFeature());
         }
         feature.removeFromMap(map);
     }

android/src/main/java/com/airbnb/android/react/maps/MapsPackage.java

@@ -38,6 +38,7 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
         AirMapCircleManager circleManager = new AirMapCircleManager(reactContext);
         AirMapManager mapManager = new AirMapManager(reactContext);
         AirMapLiteManager mapLiteManager = new AirMapLiteManager(reactContext);
+        AirMapUrlTileManager tileManager = new AirMapUrlTileManager(reactContext);
 
         return Arrays.<ViewManager>asList(
                 calloutManager,
@@ -46,6 +47,7 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
                 polygonManager,
                 circleManager,
                 mapManager,
-                mapLiteManager);
+                mapLiteManager,
+                tileManager);
     }
 }

components/MapUrlTile.js

@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react';
+import {
+  View,
+  requireNativeComponent,
+} from 'react-native';
+
+const propTypes = {
+  ...View.propTypes,
+
+  /**
+   * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
+   * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
+   */
+  urlTemplate: PropTypes.string.isRequired,
+
+  /**
+   * The order in which this tile overlay is drawn with respect to other overlays. An overlay
+   * with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays
+   * with the same z-index is arbitrary. The default zIndex is -1.
+   *
+   * @platform android
+   */
+  zIndex: PropTypes.number,
+};
+
+class MapUrlTile extends React.Component {
+  render() {
+    return (
+      <AIRMapUrlTile
+        {...this.props}
+      />
+    );
+  }
+}
+
+MapUrlTile.propTypes = propTypes;
+
+const AIRMapUrlTile = requireNativeComponent('AIRMapUrlTile', MapUrlTile);
+
+module.exports = MapUrlTile;

components/MapView.js

@@ -14,6 +14,20 @@ import MapPolyline from './MapPolyline';
 import MapPolygon from './MapPolygon';
 import MapCircle from './MapCircle';
 import MapCallout from './MapCallout';
+import MapUrlTile from './MapUrlTile';
+
+const MAP_TYPES = {
+  STANDARD: 'standard',
+  SATELLITE: 'satellite',
+  HYBRID: 'hybrid',
+  TERRAIN: 'terrain',
+  NONE: 'none',
+};
+
+const ANDROID_ONLY_MAP_TYPES = [
+  MAP_TYPES.TERRAIN,
+  MAP_TYPES.NONE,
+];
 
 const viewConfig = {
   uiViewClassName: 'AIRMap',
@@ -171,12 +185,7 @@ const propTypes = {
    * - hybrid: satellite view with roads and points of interest overlayed
    * - terrain: (Android only) topographic view
    */
-  mapType: PropTypes.oneOf([
-    'standard',
-    'satellite',
-    'hybrid',
-    'terrain',
-  ]),
+  mapType: PropTypes.oneOf(Object.values(MAP_TYPES)),
 
   /**
    * The region to be displayed by the map.
@@ -450,8 +459,8 @@ class MapView extends React.Component {
         onMapReady: this._onMapReady,
         onLayout: this._onLayout,
       };
-      if (Platform.OS === 'ios' && props.mapType === 'terrain') {
-        props.mapType = 'standard';
+      if (Platform.OS === 'ios' && ANDROID_ONLY_MAP_TYPES.includes(props.mapType)) {
+        props.mapType = MAP_TYPES.STANDARD;
       }
       props.handlePanDrag = !!props.onPanDrag;
     } else {
@@ -486,6 +495,8 @@ class MapView extends React.Component {
 MapView.propTypes = propTypes;
 MapView.viewConfig = viewConfig;
 
+MapView.MAP_TYPES = MAP_TYPES;
+
 const AIRMap = requireNativeComponent('AIRMap', MapView, {
   nativeOnly: {
     onChange: true,
@@ -506,6 +517,7 @@ MapView.Marker = MapMarker;
 MapView.Polyline = MapPolyline;
 MapView.Polygon = MapPolygon;
 MapView.Circle = MapCircle;
+MapView.UrlTile = MapUrlTile;
 MapView.Callout = MapCallout;
 
 MapView.Animated = Animated.createAnimatedComponent(MapView);

example/App.js

@@ -24,6 +24,7 @@ import LoadingMap from './examples/LoadingMap';
 import TakeSnapshot from './examples/TakeSnapshot';
 import FitToSuppliedMarkers from './examples/FitToSuppliedMarkers';
 import LiteMapView from './examples/LiteMapView';
+import CustomTiles from './examples/CustomTiles';
 
 class App extends React.Component {
   constructor(props) {
@@ -95,6 +96,7 @@ class App extends React.Component {
       [LoadingMap, 'Map with loading'],
       [FitToSuppliedMarkers, 'Focus Map On Markers'],
       [LiteMapView, 'Android Lite MapView'],
+      [CustomTiles, 'Custom Tiles'],
     ]);
   }
 }