Cluster Feature

[hirbod]

Do you have any plans to include clustering? There are official ways provided for android and iOS. I would love to see clustering feature here

[dapriett]

Hi @hirbod - would be a great feature. I currently don't have the time to work on it, but would welcome any pull requests if someone wants to pick it up.

[dapriett]

Clustering guides: Android | iOS

[naderio]

I have this implemented in android, I'll see what I can do when I have time

in the mean time, check the code in question that covers marker cluster and heatmap

app.gradle

dependencies {
    // ...
    compile 'com.google.maps.android:android-maps-utils:0.4.+'
    // ...
}

map.android.js

function setupMarkerCluster(mapView, markers, options) {
  debug('setupMarkerCluster');
  var mClusterManager = new ClusterManager(utils.ad.getApplicationContext(), mapView.gMap);

  // var renderer = new DefaultClusterRenderer(utils.ad.getApplicationContext(), mapView.gMap, mClusterManager);

  // renderer.onBeforeClusterItemRendered = function (item, markerOptions) {

  //   debug('onBeforeClusterItemRendered');

  //   markerOptions.alpha(0.8);
  //   markerOptions.flat(true);
  //   markerOptions.rotation(item.rotation);

  //   var icon = new Image();
  //   icon.imageSource = imageSource.fromResource('ic_marker_taxi');
  //   var androidIcon = com.google.android.gms.maps.model.BitmapDescriptorFactory.fromBitmap(icon.imageSource.android);
  //   markerOptions.icon(androidIcon);

  // };

  // mClusterManager.setRenderer(renderer);

  mapView.gMap.setOnCameraChangeListener(mClusterManager);

  markers.forEach(function (marker) {
    mClusterManager.addItem(new ClusterItem({
      rotation: marker.rotation,
      getPosition: function () {
        return new LatLng(marker.position[0], marker.position[1]);
      }
    }));
  });

  mClusterManager.cluster();
}
exports.setupMarkerCluster = setupMarkerCluster;

function setupHeatmap(mapView, markers, config) {
  debug('setupHeatmap');

  var list = new java.util.ArrayList();

  markers.forEach(function (marker) {
    list.add(new LatLng(marker.position[0], marker.position[1]));
  });

  if (config) {

    config.mProvider.setData(list);
    config.mOverlay.clearTileCache();

  } else {

    config = {};

    config.mProvider = new HeatmapTileProvider.Builder()
      .data(list)
      .build();

    config.mOverlay = mapView.gMap.addTileOverlay(new TileOverlayOptions().tileProvider(config.mProvider));

  }

  return config;
}
exports.setupHeatmap = setupHeatmap;

[naderio]

supporting marker cluster and other features require adding extra dependencies which is probably not a good idea to include them by default.
I took the liberty to implement this as separate module https://github.com/naderio/nativescript-google-maps-utils. It works only on Android for now.

[dapriett]

Nice work @naderio! Yeah, makes sense to keep it separate. I added a link to your module in the readme.

[dxshindeo]

Is the commented fragment of "DefaultClusterRenderer" correct? Because it doesn't throw me any error, but it also doesn't show any console.log I put in onBeforeClusterItemRendered function. So that function isn't called?

[dxshindeo]

The cluster won't even initialize if I don't uncomment the commented part...