Ionic 4 : MarkerCluster strange behaviours and issues

[guy-brion]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [x] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-androidx 1.0.2 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-firebasex 7.0.1 "Google Firebase Plugin"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova.plugins.diagnostic 5.0.1 "Diagnostic"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^5.17.1",
"@ionic-native/google-maps": "^5.5.0",

Current behavior:

Hi,

First of all a big thank you for this plugin which is very useful ! I already made a donation to thank you and support this plugin :-)

For a little context, I just rewrote an Ionic v3 app to Ionic v4 from scratch, and saw a few bugs while comparing the marker clusters behaviour between the 2 versions.

I can't publish my new app with these issues, here is the detail of what I saw :

1. Display issues
   • When the map is loaded, the clusters usually don't appear. I have to move the map to another location, pause, then come back to the original location
   • When I move the map, the clusters are not displayed until I stop moving (even the ones that where already loaded and displayed before I moved). The same happens with the markers contained in clusters (not with normal markers)
2. Zoom in issue
   • When I click on a cluster, most of the time it zooms in but the cluster doesn't split to display the markers. If I try to click on the cluster again, nothing happens. I have to zoom in manually to see the markers
3. Marker disappearing issue
   • On iOS, when a cluster is removed after zooming in to display the markers, some of the markers disappear a few seconds after appearing. I have to move the map to another location, pause, then come back to the original location to see it again

Expected behavior:

1. Display issues
   • When the map is loaded, the clusters should be displayed
   • When I move the map, the clusters should be visible even if they were outside of the visible part of the map, without having to stop moving the map
2. Zoom in issue
   • When I click on a cluster, it should zoom in enough to either split into smaller clusters, or show the markers contained in the cluster
3. Marker disappearing issue
   • On iOS, when a cluster is removed after zooming in to display the markers, the markers should always be visible

Screen capture or video record:

Screen record MarkerCluster issue.mp4.zip

On the screen record :

The green and red markers are not included in clusters and always correctly displayed.

The blue circles are the clusters, and the little avatar markers are the one included in clusters.

• 00:00 : On load you can see that only 4 clusters are shown
• 00:03 to 00:09 : I move the map and come back, all the clusters are finally displayed, but only when I stop moving
• 00:10 to 00:14 : I move the map and come back, all the clusters disappeared again, and are finally displayed, but only when I stop moving
• 00:14 to 00:15 : The bottom right marker disappears
• 00:17 to 00:18 : I clicked on the cluster 28, the camera is centered on it but not zooming in. I can't see the underlying markers
• 00:20 to 00:21 : I clicked on the cluster 27, the camera is centered and zooming in as expected. We can see that the cluster has been split in smaller clusters
• 00:22 : I clicked on the cluster 11, the camera is centered on it and zooming in, but the cluster is still there and I can't click to zoom anymore, and can't see the underlying markers
• 00:25 : I clicked on the cluster 6, the camera is centered and zooming in as expected. We can see that the cluster has been split in smaller clusters, and 2 markers are also shown
• 00:27 : One of the 2 markers that have just been displayed disappeared (the one at the top)
• 00:27 to 00:28 : I clicked on the cluster 4 at the bottom, the camera is centered and zooming in as expected. We can see that the cluster has been removed and the 4 underlying markers are shown
• 00:29 : 2 of the 4 markers that have just been displayed disappeared 00:43 to 00:46 : I move the map again and come back, all the clusters disappeared again, and are finally displayed, but only when I stop moving. We can also see that the normal markers (the green and red ones not included in clusters) are always displayed, as expected

Related code, data or error log (please format your code or data):

I can't easily share the original code as I can't isolate the parts that are linked to this issue, and the markers data comes from a secured API. But I've created a simple Ionic 4 project with just a map and a cluster and could reproduce most of the issues.

import { Component } from '@angular/core';
import {
  GoogleMaps,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
} from "@ionic-native/google-maps";
import { Platform, NavController } from "@ionic/angular";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public platform: Platform, public nav: NavController) { }

  ngAfterViewInit() {
        this.platform.ready().then( () => {
            this.loadMap();
        });
    }

  loadMap() {
    const map = GoogleMaps.create('map');

    map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      const coordinates: LatLng = new LatLng(36.7783, 119.4179);

      const position = {
        target: coordinates,
        zoom: 14
      };

      map.animateCamera(position);

      const markers: MarkerOptions[] = [
        { position: { lat: 36.7783, lng: 119.4179 } },
        { position: { lat: 36.7784, lng: 119.4179 } },
        { position: { lat: 36.7785, lng: 119.4179 } },
        { position: { lat: 36.7786, lng: 119.4179 } },
        { position: { lat: 36.7787, lng: 119.4179 } },
        { position: { lat: 36.7788, lng: 119.4179 } },
        { position: { lat: 36.7789, lng: 119.4179 } },
        { position: { lat: 36.7790, lng: 119.4179 } },
        { position: { lat: 36.7791, lng: 119.4179 } },
        { position: { lat: 36.7792, lng: 119.4179 } },
        { position: { lat: 36.7793, lng: 119.4179 } },
        { position: { lat: 36.7794, lng: 119.4179 } },
        { position: { lat: 36.7795, lng: 119.4179 } },
        { position: { lat: 36.7796, lng: 119.4179 } },
        { position: { lat: 36.7797, lng: 119.4179 } }
      ];

      map.addMarkerClusterSync({
        markers: markers,
        icons: [
          {
            url: "assets/icons/map/cluster-marker.png",
            size: {
              width: 30,
              height: 30
            }
          }
        ]
      });
    })
  }
}

Don't hesitate if you need more information, or if you need me to try some fixes or configurations.

[wf9a5m75]

Thank you for your donation. Unfortunately I'm super busy. Please use as-is.

[ulver2812]

1. Display issues
   • When the map is loaded, the clusters usually don't appear. I have to move the map to another location, pause, then come back to the original location
   • When I move the map, the clusters are not displayed until I stop moving (even the ones that where already loaded and displayed before I moved). The same happens with the markers contained in clusters (not with normal markers)

@guy-brion same issue here.

Have you tried to use different format for markers and clusters, I mean .png, .jpg or .svg ?

[guy-brion]

Is this issue resolved ?

[nosTa1337]

Zoom in issue When I click on a cluster, most of the time it zooms in but the cluster doesn't split to display the markers. If I try to click on the cluster again, nothing happens. I have to zoom in manually to see the markers

At least that one still occurs.

[guy-brion]

Yep for me too. All the issues are still there.

For the disappearing markers issue, I tried with .svg as suggested by @ulver2812 with the same result :/