circle.remove() doesn't remove the circle

[xyboox]

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
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-facebook4 4.1.0 "Facebook Connect"
cordova-plugin-firebase-authentication 1.0.1 "cordova-plugin-firebase-authentication"
cordova-plugin-googlemaps 2.1.1 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 7.0.0 "Google SignIn"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.3.2 "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-plugin-x-socialsharing 5.4.4 "SocialSharing"
cordova-support-android-plugin 1.0.1 "cordova-support-android-plugin"
cordova-support-google-services 1.2.1 "cordova-support-google-services"
es6-promise-plugin 4.2.2 "Promise"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"

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": "^4.20.0", "@ionic-native/google-maps": "^4.20.0",

Current behavior:

circle.remove() does not remove the circle from the map Expected behavior:

to remove the circle from the map

Screen capture or video record:

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

updateRadius() {
this.circle.remove();

let that = this;
this.map
            .addCircle({
                center: { lat: 46.7418668, lng: 23.5669405 },
                radius: this.radius,
                strokeColor: '#6276a5',
                strokeWidth: 3,
                fillColor: 'rgba(0,0,0, 0.1)'
            })
            .then((circle) => {
                that.circle = circle;

                that.map.moveCamera({
                    target: that.circle.getBounds()
                });

            });
}
this.radius += 100;
updateRadius();

The person who share your project files on Github (or other git repository) is in faster lane than other people. Please share your project files on Github or others(Bitbucket, Gitlabs...etc). If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less. Thank you for your cooperation.

[wf9a5m75]

Why don't you reuse the circle?

this.circle = this.map.addCircleSync({...});

this.circle.setRadius(...);
this.circle.setCenter(...);

[xyboox]

@wf9a5m75 in fact I ended up doing just that but I thought I say something about the remove() method in case someone else is hitting the same wall.

[battika]

Strange @xyboox. I tried a very similar code to the one you provided as I am using circles extensively and it worked well for me:

https://youtu.be/RCXYr7y4rsw

[xyboox]

@battika it works for me too if I use the code in the plugin's provided sample. But not as in the sample code I put above ( where the circle object is NOT sent through the click event but rather referenced as class level variable. Try that way.

[wf9a5m75]

@xyboox In order to testify, please share your project files on GitHub repository. Otherwise nobody can not check your problem.

[battika]

Hello @xyboox, I am using it as class-level variable, as below

export class HomePage {
   circleInst: Circle;

constructor() ... 
... blah blah blah ...

  addCircle() {
    if (!this.circleInst) {
      this.nativeMapObj.addCircle({
        center: {lat: CAMERA_DEFAULT_LAT, lng: CAMERA_DEFAULT_LONG} as ILatLng,
        radius: 100,
        strokeColor: '#6276a5',
        strokeWidth: 3,
        fillColor: 'rgba(0,0,0, 0.1)'
      } as CircleOptions).then((c) => {
        this.circleInst = c;
        this.nativeMapObj.moveCamera({target: c.getBounds()});
      })
    }
  }

  removeCircle() {
    if (this.circleInst) {
      this.circleInst.remove();
      this.circleInst = null;
    }
  }

[wf9a5m75]

@xyboox ping

[xyboox]

@battika key seems to be the last line of you code: this.circleInst = null; without it it gets weird ( by keep adding circles ). So thanks!