Merge pull request #5 from Vizzuality/feature/canvas-android

Feature/canvas android
Vizzuality · May 29, 2017 · 4e9fd7a · 4e9fd7a
2 parents 86c489a + 428f262
commit 4e9fd7a
Show file tree

Hide file tree

Showing 26 changed files with 1,040 additions and 9 deletions.
diff --git a/.project b/.project
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>react-native-maps</name>
+	<comment>Project react-native-maps created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>
diff --git a/.settings/org.eclipse.buildship.core.prefs b/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,3 @@
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=
+eclipse.preferences.version=1
diff --git a/build.gradle b/build.gradle
@@ -5,7 +5,7 @@ buildscript {
     jcenter()
   }
   dependencies {
-    classpath 'com.android.tools.build:gradle:2.3.1'
+    classpath 'com.android.tools.build:gradle:2.3.2'
   }
 }
 

diff --git a/example/App.js b/example/App.js
@@ -123,6 +123,7 @@ class App extends React.Component {
   render() {
     return this.renderExamples([
       // [<component>, <component description>, <Google compatible>, <Google add'l description>]
+      [CustomTiles, 'Custom Tiles', true],
       [StaticMap, 'StaticMap', true],
       [DisplayLatLng, 'Tracking Position', true, '(incomplete)'],
       [ViewsAsMarkers, 'Arbitrary Views as Markers', true],
@@ -143,7 +144,6 @@ class App extends React.Component {
       [FitToSuppliedMarkers, 'Focus Map On Markers', true],
       [FitToCoordinates, 'Fit Map To Coordinates', true],
       [LiteMapView, 'Android Lite MapView'],
-      [CustomTiles, 'Custom Tiles', true],
       [ZIndexMarkers, 'Position Markers with Z-index', true],
       [MapStyle, 'Customize the style of the map', true],
       [LegalLabel, 'Reposition the legal label', true],

diff --git a/example/android/app/.classpath b/example/android/app/.classpath
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
+	<classpathentry kind="output" path="bin"/>
+</classpath>
diff --git a/example/android/app/.project b/example/android/app/.project
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>example-android</name>
+	<comment>Project example-android created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>
diff --git a/example/android/app/.settings/org.eclipse.buildship.core.prefs b/example/android/app/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,3 @@
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=../../..
+eclipse.preferences.version=1
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -3,6 +3,9 @@
 
     <uses-sdk android:minSdkVersion="16" />
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+
 
     <application
       android:allowBackup="true"

diff --git a/example/examples/CustomTiles.js b/example/examples/CustomTiles.js
@@ -4,23 +4,32 @@ import {
   View,
   Text,
   Dimensions,
+  Platform,
+  PermissionsAndroid,
 } from 'react-native';
 
 import MapView, { MAP_TYPES, PROVIDER_DEFAULT } from 'react-native-maps';
 
+const geoViewport = require('@mapbox/geo-viewport');
+const tilebelt = require('@mapbox/tilebelt');
+
 const { width, height } = Dimensions.get('window');
 
 const ASPECT_RATIO = width / height;
-const LATITUDE = 37.78825;
-const LONGITUDE = -122.4324;
-const LATITUDE_DELTA = 0.0922;
+const LATITUDE = -8.380882;
+const LONGITUDE = -74.448166;
+const LATITUDE_DELTA = 0.2222;
 const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
 
 class CustomTiles extends React.Component {
   constructor(props, context) {
     super(props, context);
 
     this.state = {
+      coordinates: {
+        tile: [], // tile coordinates x, y, z + precision x, y
+        precision: [], // tile precision x, y
+      },
       region: {
         latitude: LATITUDE,
         longitude: LONGITUDE,
@@ -36,20 +45,95 @@ class CustomTiles extends React.Component {
       MAP_TYPES.STANDARD : MAP_TYPES.NONE;
   }
 
+  componentDidMount() {
+    if (Platform.OS === 'android') {
+      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
+      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
+    }
+  }
+
+  getMapZoom() {
+    const position = this.state.region;
+
+    const bounds = [
+      position.longitude - (position.longitudeDelta / 2),
+      position.latitude - (position.latitudeDelta / 2),
+      position.longitude + (position.longitudeDelta / 2),
+      position.latitude + (position.latitudeDelta / 2),
+    ];
+
+    return geoViewport.viewport(bounds, [width, height], 0, 21, 256).zoom || 0;
+  }
+
+  onRegionChangeComplete = (region) => {
+    this.updateRegion(region);
+  }
+
+  onRegionChange = (region) => {
+    if (this.onRegionChangeTimer) {
+      clearTimeout(this.onRegionChangeTimer);
+    }
+    this.onRegionChangeTimer = setTimeout(() => {
+      this.updateRegion(region);
+    }, 200);
+  }
+
+  onMapPress = (e) => {
+    const coordinates = e.nativeEvent.coordinate;
+    const zoom = this.getMapZoom();
+    const tile = tilebelt.pointToTile(coordinates.longitude, coordinates.latitude, zoom, true);
+
+    this.setState({
+      coordinates: {
+        tile: [tile[0], tile[1], tile[2]],
+        precision: [tile[3], tile[4]],
+      },
+    });
+  }
+
+  updateRegion = (region) => {
+    this.setState({ region });
+  }
+
   render() {
-    const { region } = this.state;
+    const { region, coordinates } = this.state;
+    const hasCoordinates = (coordinates.tile && coordinates.tile.length === 3) || false;
+
     return (
       <View style={styles.container}>
         <MapView
           provider={this.props.provider}
           mapType={this.mapType}
           style={styles.map}
+          mapType="hybrid"
+          onPress={this.onMapPress}
           initialRegion={region}
+          onRegionChange={this.onRegionChange}
+          onRegionChangeComplete={this.onRegionChangeComplete}
         >
-          <MapView.UrlTile
-            urlTemplate="http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"
+          <MapView.CanvasUrlTile
+            urlTemplate="http://wri-tiles.s3.amazonaws.com/glad_prod/tiles/{z}/{x}/{y}.png"
             zIndex={-1}
+            maxZoom={12}
+            areaId="Download"
+            alertType="umd_as_it_happen"
+            isConnected
+            minDate="0"
+            maxDate="3000"
           />
+          {hasCoordinates &&
+            <MapView.CanvasInteractionUrlTile
+              coordinates={coordinates}
+              urlTemplate="http://wri-tiles.s3.amazonaws.com/glad_prod/tiles/{z}/{x}/{y}.png"
+              zIndex={-1}
+              maxZoom={12}
+              areaId="Download"
+              alertType="umd_as_it_happen"
+              isConnected
+              minDate="0"
+              maxDate="3000"
+            />
+          }
         </MapView>
         <View style={styles.buttonContainer}>
           <View style={styles.bubble}>

diff --git a/lib/android/.classpath b/lib/android/.classpath
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
+	<classpathentry kind="output" path="bin"/>
+</classpath>
diff --git a/lib/android/.project b/lib/android/.project
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>react-native-maps-lib</name>
+	<comment>Project react-native-maps-lib created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>
diff --git a/lib/android/.settings/org.eclipse.buildship.core.prefs b/lib/android/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,3 @@
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=../..
+eclipse.preferences.version=1
diff --git a/lib/android/gradle.properties b/lib/android/gradle.properties
@@ -16,3 +16,4 @@ POM_DEVELOPER_NAME=Leland Richardson
 POM_NAME=ReactNative Maps library
 POM_ARTIFACT_ID=react-native-maps
 POM_PACKAGING=aar
+org.gradle.jvmargs=-Xmx2048m
diff --git a/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapCanvasFeature.java b/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapCanvasFeature.java
@@ -0,0 +1,131 @@
+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;
+
+/**
+ * Created by joseangel.parreno@vizzuality.com on 25/05/2017.
+ */
+
+public abstract class AirMapCanvasFeature extends AirMapFeature {
+    protected TileOverlayOptions tileOverlayOptions;
+    protected TileOverlay tileOverlay;
+    protected AirMapCanvasTileProvider tileProvider;
+
+    protected String urlTemplate;
+    protected int maxZoom;
+    protected String areaId;
+    protected String alertType;
+    protected String minDate;
+    protected String maxDate;
+    protected boolean isConnected;
+    protected float zIndex;
+    protected Coordinates coordinates;
+
+    public AirMapCanvasFeature(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 setMaxZoom(int maxZoom) {
+        this.maxZoom = maxZoom;
+        if (tileProvider != null) {
+            tileProvider.setMaxZoom(maxZoom);
+        }
+        if (tileOverlay != null) {
+            tileOverlay.clearTileCache();
+        }
+    }
+
+    public void setAreaId(String areaId) {
+        this.areaId = areaId;
+        if (tileProvider != null) {
+            tileProvider.setAreaId(areaId);
+        }
+        if (tileOverlay != null) {
+            tileOverlay.clearTileCache();
+        }
+    }
+
+    public void setIsConnected(boolean isConnected) {
+        this.isConnected = isConnected;
+        if (tileProvider != null) {
+            tileProvider.setIsConnected(isConnected);
+        }
+        if (tileOverlay != null) {
+            tileOverlay.clearTileCache();
+        }
+    }
+
+    public void setAlertType(String alertType) {
+        this.alertType = alertType;
+        if (tileProvider != null) {
+            tileProvider.setAlertType(alertType);
+        }
+        if (tileOverlay != null) {
+            tileOverlay.clearTileCache();
+        }
+    }
+
+    public void setMinDate(String minDate) {
+        this.minDate = minDate;
+    }
+
+    public void setMaxDate(String maxDate) {
+        this.maxDate = maxDate;
+    }
+
+    public void setZIndex(float zIndex) {
+        this.zIndex = zIndex;
+        if (tileOverlay != null) {
+            tileOverlay.setZIndex(zIndex);
+        }
+    }
+
+    public void setCoordinates(Coordinates coordinates) {
+        this.coordinates = coordinates;
+        if (tileProvider != null) {
+            tileProvider.setCoordinates(coordinates);
+        }
+        if (tileOverlay != null) {
+            tileOverlay.clearTileCache();
+        }
+    }
+
+    public TileOverlayOptions getTileOverlayOptions() {
+        if (tileOverlayOptions == null) {
+            tileOverlayOptions = createTileOverlayOptions();
+        }
+        return tileOverlayOptions;
+    }
+
+    protected abstract TileOverlayOptions createTileOverlayOptions();
+
+
+    @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();
+    }
+}