Custom Polygon Cluster

This example shows how to add Polygon Cluster in MapView

  • Add Cluster from GeoJson

  • Aggregate a large number of coordinate points

Custom Polygon Cluster

For all code examples, refer to Android Maps SDK Code Examples

activity_polygon_cluster.xml view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".PolygonActivity">

    <ai.nextbillion.maps.core.MapView
        android:id="@id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:nbmap_uiAttribution="false"
        app:nbmap_cameraTargetLat="1.3383500934590808"
        app:nbmap_cameraTargetLng="103.80586766146754"
        app:nbmap_cameraZoom="11" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        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_marginBottom="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_marginEnd="@dimen/fab_margin"
        android:src="@drawable/ic_directions_bus_black"
        app:backgroundTint="@android:color/white" />

    <com.google.android.material.floatingactionbutton.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"
        android:layout_marginEnd="@dimen/fab_margin"
        app:backgroundTint="@color/purple_200"
        android:visibility="gone"/>

    <ImageView
        android:id="@+id/back_ib"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/circle_white_bg"
        android:src="@drawable/icon_back"
        app:tint="@color/color_back_icon"/>

</RelativeLayout>

PolygonClusterActivity view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
public class PolygonClusterActivity extends AppCompatActivity implements OnMapReadyCallback, NextbillionMap.OnMapClickListener, View.OnClickListener {

   private static final String TAG = "PolygonClusterActivity";
   public static final String SOURCE_ID = "bus_stop";
   public static final String SOURCE_ID_CLUSTER = "bus_stop_cluster";
   public static final String URL_BUS_ROUTES = "https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson";
   public static final String LAYER_ID = "stops_layer";
   private static final String TAXI = "taxi";
   private ImageView backBtn;
   private MapView mapView;
   private NextbillionMap nextbillionMap;

   private FloatingActionButton styleFab;
   private FloatingActionButton routeFab;

   private CircleLayer layer;
   private GeoJsonSource source;

