Skip to content

Commit 4e9fd7a

Browse files
sorodrigosorodrigo
authored
Merge pull request #5 from Vizzuality/feature/canvas-android
Feature/canvas android
2 parents 86c489a + 428f262 commit 4e9fd7a

26 files changed

+1040
-9
lines changed

‎.project‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>react-native-maps</name>
4+
<comment>Project react-native-maps created by Buildship.</comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
<buildCommand>
9+
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
10+
<arguments>
11+
</arguments>
12+
</buildCommand>
13+
</buildSpec>
14+
<natures>
15+
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
16+
</natures>
17+
</projectDescription>

‎.settings/org.eclipse.buildship.core.prefs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
2+
connection.project.dir=
3+
eclipse.preferences.version=1

‎build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ buildscript {
55
jcenter()
66
}
77
dependencies {
8-
classpath 'com.android.tools.build:gradle:2.3.1'
8+
classpath 'com.android.tools.build:gradle:2.3.2'
99
}
1010
}
1111

‎example/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ class App extends React.Component {
123123
render() {
124124
return this.renderExamples([
125125
// [<component>, <component description>, <Google compatible>, <Google add'l description>]
126+
[CustomTiles, 'Custom Tiles', true],
126127
[StaticMap, 'StaticMap', true],
127128
[DisplayLatLng, 'Tracking Position', true, '(incomplete)'],
128129
[ViewsAsMarkers, 'Arbitrary Views as Markers', true],
@@ -143,7 +144,6 @@ class App extends React.Component {
143144
[FitToSuppliedMarkers, 'Focus Map On Markers', true],
144145
[FitToCoordinates, 'Fit Map To Coordinates', true],
145146
[LiteMapView, 'Android Lite MapView'],
146-
[CustomTiles, 'Custom Tiles', true],
147147
[ZIndexMarkers, 'Position Markers with Z-index', true],
148148
[MapStyle, 'Customize the style of the map', true],
149149
[LegalLabel, 'Reposition the legal label', true],

‎example/android/app/.classpath‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<classpath>
3+
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
4+
<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
5+
<classpathentry kind="output" path="bin"/>
6+
</classpath>

‎example/android/app/.project‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>example-android</name>
4+
<comment>Project example-android created by Buildship.</comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
<buildCommand>
9+
<name>org.eclipse.jdt.core.javabuilder</name>
10+
<arguments>
11+
</arguments>
12+
</buildCommand>
13+
<buildCommand>
14+
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
15+
<arguments>
16+
</arguments>
17+
</buildCommand>
18+
</buildSpec>
19+
<natures>
20+
<nature>org.eclipse.jdt.core.javanature</nature>
21+
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
22+
</natures>
23+
</projectDescription>

‎example/android/app/.settings/org.eclipse.buildship.core.prefs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
2+
connection.project.dir=../../..
3+
eclipse.preferences.version=1

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33

44
<uses-sdk android:minSdkVersion="16" />
55
<uses-permission android:name="android.permission.INTERNET" />
6+
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
7+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
8+
69

710
<application
811
android:allowBackup="true"

‎example/examples/CustomTiles.js‎

Lines changed: 90 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,32 @@ import {
44
View,
55
Text,
66
Dimensions,
7+
Platform,
8+
PermissionsAndroid,
79
} from 'react-native';
810

911
import MapView, { MAP_TYPES, PROVIDER_DEFAULT } from 'react-native-maps';
1012

13+
const geoViewport = require('@mapbox/geo-viewport');
14+
const tilebelt = require('@mapbox/tilebelt');
15+
1116
const { width, height } = Dimensions.get('window');
1217

1318
const ASPECT_RATIO = width / height;
14-
const LATITUDE = 37.78825;
15-
const LONGITUDE = -122.4324;
16-
const LATITUDE_DELTA = 0.0922;
19+
const LATITUDE = -8.380882;
20+
const LONGITUDE = -74.448166;
21+
const LATITUDE_DELTA = 0.2222;
1722
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
1823

1924
class CustomTiles extends React.Component {
2025
constructor(props, context) {
2126
super(props, context);
2227

2328
this.state = {
29+
coordinates: {
30+
tile: [], // tile coordinates x, y, z + precision x, y
31+
precision: [], // tile precision x, y
32+
},
2433
region: {
2534
latitude: LATITUDE,
2635
longitude: LONGITUDE,
@@ -36,20 +45,95 @@ class CustomTiles extends React.Component {
3645
MAP_TYPES.STANDARD : MAP_TYPES.NONE;
3746
}
3847

48+
componentDidMount() {
49+
if (Platform.OS === 'android') {
50+
PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
51+
PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
52+
}
53+
}
54+
55+
getMapZoom() {
56+
const position = this.state.region;
57+
58+
const bounds = [
59+
position.longitude - (position.longitudeDelta / 2),
60+
position.latitude - (position.latitudeDelta / 2),
61+
position.longitude + (position.longitudeDelta / 2),
62+
position.latitude + (position.latitudeDelta / 2),
63+
];
64+
65+
return geoViewport.viewport(bounds, [width, height], 0, 21, 256).zoom || 0;
66+
}
67+
68+
onRegionChangeComplete = (region) => {
69+
this.updateRegion(region);
70+
}
71+
72+
onRegionChange = (region) => {
73+
if (this.onRegionChangeTimer) {
74+
clearTimeout(this.onRegionChangeTimer);
75+
}
76+
this.onRegionChangeTimer = setTimeout(() => {
77+
this.updateRegion(region);
78+
}, 200);
79+
}
80+
81+
onMapPress = (e) => {
82+
const coordinates = e.nativeEvent.coordinate;
83+
const zoom = this.getMapZoom();
84+
const tile = tilebelt.pointToTile(coordinates.longitude, coordinates.latitude, zoom, true);
85+
86+
this.setState({
87+
coordinates: {
88+
tile: [tile[0], tile[1], tile[2]],
89+
precision: [tile[3], tile[4]],
90+
},
91+
});
92+
}
93+
94+
updateRegion = (region) => {
95+
this.setState({ region });
96+
}
97+
3998
render() {
40-
const { region } = this.state;
99+
const { region, coordinates } = this.state;
100+
const hasCoordinates = (coordinates.tile && coordinates.tile.length === 3) || false;
101+
41102
return (
42103
<View style={styles.container}>
43104
<MapView
44105
provider={this.props.provider}
45106
mapType={this.mapType}
46107
style={styles.map}
108+
mapType="hybrid"
109+
onPress={this.onMapPress}
47110
initialRegion={region}
111+
onRegionChange={this.onRegionChange}
112+
onRegionChangeComplete={this.onRegionChangeComplete}
48113
>
49-
<MapView.UrlTile
50-
urlTemplate="http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"
114+
<MapView.CanvasUrlTile
115+
urlTemplate="http://wri-tiles.s3.amazonaws.com/glad_prod/tiles/{z}/{x}/{y}.png"
51116
zIndex={-1}
117+
maxZoom={12}
118+
areaId="Download"
119+
alertType="umd_as_it_happen"
120+
isConnected
121+
minDate="0"
122+
maxDate="3000"
52123
/>
124+
{hasCoordinates &&
125+
<MapView.CanvasInteractionUrlTile
126+
coordinates={coordinates}
127+
urlTemplate="http://wri-tiles.s3.amazonaws.com/glad_prod/tiles/{z}/{x}/{y}.png"
128+
zIndex={-1}
129+
maxZoom={12}
130+
areaId="Download"
131+
alertType="umd_as_it_happen"
132+
isConnected
133+
minDate="0"
134+
maxDate="3000"
135+
/>
136+
}
53137
</MapView>
54138
<View style={styles.buttonContainer}>
55139
<View style={styles.bubble}>

‎lib/android/.classpath‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<classpath>
3+
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
4+
<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
5+
<classpathentry kind="output" path="bin"/>
6+
</classpath>

0 commit comments

Comments
 (0)