Cluster Feature
hirbod opened this issue · 7 comments
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
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.
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;
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.
Nice work @naderio! Yeah, makes sense to keep it separate. I added a link to your module in the readme.
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?
The cluster won't even initialize if I don't uncomment the commented part...