[android] - Update CircleLayerActivity with style switching. (#8274)

This commit is contained in:
Tobrun
2017-03-30 13:30:43 +02:00
committed by GitHub
parent a4959131b2
commit 74bf366666
2 changed files with 170 additions and 72 deletions

View File

@@ -10,6 +10,7 @@ import android.view.View;
import com.mapbox.mapboxsdk.camera.CameraPosition;
import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
import com.mapbox.mapboxsdk.constants.Style;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
@@ -34,18 +35,19 @@ import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleRadius;
* Uses bus stop data from Singapore as a source and allows to filter into 1 specific route with a line layer.
* </p>
*/
public class CircleLayerActivity extends AppCompatActivity {
private static final String[] STOPS_FOR_ROUTE = new String[] {"99009", "99131", "99049", "99039", "99029", "99019",
"98079", "98069", "97099", "97089", "97079", "97069", "97209", "97059", "97049", "97039", "97019", "96069",
"96059", "96049", "96099", "96089", "96079", "85079", "85089", "85069", "85059", "85099", "84069", "84059",
"84049", "84039", "84029", "84019", "83099", "83079", "83059", "83049", "83029", "82069", "82049", "82029",
"82109", "81069", "81049", "81029", "80089", "80069", "80049", "80039", "80029", "01319", "01219", "01129",
"01059", "01119", "01019", "04159", "04149", "04229", "04239", "05059", "05049", "05039", "05019", "10589"};
public class CircleLayerActivity extends AppCompatActivity implements View.OnClickListener {
private MapView mapView;
private MapboxMap mapboxMap;
private FloatingActionButton styleFab;
private FloatingActionButton routeFab;
private CircleLayer layer;
private GeoJsonSource source;
private int currentStyleIndex = 0;
private boolean isLoadingStyle = true;
@Override
public void onCreate(Bundle savedInstanceState) {
@@ -56,58 +58,131 @@ public class CircleLayerActivity extends AppCompatActivity {
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(new OnMapReadyCallback() {
@Override
public void onMapReady(@NonNull final MapboxMap map) {
public void onMapReady(@NonNull
final MapboxMap map) {
mapboxMap = map;
try {
mapboxMap.addSource(new GeoJsonSource("bus_stop",
new URL("https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson")));
} catch (MalformedURLException malformedUrlException) {
Timber.e("That's not an url... ", malformedUrlException);
}
layer = new CircleLayer("stops_layer", "bus_stop");
layer.setProperties(
circleColor(Color.parseColor("#FF9800")),
circleRadius(1.0f)
);
mapboxMap.addLayer(layer);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setColorFilter(ContextCompat.getColor(CircleLayerActivity.this, R.color.primary));
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// filter out stops for our route
layer.setFilter(in("number", (Object[]) STOPS_FOR_ROUTE));
// add route as a line
try {
mapboxMap.addSource(new GeoJsonSource("bus_route",
new URL("https://gist.githubusercontent.com/tobrun/7fbc0fe7e9ffea509f7608cda2601d5d/raw/"
+ "a4b8cc289020f91fa2e1553524820054395e36f5/line.geojson")));
} catch (MalformedURLException malformedUrlException) {
Timber.e("That's not an url... ", malformedUrlException);
}
LineLayer lineLayer = new LineLayer("route_layer", "bus_route");
mapboxMap.addLayerBelow(lineLayer, "stops_layer");
// move camera to start route
mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(
new CameraPosition.Builder()
.target(new LatLng(1.3896777, 103.9874997))
.bearing(225)
.tilt(45)
.zoom(13)
.build()
), 1750);
}
});
addBusStopSource();
addBusStopCircleLayer();
initFloatingActionButtons();
isLoadingStyle = false;
}
});
}
private void addBusStopSource() {
try {
source = new GeoJsonSource("bus_stop",
new URL("https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson"));
} catch (MalformedURLException exception) {
Timber.e("That's not an url... ", exception);
}
mapboxMap.addSource(source);
}
private void addBusStopCircleLayer() {
layer = new CircleLayer("stops_layer", "bus_stop");
layer.setProperties(
circleColor(Color.parseColor("#FF9800")),
circleRadius(2.0f)
);
mapboxMap.addLayer(layer);
}
private void initFloatingActionButtons() {
routeFab = (FloatingActionButton) findViewById(R.id.fab_route);
routeFab.setColorFilter(ContextCompat.getColor(CircleLayerActivity.this, R.color.primary));
routeFab.setOnClickListener(CircleLayerActivity.this);
styleFab = (FloatingActionButton) findViewById(R.id.fab_style);
styleFab.setOnClickListener(CircleLayerActivity.this);
}
@Override
public void onClick(View view) {
if (isLoadingStyle) {
return;
}
if (view.getId() == R.id.fab_route) {
showBusRoute();
} else if (view.getId() == R.id.fab_style) {
changeMapStyle();
}
}
private void showBusRoute() {
removeFabs();
applyBusRouteFilterToBusStopSource();
addBusRouteSource();
addBusRouteLayer();
}
private void removeFabs() {
routeFab.setVisibility(View.GONE);
styleFab.setVisibility(View.GONE);
}
private void applyBusRouteFilterToBusStopSource() {
layer.setFilter(in("number", (Object[]) Data.STOPS_FOR_ROUTE));
}
private void addBusRouteSource() {
try {
mapboxMap.addSource(new GeoJsonSource("bus_route",
new URL("https://gist.githubusercontent.com/tobrun/7fbc0fe7e9ffea509f7608cda2601d5d/raw/"
+ "a4b8cc289020f91fa2e1553524820054395e36f5/line.geojson")));
} catch (MalformedURLException malformedUrlException) {
Timber.e("That's not an url... ", malformedUrlException);
}
}
private void addBusRouteLayer() {
LineLayer lineLayer = new LineLayer("route_layer", "bus_route");
mapboxMap.addLayerBelow(lineLayer, "stops_layer");
mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(
new CameraPosition.Builder()
.target(new LatLng(1.3896777, 103.9874997))
.bearing(225)
.tilt(45)
.zoom(13)
.build()
), 1750);
}
private void changeMapStyle() {
isLoadingStyle = true;
removeBusStop();
loadNewStyle();
}
private void removeBusStop() {
mapboxMap.removeLayer(layer);
mapboxMap.removeSource(source);
}
private void loadNewStyle() {
mapboxMap.setStyleUrl(getNextStyle(), new MapboxMap.OnStyleLoadedListener() {
@Override
public void onStyleLoaded(String style) {
addBusStop();
isLoadingStyle = false;
}
});
}
private void addBusStop() {
mapboxMap.addLayer(layer);
mapboxMap.addSource(source);
}
private String getNextStyle() {
currentStyleIndex++;
if (currentStyleIndex == Data.STYLES.length) {
currentStyleIndex = 0;
}
return Data.STYLES[currentStyleIndex];
}
@Override
protected void onStart() {
super.onStart();
@@ -149,4 +224,22 @@ public class CircleLayerActivity extends AppCompatActivity {
super.onDestroy();
mapView.onDestroy();
}
private static class Data {
private static final String[] STOPS_FOR_ROUTE = new String[] {"99009", "99131", "99049", "99039", "99029", "99019",
"98079", "98069", "97099", "97089", "97079", "97069", "97209", "97059", "97049", "97039", "97019", "96069",
"96059", "96049", "96099", "96089", "96079", "85079", "85089", "85069", "85059", "85099", "84069", "84059",
"84049", "84039", "84029", "84019", "83099", "83079", "83059", "83049", "83029", "82069", "82049", "82029",
"82109", "81069", "81049", "81029", "80089", "80069", "80049", "80039", "80029", "01319", "01219", "01129",
"01059", "01119", "01019", "04159", "04149", "04229", "04239", "05059", "05049", "05039", "05019", "10589"};
private static final String[] STYLES = new String[] {
Style.MAPBOX_STREETS,
Style.OUTDOORS,
Style.LIGHT,
Style.DARK,
Style.SATELLITE,
Style.SATELLITE_STREETS
};
}
}

View File

@@ -1,36 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/primary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.mapbox.mapboxsdk.maps.MapView
android:id="@id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar"
app:mapbox_cameraTargetLat="1.350057"
app:mapbox_cameraTargetLng="103.849218"
app:mapbox_styleUrl="@string/mapbox_style_dark"
app:mapbox_cameraZoom="10"/>
app:mapbox_cameraZoom="10"
app:mapbox_styleUrl="@string/mapbox_style_mapbox_streets"/>
<android.support.design.widget.FloatingActionButton
android:id="@id/fab"
android:id="@+id/fab_route"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="@dimen/fab_margin"
android:layout_marginBottom="@dimen/fab_margin"
android:layout_marginRight="@dimen/fab_margin"
android:src="@drawable/ic_directions_bus_black"
app:backgroundTint="@android:color/white" />
app:backgroundTint="@android:color/white"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/fab_route"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="@dimen/fab_margin"
android:layout_marginRight="@dimen/fab_margin"
android:src="@drawable/ic_layers"
app:backgroundTint="@color/primary"/>
</RelativeLayout>