Skip to content
This repository has been archived by the owner on Oct 7, 2024. It is now read-only.

Disabling collision transition for clustering examples #1270

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import com.mapbox.mapboxsdk.style.expressions.Expression;
import com.mapbox.mapboxsdk.style.layers.CircleLayer;
import com.mapbox.mapboxsdk.style.layers.SymbolLayer;
import com.mapbox.mapboxsdk.style.layers.TransitionOptions;
import com.mapbox.mapboxsdk.style.sources.GeoJsonOptions;
import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
import com.mapbox.mapboxsdk.utils.BitmapUtils;
Expand Down Expand Up @@ -58,7 +59,6 @@ public class CircleLayerClusteringActivity extends AppCompatActivity {
private MapView mapView;
private MapboxMap mapboxMap;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Expand All @@ -82,6 +82,11 @@ public void onMapReady(@NonNull MapboxMap map) {
map.setStyle(Style.LIGHT, new Style.OnStyleLoaded() {
@Override
public void onStyleLoaded(@NonNull Style style) {

// Disable any type of fading transition when icons collide on the map. This enhances the visual
// look of the data clustering together and breaking apart.
style.setTransition(new TransitionOptions(0, 0, false));

mapboxMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(
12.099, -79.045), 3));

Expand All @@ -100,49 +105,6 @@ public void onStyleLoaded(@NonNull Style style) {
});
}

@Override
public void onStart() {
super.onStart();
mapView.onStart();
}

@Override
public void onResume() {
super.onResume();
mapView.onResume();
}

@Override
public void onPause() {
super.onPause();
mapView.onPause();
}

@Override
public void onStop() {
super.onStop();
mapView.onStop();
}

@Override
public void onLowMemory() {
super.onLowMemory();
mapView.onLowMemory();
}

@Override
protected void onDestroy() {
super.onDestroy();
mapView.onDestroy();
}

@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mapView.onSaveInstanceState(outState);
}


private void addClusteredGeoJsonSource(@NonNull Style loadedMapStyle) {

// Add a new source from the GeoJSON data and set the 'cluster' option to true.
Expand Down Expand Up @@ -224,6 +186,47 @@ private void addClusteredGeoJsonSource(@NonNull Style loadedMapStyle) {
textAllowOverlap(true)
);
loadedMapStyle.addLayer(count);
}

@Override
public void onStart() {
super.onStart();
mapView.onStart();
}

@Override
public void onResume() {
super.onResume();
mapView.onResume();
}

@Override
public void onPause() {
super.onPause();
mapView.onPause();
}

@Override
public void onStop() {
super.onStop();
mapView.onStop();
}

@Override
public void onLowMemory() {
super.onLowMemory();
mapView.onLowMemory();
}

@Override
protected void onDestroy() {
super.onDestroy();
mapView.onDestroy();
}

@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mapView.onSaveInstanceState(outState);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import com.mapbox.mapboxsdk.maps.Style;
import com.mapbox.mapboxsdk.style.expressions.Expression;
import com.mapbox.mapboxsdk.style.layers.SymbolLayer;
import com.mapbox.mapboxsdk.style.layers.TransitionOptions;
import com.mapbox.mapboxsdk.style.sources.GeoJsonOptions;
import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
import com.mapbox.mapboxsdk.utils.BitmapUtils;
Expand Down Expand Up @@ -41,10 +42,14 @@
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.textSize;

