• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

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<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
4 xmlns:tools="http://schemas.android.com/tools"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent"
7 android:orientation="vertical"
8 tools:context=".PolygonActivity">
10 <ai.nextbillion.maps.core.MapView
11 android:id="@id/map_view"
12 android:layout_width="match_parent"
13 android:layout_height="match_parent"
14 app:nbmap_uiAttribution="false"
15 app:nbmap_cameraTargetLat="1.3383500934590808"
16 app:nbmap_cameraTargetLng="103.80586766146754"
17 app:nbmap_cameraZoom="11" />

PolygonClusterActivity view source

1public class PolygonClusterActivity extends AppCompatActivity implements OnMapReadyCallback, NextbillionMap.OnMapClickListener, View.OnClickListener {
3 private static final String TAG = "PolygonClusterActivity";
4 public static final String SOURCE_ID = "bus_stop";
5 public static final String SOURCE_ID_CLUSTER = "bus_stop_cluster";
6 public static final String URL_BUS_ROUTES = "https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson";
7 public static final String LAYER_ID = "stops_layer";
8 private static final String TAXI = "taxi";
9 private ImageView backBtn;
10 private MapView mapView;
11 private NextbillionMap nextbillionMap;
13 private FloatingActionButton styleFab;
14 private FloatingActionButton routeFab;
16 private CircleLayer layer;
17 private GeoJsonSource source;
  • 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 ?