[android] - Update CircleLayerActivity with style switching. (#8274)
This commit is contained in:
@@ -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
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user