/**
* Use GeoJson data with SymbolLayers to create a data clustering effect.
* Use GeoJSON data with SymbolLayers to create a data clustering effect with icons rather than circles.
*/
public class ImageClusteringActivity extends AppCompatActivity implements OnMapReadyCallback {

private static final String CLUSTER_EARTHQUAKE_TRIANGLE_ICON_ID = "quake-triangle-icon-id";
private static final String SINGLE_EARTHQUAKE_TRIANGLE_ICON_ID = "single-quake-icon-id";
private static final String EARTHQUAKE_SOURCE_ID = "earthquakes";
private static final String POINT_COUNT = "point_count";
private MapView mapView;

@Override
Expand All @@ -67,6 +72,11 @@ public void onMapReady(@NonNull MapboxMap mapboxMap) {
mapboxMap.setStyle(Style.LIGHT, new Style.OnStyleLoaded() {
@Override
public void onStyleLoaded(@NonNull Style style) {

// Disable any type of fading transition when icons collide on the map. This enhances the visual
// look of the data clustering together and breaking apart.
style.setTransition(new TransitionOptions(0, 0, false));

initLayerIcons(style);
addClusteredGeoJsonSource(style);
Toast.makeText(ImageClusteringActivity.this, R.string.zoom_map_in_and_out_instruction,
Expand All @@ -76,9 +86,9 @@ public void onStyleLoaded(@NonNull Style style) {
}

private void initLayerIcons(@NonNull Style loadedMapStyle) {
loadedMapStyle.addImage("single-quake-icon-id", BitmapUtils.getBitmapFromDrawable(
loadedMapStyle.addImage(SINGLE_EARTHQUAKE_TRIANGLE_ICON_ID, BitmapUtils.getBitmapFromDrawable(
getResources().getDrawable(R.drawable.single_quake_icon)));
loadedMapStyle.addImage("quake-triangle-icon-id", BitmapUtils.getBitmapFromDrawable(
loadedMapStyle.addImage(CLUSTER_EARTHQUAKE_TRIANGLE_ICON_ID, BitmapUtils.getBitmapFromDrawable(
getResources().getDrawable(R.drawable.earthquake_triangle)));
}

Expand All @@ -88,7 +98,7 @@ private void addClusteredGeoJsonSource(@NonNull Style loadedMapStyle) {
loadedMapStyle.addSource(
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes from
// 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
new GeoJsonSource("earthquakes",
new GeoJsonSource(EARTHQUAKE_SOURCE_ID,
new URI("https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"),
new GeoJsonOptions()
.withCluster(true)
Expand All @@ -100,34 +110,37 @@ private void addClusteredGeoJsonSource(@NonNull Style loadedMapStyle) {
Timber.e("Check the URL %s" , uriSyntaxException.getMessage());
}

//Creating a SymbolLayer icon layer for single data/icon points
loadedMapStyle.addLayer(new SymbolLayer("unclustered-points", "earthquakes").withProperties(
iconImage("single-quake-icon-id"),
SymbolLayer unclusteredSymbolLayer = new SymbolLayer("unclustered-points", EARTHQUAKE_SOURCE_ID).withProperties(
iconImage(SINGLE_EARTHQUAKE_TRIANGLE_ICON_ID),
iconSize(
division(
get("mag"), literal(4.0f)
)
)
));
);
unclusteredSymbolLayer.setFilter(has("mag"));

//Creating a SymbolLayer icon layer for single data/icon points
loadedMapStyle.addLayer(unclusteredSymbolLayer);

// Use the earthquakes GeoJSON source to create three point ranges.
int[] layers = new int[] {150, 20, 0};

for (int i = 0; i < layers.length; i++) {
//Add clusters' SymbolLayers images
SymbolLayer symbolLayer = new SymbolLayer("cluster-" + i, "earthquakes");
SymbolLayer symbolLayer = new SymbolLayer("cluster-" + i, EARTHQUAKE_SOURCE_ID);

symbolLayer.setProperties(
iconImage("quake-triangle-icon-id")
iconImage(CLUSTER_EARTHQUAKE_TRIANGLE_ICON_ID)
);
Expression pointCount = toNumber(get("point_count"));
Expression pointCount = toNumber(get(POINT_COUNT));

// Add a filter to the cluster layer that hides the icons based on "point_count"
symbolLayer.setFilter(
i == 0
? all(has("point_count"),
? all(has(POINT_COUNT),
gte(pointCount, literal(layers[i]))
) : all(has("point_count"),
) : all(has(POINT_COUNT),
gte(pointCount, literal(layers[i])),
lt(pointCount, literal(layers[i - 1]))
)
Expand All @@ -136,8 +149,8 @@ private void addClusteredGeoJsonSource(@NonNull Style loadedMapStyle) {
}

//Add a SymbolLayer for the cluster data number point count
loadedMapStyle.addLayer(new SymbolLayer("count", "earthquakes").withProperties(
textField(Expression.toString(get("point_count"))),
loadedMapStyle.addLayer(new SymbolLayer("count", EARTHQUAKE_SOURCE_ID).withProperties(
textField(Expression.toString(get(POINT_COUNT))),
textSize(12f),
textColor(Color.BLACK),
textIgnorePlacement(true),
Expand Down