diff --git a/MapboxAndroidDemo/src/main/AndroidManifest.xml b/MapboxAndroidDemo/src/main/AndroidManifest.xml index 6162080d1..3d82b13f4 100644 --- a/MapboxAndroidDemo/src/main/AndroidManifest.xml +++ b/MapboxAndroidDemo/src/main/AndroidManifest.xml @@ -511,6 +511,13 @@ android:name="android.support.PARENT_ACTIVITY" android:value="com.mapbox.mapboxandroiddemo.MainActivity" /> + + + diff --git a/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/MainActivity.java b/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/MainActivity.java index 5e9a74e79..edce973e6 100644 --- a/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/MainActivity.java +++ b/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/MainActivity.java @@ -43,6 +43,7 @@ import com.mapbox.mapboxandroiddemo.examples.camera.BoundingBoxCameraActivity; import com.mapbox.mapboxandroiddemo.examples.camera.RestrictCameraActivity; import com.mapbox.mapboxandroiddemo.examples.dds.AddRainFallStyleActivity; +import com.mapbox.mapboxandroiddemo.examples.dds.AnimatedDashLineActivity; import com.mapbox.mapboxandroiddemo.examples.dds.BathymetryActivity; import com.mapbox.mapboxandroiddemo.examples.dds.ChoroplethJsonVectorMixActivity; import com.mapbox.mapboxandroiddemo.examples.dds.ChoroplethZoomChangeActivity; @@ -819,7 +820,11 @@ private void listItems(int id) { R.string.activity_dds_expression_integration_description, new Intent(MainActivity.this, ExpressionIntegrationActivity.class), R.string.activity_dds_expression_integration_url, true, BuildConfig.MIN_SDK_VERSION)); - + exampleItemModels.add(new ExampleItemModel( + R.string.activity_dds_animated_dash_line_title, + R.string.activity_dds_animated_dash_line_description, + new Intent(MainActivity.this, AnimatedDashLineActivity.class), + R.string.activity_dds_animated_dash_line_url, false, BuildConfig.MIN_SDK_VERSION)); currentCategory = R.id.nav_dds; break; default: diff --git a/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/dds/AnimatedDashLineActivity.java b/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/dds/AnimatedDashLineActivity.java new file mode 100644 index 000000000..9685c7458 --- /dev/null +++ b/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/dds/AnimatedDashLineActivity.java @@ -0,0 +1,188 @@ +package com.mapbox.mapboxandroiddemo.examples.dds; + +// #-code-snippet: animated-dash-line full-java + +import android.graphics.Color; +import android.os.Bundle; +import android.os.Handler; +import android.support.v7.app.AppCompatActivity; +import android.util.Log; + +import com.mapbox.mapboxandroiddemo.R; +import com.mapbox.mapboxsdk.Mapbox; +import com.mapbox.mapboxsdk.maps.MapView; +import com.mapbox.mapboxsdk.maps.MapboxMap; +import com.mapbox.mapboxsdk.maps.OnMapReadyCallback; +import com.mapbox.mapboxsdk.style.layers.LineLayer; +import com.mapbox.mapboxsdk.style.sources.GeoJsonSource; + +import java.net.MalformedURLException; +import java.net.URL; + +import static com.mapbox.mapboxsdk.style.layers.Property.LINE_CAP_ROUND; +import static com.mapbox.mapboxsdk.style.layers.Property.LINE_JOIN_ROUND; +import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineCap; +import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineColor; +import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineDasharray; +import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineJoin; +import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineWidth; + +/** + * Create an effect of animated and moving LineLayer dashes by rapidly adjusting the + * dash and gap lengths. + */ +public class AnimatedDashLineActivity extends AppCompatActivity implements OnMapReadyCallback { + + private MapView mapView; + private MapboxMap mapboxMap; + private Handler handler; + private String tag = "AnimatedDashLine"; + private RefreshDashAndGapRunnable refreshDashAndGapRunnable; + private int animationSpeedMillseconds = 50; + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + + // Mapbox access token is configured here. This needs to be called either in your application + // object or in the same activity which contains the mapview. + Mapbox.getInstance(this, getString(R.string.access_token)); + + // This contains the MapView in XML and needs to be called after the access token is configured. + setContentView(R.layout.activity_animated_dash_line); + + handler = new Handler(); + mapView = findViewById(R.id.mapView); + mapView.onCreate(savedInstanceState); + mapView.getMapAsync(this); + } + + @Override + public void onMapReady(MapboxMap mapboxMap) { + AnimatedDashLineActivity.this.mapboxMap = mapboxMap; + initBikePathLayer(); + Log.d(tag, "onMapReady: here 1"); + Runnable runnable = new RefreshDashAndGapRunnable(); + Log.d(tag, "onMapReady: runnable made"); + handler.postDelayed(runnable, animationSpeedMillseconds); + Log.d(tag, "onMapReady: here 2"); + } + + private void initBikePathLayer() { + try { + GeoJsonSource geoJsonSource = new GeoJsonSource("animated_line_source", new URL( + "https://raw.githubusercontent.com/Chicago/osd-bike-routes/master/data/Bikeroutes.geojson" + )); + mapboxMap.addSource(geoJsonSource); + LineLayer animatedDashBikeLineLayer = new LineLayer("animated_line_layer_id", "animated_line_source"); + animatedDashBikeLineLayer.withProperties( + lineWidth(4.5f), + lineColor(Color.parseColor("#bf42f4")), + lineCap(LINE_CAP_ROUND), + lineJoin(LINE_JOIN_ROUND) + ); + mapboxMap.addLayer(animatedDashBikeLineLayer); + } catch (MalformedURLException malformedUrlException) { + Log.d("AnimatedDashLine", "Check the URL: " + malformedUrlException.getMessage()); + } + } + + private class RefreshDashAndGapRunnable implements Runnable { + + private float valueOne, valueTwo, valueThree, valueFour, ValueFive; + private float dashLength = 1; + private float gapLength = 3; + + // We divide the animation up into 40 totalNumberOfSteps to make careful use of the finite space in + // LineAtlas + private float totalNumberOfSteps = 40; + + // A # of totalNumberOfSteps proportional to the dashLength are devoted to manipulating the dash + private float dashSteps = totalNumberOfSteps * dashLength / (gapLength + dashLength); + + // A # of totalNumberOfSteps proportional to the gapLength are devoted to manipulating the gap + private float gapSteps = totalNumberOfSteps - dashSteps; + + // The current currentStep # + private int currentStep = 0; + + private String TAG = "AnimatedDashLine"; + + @Override + public void run() { + Log.d(TAG, "RefreshDashAndGapRunnable run: "); + currentStep = currentStep + 1; + if (currentStep >= totalNumberOfSteps) { + currentStep = 0; + } + if (currentStep < dashSteps) { + valueOne = currentStep / dashSteps; + valueTwo = (1 - valueOne) * dashLength; + valueThree = gapLength; + valueFour = valueOne * dashLength; + ValueFive = 0; + } else { + valueOne = (currentStep - dashSteps) / (gapSteps); + valueTwo = 0; + valueThree = (1 - valueOne) * gapLength; + valueFour = dashLength; + ValueFive = valueOne * gapLength; + } + Log.d(TAG, "RefreshDashAndGapRunnable run: here"); + + Float[] newFloatArray = new Float[] {valueTwo, valueThree, valueFour, ValueFive}; + + mapboxMap.getLayer("animated_line_layer_id").setProperties( + lineDasharray(newFloatArray)); + Log.d(TAG, "RefreshDashAndGapRunnable run: layer done being gotten"); + handler.postDelayed(this, animationSpeedMillseconds); + } + } + + // Add the mapView lifecycle to the activity's lifecycle methods + @Override + public void onResume() { + super.onResume(); + mapView.onResume(); + } + + @Override + protected void onStart() { + super.onStart(); + mapView.onStart(); + } + + @Override + protected void onStop() { + super.onStop(); + mapView.onStop(); + } + + @Override + public void onPause() { + super.onPause(); + mapView.onPause(); + } + + @Override + public void onLowMemory() { + super.onLowMemory(); + mapView.onLowMemory(); + } + + @Override + protected void onDestroy() { + super.onDestroy(); + mapView.onDestroy(); + handler.removeCallbacks(refreshDashAndGapRunnable); + refreshDashAndGapRunnable = null; + handler = null; + } + + @Override + protected void onSaveInstanceState(Bundle outState) { + super.onSaveInstanceState(outState); + mapView.onSaveInstanceState(outState); + } +} +// #-end-code-snippet: animated-dash-line full-java \ No newline at end of file diff --git a/MapboxAndroidDemo/src/main/res/layout/activity_animated_dash_line.xml b/MapboxAndroidDemo/src/main/res/layout/activity_animated_dash_line.xml new file mode 100644 index 000000000..8ab5ce999 --- /dev/null +++ b/MapboxAndroidDemo/src/main/res/layout/activity_animated_dash_line.xml @@ -0,0 +1,19 @@ + + + + + + \ No newline at end of file diff --git a/MapboxAndroidDemo/src/main/res/values/descriptions_strings.xml b/MapboxAndroidDemo/src/main/res/values/descriptions_strings.xml index 471a360dd..992812ad9 100644 --- a/MapboxAndroidDemo/src/main/res/values/descriptions_strings.xml +++ b/MapboxAndroidDemo/src/main/res/values/descriptions_strings.xml @@ -45,6 +45,7 @@ Use data-driven styling to show bathymetry (water depth) data Use SymbolLayer and icons to show data in a BubbleLayout "info window". Use multiple expressions to visualize unit change in data. + Animated the gap size of a LineLayer for the appearance of moving lines. Create a default marker with an InfoWindow. Create a marker with a custom icon using the Mapbox Maps SDK. Draw a polyline by parsing a GeoJSON file with the Mapbox Maps SDK. diff --git a/MapboxAndroidDemo/src/main/res/values/titles_strings.xml b/MapboxAndroidDemo/src/main/res/values/titles_strings.xml index f6e1bb9f3..ed491f0c4 100644 --- a/MapboxAndroidDemo/src/main/res/values/titles_strings.xml +++ b/MapboxAndroidDemo/src/main/res/values/titles_strings.xml @@ -45,6 +45,7 @@ Symbol layer info window SymbolLayer clustering Temperature change + Animated line layer Draw a marker Draw a custom marker icon Draw a GeoJSON line diff --git a/MapboxAndroidDemo/src/main/res/values/urls_strings.xml b/MapboxAndroidDemo/src/main/res/values/urls_strings.xml index d5137832f..c8746b000 100644 --- a/MapboxAndroidDemo/src/main/res/values/urls_strings.xml +++ b/MapboxAndroidDemo/src/main/res/values/urls_strings.xml @@ -46,6 +46,7 @@ https://i.imgur.com/qYoqgDk.png https://i.imgur.com/KjgNcS0.png https://imgur.com/YiBeH0I.png + https://i.imgur.com/9JTOUQL.png>>>>>>> 11b1f2b0... initial additions http://i.imgur.com/X59UoaY.png http://i.imgur.com/BIHtPwJ.png http://i.imgur.com/rIFjsrH.png