from cluster to spiderfy with richmarkers

[tharrington]

I have a map which starts clustered, when i drill down on the cluster, there could be some markers which are right on top of each other. Per your example in issue 1021, I switch from cluster to spider:

$scope.map = { 
        center: { latitude: 42.3453323, longitude: -71.0972339 }, 
        zoom: 3,
        type : 'cluster',
        events: {
        zoom_changed: function(map){
          if(map.getZoom() > 14){
            $log.info('[+] should spiderfy');
            $scope.map.doSpider = true;
          }
          else{
            $scope.map.doSpider = false;
          }
        }
      }
    };

And the html:

<ui-gmap-google-map center="map.center" zoom="map.zoom"  events="map.events">
                <ui-gmap-markers ng-if="!map.doSpider" models="markers" coords="'coords'" options="'options'" events="markersEvents" type="'cluster'" fit="true" typeEvents="map.clusterEvents" typeOptions="clusterOptions">
        </ui-gmap-markers>
        <ui-gmap-markers ng-if="map.doSpider" models="markers" coords="'coords'" idkey="'id'" options="'options'" events="markersEvents" type="'spider'" modelsbyref="true" typeOptions="spiderOptions">
        </ui-gmap-markers>
                </ui-gmap-markers>
          </ui-gmap-google-map>

The problem is, when the zoom level > 14 the cluster does away but spiderfy does not happen. I am wondering if this could be due to using richmarker to construct markers:

{"id":"56aaa0684befa5f3923bcb50","coords":{"latitude":30.267153,"longitude":-97.74306079999997},"options":{"shadow":false,"content":"<div class='pin bounce' style='background: #ef473a'></div>"},"events":{}} Is that a potential issue?

[david-meza]

It seems you may be working with an outdated example, since according to the latest version of the docs you should be changing the type expression instead of using a doSpider expression.

A few things I would try:

• There are 3 closing ui-gmap-markers tags. Try getting rid of the extra one.
• Do not use two sets of markers as there's the overhead of angular directive compilation (generating new markers and making them disappear from the DOM) every time your ng-if expression changes. Instead try the following:

HTML:

<ui-gmap-google-map center="map.center" zoom="map.zoom"  events="map.events">
  <ui-gmap-markers models="markers" coords="'coords'" options="'options'" events="markersEvents" type="markersConfig.type" fit="true" typeEvents="map.clusterEvents" typeOptions="clusterOptions">
  </ui-gmap-markers>
</ui-gmap-google-map>

• When your zoom changes just change the type expression which is being watched

JS:

$scope.map.events.zoom_changed = function (map) {
  $scope.markersConfig.type = (map.getZoom() >= 14) ?  'spider' : 'cluster'; 
};

It would also be nice if you could provide a MVCE (Plnkr, Jsbin, etc example) with your issue.

[mansimransingh]

@david-meza changing type resets map to default state, which will also change zoom to initial zoom.

[david-meza]

@mansimransingh In my application this works just fine. It does seem to reset the markers because I can see the bouncing animation happening again, but the map is unaffected.

[tharrington]

I still have not been able to get this to work. Am I missing something in the config @david-meza ?

<ui-gmap-google-map center='map.center' events="map.events" zoom='map.zoom' bounds="map.bounds" control="map.control">
                <ui-gmap-markers 
                    type="map.type" 
                    idkey="'id'" 
                    models="markers" 
                    coords="'coords'" 
                    options="'options'" 
                    typeEvents="map.clusterEvents" 
                    typeOptions="map.options">
                </ui-gmap-markers>
        </ui-gmap-google-map>`

And the JS:

$scope.map = { 
        center: { latitude: 41.9484384, longitude: -87.65532339 },
        zoom: 2,
        type : 'cluster',
        bounds: {},
        control: {},
        options: {
          maxZoom:15,
              styles: [{
              textColor: 'white',
              url: 'http://s15.postimg.org/fuaqrrot3/rsz_cluster_resize.png',
              height: 40,
              width: 40,
              textSize: 11,
              fontWeight: 'normal'
            }],
          keepSpiderfied:true
        },
        events: {
        zoom_changed: function(map){
          $scope.map.type = (map.getZoom() >= 14) ?  'spider' : 'cluster'; 
        }
      },
      clusterEvents : {
        click: function() {
            $log.info('[+] clicked cluster');
        }
      }
    };

[netowp]

@tharrington Did you get it to work? I have a similar problem here, the typeOptions aren't working on my code.

[BenRoe]

@tharrington +1 for working example

[Quentintin]

Same problem than @mansimransingh , the map reset when i change type dynamicaly. I'm on 2.3.1 version

[paolorossi]

Same problem than @mansimransingh and @Quentintin. Here's the codepen for this issue.