   private int currentStyleIndex = 0;
   private boolean isLoadingStyle = true;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_polygon_cluster);
       mapView = findViewById(R.id.map_view);
       backBtn = findViewById(R.id.back_ib);
       mapView.onCreate(savedInstanceState);
       mapView.getMapAsync(this);

       backBtn.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });
   }

   @Override
   public void onMapReady(@NonNull NextbillionMap nbMap) {
       this.nextbillionMap = nbMap;
       mapView.addOnDidFinishLoadingStyleListener(() -> {
           Style style = nextbillionMap.getStyle();
           style.addImage(TAXI,(BitmapDrawable)getResources().getDrawable(R.mipmap.beat_taxi));
           addBusStopSource(style);
           addBusStopCircleLayer(style);
           initFloatingActionButtons();
           isLoadingStyle = false;
       });
   }

   @Override
   public boolean onMapClick(@NonNull LatLng latLng) {

       return false;
   }


   private void addBusStopSource(Style style) {
       try {
           source = new GeoJsonSource(SOURCE_ID, new URI(URL_BUS_ROUTES));
       } catch (URISyntaxException exception) {
           Log.e(TAG, "That's not an url... ");
       }
       style.addSource(source);
   }

   private void addBusStopCircleLayer(Style style) {
       layer = new CircleLayer(LAYER_ID, SOURCE_ID);
       layer.setProperties(
               circleColor(Color.parseColor("#FF0000")),
               circleRadius(2.0f)
       );
       style.addLayerBelow(layer, "waterway-label");
   }

   private void initFloatingActionButtons() {
       routeFab = findViewById(R.id.fab_route);
       routeFab.setColorFilter(ContextCompat.getColor(PolygonClusterActivity.this, R.color.purple_200));
       routeFab.setOnClickListener(PolygonClusterActivity.this);

       styleFab = findViewById(R.id.fab_style);
       styleFab.setOnClickListener(PolygonClusterActivity.this);
   }

   @Override
   public void onClick(View view) {
       if (isLoadingStyle) {
           return;
       }

       if (view.getId() == R.id.fab_route) {
           showBusCluster();
       } else if (view.getId() == R.id.fab_style) {
           changeMapStyle();
       }
   }

   private void showBusCluster() {
       removeFabs();
       removeOldSource();
       addClusteredSource();
   }

   private void removeOldSource() {
       nextbillionMap.getStyle().removeSource(SOURCE_ID);
       nextbillionMap.getStyle().removeLayer(LAYER_ID);
   }

   private void addClusteredSource() {
       try {
           nextbillionMap.getStyle().addSource(
                   new GeoJsonSource(SOURCE_ID_CLUSTER,
                           new URI(URL_BUS_ROUTES),
                           new GeoJsonOptions()
                                   .withCluster(true)
                                   .withClusterMaxZoom(14)
                                   .withClusterRadius(50)
                   )
           );
       } catch (URISyntaxException malformedUrlException) {
           Log.e(TAG, "That's not an url... ");
       }

       // Add unclustered layer
       int[][] layers = new int[][]{
               new int[]{150, ResourcesCompat.getColor(getResources(), R.color.purple_200, getTheme())},
               new int[]{20, ResourcesCompat.getColor(getResources(), R.color.colorAccent, getTheme())},
               new int[]{0, ResourcesCompat.getColor(getResources(), R.color.color_4158ce, getTheme())}
       };

       SymbolLayer unclustered = new SymbolLayer("unclustered-points", SOURCE_ID_CLUSTER);
       unclustered.setProperties(
               iconImage(TAXI)
       );

       nextbillionMap.getStyle().addLayer(unclustered);

       for (int i = 0; i < layers.length; i++) {
           // Add some nice circles
           CircleLayer circles = new CircleLayer("cluster-" + i, SOURCE_ID_CLUSTER);
           circles.setProperties(
                   circleColor(layers[i][1]),
                   circleRadius(18f)
           );

           Expression pointCount = toNumber(get("point_count"));
           circles.setFilter(
                   i == 0
                           ? all(has("point_count"),
                           gte(pointCount, literal(layers[i][0]))
                   ) : all(has("point_count"),
                           gt(pointCount, literal(layers[i][0])),
                           lt(pointCount, literal(layers[i - 1][0]))
                   )
           );
           nextbillionMap.getStyle().addLayer(circles);
       }

       // Add the count labels
       SymbolLayer count = new SymbolLayer("count", SOURCE_ID_CLUSTER);
       count.setProperties(
               textField(Expression.toString(get("point_count"))),
               textSize(12f),
               textColor(Color.WHITE),
               textIgnorePlacement(true),
               textAllowOverlap(true)
       );
       nextbillionMap.getStyle().addLayer(count);
   }

   private void removeFabs() {
       routeFab.setVisibility(View.GONE);
       styleFab.setVisibility(View.GONE);
   }

   private void changeMapStyle() {
       isLoadingStyle = true;
       removeBusStop();
       loadNewStyle();
   }

   private void removeBusStop() {
       nextbillionMap.getStyle().removeLayer(layer);
       nextbillionMap.getStyle().removeSource(source);
   }

   private void loadNewStyle() {
       nextbillionMap.setStyle(new Style.Builder().fromUri(getNextStyle()));
   }

   private void addBusStop() {
       nextbillionMap.getStyle().addLayer(layer);
       nextbillionMap.getStyle().addSource(source);
   }

   private String getNextStyle() {
       currentStyleIndex++;
       if (currentStyleIndex == Data.STYLES.length) {
           currentStyleIndex = 0;
       }
       return Data.STYLES[currentStyleIndex];
   }


   ///////////////////////////////////////////////////////////////////////////
   // Lifecycle
   ///////////////////////////////////////////////////////////////////////////

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

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

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

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

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

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

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

   private static class Data {
       private static final String[] STYLES = new String[]{
               Style.NBMAP_STREETS,
               Style.OUTDOORS,
               Style.LIGHT,
               Style.DARK,
               Style.SATELLITE,
               Style.SATELLITE_STREETS
       };
   }
}
  • onMapReady: This method is called when the map is ready to be used. It initializes the NextbillionMap object and adds listeners to the map-style loading event. Once the style finishes loading, it adds the bus stop source, bus stop circle layer and sets up the floating action buttons.

  • addBusStopSource: This method adds a GeoJsonSource to the map style, representing the bus stop data source. It creates a GeoJsonSource object with the provided URL to a GeoJSON file containing bus stop information and adds it to the map style.

  • addBusStopCircleLayer: This method adds a CircleLayer to the map style, representing the bus stop markers on the map. It creates a CircleLayer object with the specified layer ID and source ID, sets properties for the circle color and radius and adds the layer to the map style.

  • addClusteredSource: This method adds a clustered source to the map style, representing a clustering of bus stops. It creates a GeoJsonSource object with the provided URL to a GeoJSON file, enables clustering with specified cluster options and adds the source to the map style. It also adds clustered and unclustered layers to represent the clusters and individual bus stops on the map.

  • showBusCluster: This method is called when the user clicks on the "Route" floating action button. It removes the existing floating action buttons, removes the old bus stop source and layer from the map style, and adds a clustered source with clustered and unclustered layers to represent the bus stop clusters on the map.

Have Questions ?