feat: update cluster example

hansemannn · Feb 17, 2019 · 389dd76 · 389dd76
1 parent 24d22fc
commit 389dd76
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/Classes/TiGooglemapsViewProxy.m b/Classes/TiGooglemapsViewProxy.m
@@ -793,13 +793,19 @@ - (void)showAnnotations:(id)args
 
 - (void)setClusterConfiguration:(NSDictionary<NSString *,id> *)clusterConfiguration
 {
+  NSArray<NSNumber *> *ranges = clusterConfiguration[@"ranges"];
+  NSArray<NSString *> *rangeBackgrounds = clusterConfiguration[@"rangeBackgrounds"];
   NSUInteger minimumClusterSize = [TiUtils intValue:clusterConfiguration[@"minimumClusterSize"] def:4];
   NSUInteger maximumClusterZoom = [TiUtils intValue:clusterConfiguration[@"maximumClusterZoom"] def:20];
   double animationDuration = [TiUtils doubleValue:clusterConfiguration[@"animationDuration"] def:0.5];
 
   [self mapView].clusterRenderer.minimumClusterSize = minimumClusterSize;
   [self mapView].clusterRenderer.maximumClusterZoom = maximumClusterZoom;
   [self mapView].clusterRenderer.animationDuration = animationDuration;
+
+  // Set the proxy values to the old keys for background compatibility
+  [self replaceValue:ranges forKey:@"clusterRanges" notification:NO];
+  [self replaceValue:rangeBackgrounds forKey:@"clusterBackgrounds" notification:NO];
 }
 
 @end
diff --git a/README.md b/README.md
@@ -658,14 +658,19 @@ You are all set! Optionally, you can also set your own cluster ranges and define
 images for each cluster range in your `mapView` instance:
 ```js
 var mapView = maps.createView({
-    clusterRanges: [10, 50, 100, 200, 500],
-    clusterBackgrounds: [
-        'buckets/m1.png',
-        'buckets/m2.png',
-        'buckets/m3.png',
-        'buckets/m4.png',
-        'buckets/m5.png'
-    ],
+    clusterConfiguration: {
+        ranges: [10, 50, 100, 200, 500],
+        rangeBackgrounds: [
+            'buckets/m1.png',
+            'buckets/m2.png',
+            'buckets/m3.png',
+            'buckets/m4.png',
+            'buckets/m5.png'
+        ],
+        minimumClusterSize: 4,
+        maximumClusterZoom: 20,
+        animationDuration: 0.5
+    },
     region: {
         latitude: 37.368122,
         longitude: -121.913653,

diff --git a/example/clustering.js b/example/clustering.js
@@ -28,14 +28,19 @@ var location = {
  *  MapView
  */
 var mapView = maps.createView({
-    clusterRanges: [10,50,100,200,500],
-    clusterBackgrounds: [
-        'buckets/m1.png',
-        'buckets/m2.png',
-        'buckets/m3.png',
-        'buckets/m4.png',
-        'buckets/m5.png'
-    ],
+    clusterConfiguration: {
+        ranges: [10, 50, 100, 200, 500],
+        rangeBackgrounds: [
+            'buckets/m1.png',
+            'buckets/m2.png',
+            'buckets/m3.png',
+            'buckets/m4.png',
+            'buckets/m5.png'
+        ],
+        minimumClusterSize: 4,
+        maximumClusterZoom: 20,
+        animationDuration: 0.5
+    },
     region: {
         latitude: location.latitude,
         longitude: location.longitude