Circle with multiple points

[anafreitas]

After I draw a circle, the feature shows multiple points instead of 4. Also I can't edit because the feature behave like a polygon. What could be wrong?

[netogildo]

I have the same problem, can't draw like demo

[omarviano]

I have the same problem, can't draw like demo

[iskabin]

Same here :/
AngularJS

[iamanvesh]

Can one of you please provide a sample code to help me reproduce the issue? It would be great if its on codesandbox or similar.

[anafreitas]

@iamanvesh Sure. Here it is https://codesandbox.io/s/angularjs-wztbf?fontsize=14

[iamanvesh]

Ok there seems to be multiple reasons which are causing this bug. First off I'd like to mention that this library only works if you add it as a dependency using yarn/npm and use es6 imports/commonjs to import the objects. I don't know how you've generated the bundle file in the example above. That being said, itseems there's an issue with importing MapboxDraw object while using it with Angular6. I believe #13 is a workaround for the issue (@verbeeckjan correct me if I'm wrong). For the time being, I suggest you guys copy all the files under lib folder directly into your source code and use them until I figure out how to fix these issues. I'll try to add webpack/browserify to bundle the library into a dist file in the future release but I cannot guarantee a timeline at the moment. You can find the corresponding Mapbox draw issue here.

[anafreitas]

Hi @iamanvesh, thanks for your answer. I used browserify to generate this bundle because I'm using AngularJS, not Angular 2+. But I don't think the MapboxDraw import is the problem here, because when I debug the generated bundle the MapboxDraw object is imported normally. The same for the other imports, they all apears in the bundle.

[iamanvesh]

@anafreitas I think the problem with your code is here

var Draw = new window.MapboxDraw({
      defaultMode: "draw_circle",
      userProperties: true,
      modes: Object.assign(
        {
          draw_circle: window.MapboxDrawCircle.CircleMode,
          drag_circle: window.MapboxDrawCircle.DragCircleMode
        },
        window.MapboxDraw.modes
      )
    });

Two issues that I notice here are

• You're not adding the SimpleSelectMode and DirectMode from The draw-circle library as mentioned in the documentation.
• Also, Object.assign(target, source) replaces the objects in the target with the same keys from the ones in the source.

Please use the following code as a reference for initializing the draw object.

var Draw = new window.MapboxDraw({
      defaultMode: "draw_circle",
      userProperties: true,
      modes: Object.assign(window.MapboxDraw.modes, {
        draw_circle: window.MapboxDrawCircle.CircleMode,
        drag_circle: window.MapboxDrawCircle.DragCircleMode,
        simple_select: window.MapboxDrawCircle.SimpleSelectMode,
        direct_select: window.MapboxDrawCircle.DirectMode
      })
    });

FYI @netogildo @mva-markim @iskabin

[anafreitas]

Hi @iamanvesh it's working now. Thank you sooooo much for the help.