feat(shapes): add support for drawing polyline, polygon and circle

Question

feat(shapes): add support for drawing polyline, polygon and circle

tafelnl opened this issue 2 years ago · comments

It should be possible to draw basic shapes on the map. There's actually already an open PR that adds this: #149

It adds the methods addPolygon, addPolyline and addCircle with some options. E.g. to fill them with a solid color and to adjust the color of the stroke (i.e. the border of the shape).

However, to be on par with the API the Google SDK offers, some additional functionality is needed as well.

We will first focus on completing the functionality of the polygon shape only. Later on, we will add similar functionality to the polyline and circle shapes as well. This way we keep the scope smaller. The requirements are as follows:

The API in the PR regarding the polygon (as said above) only has the addPolygon method right now. But it should be on par with the API that the Android SDK of Google itself offers (can be found here).

More specifically, this will thus entail the following changes:

1. Keep a list of drawn polygons. This means a polygon that is added, should be saved in some sort together with an guid. For reference: the addMarker method has similar functionality.
2. The PolygonOptions of the PR already supports specifying the points, tag, strokeColor, fillColor, strokeWidth, zIndex and the visibility. Support should also be added for clickable, geodesic, holes, strokePattern, strokeJointType.
3. Add a getPolygon(id: string) method, that returns all properties of the specified polygon. For reference: the getḾap method has similar functionality.
4. Add a updatePolygon(id: string, preferences: object) method, which accepts the same preference parameters as the addMarker method, so the polygon can be updated.
5. Add a removePolygon(id: string) method, so a polygon can be removed (remember to update the list mentioned in 1 as well).

Bonus 1: it should be possible to - instead of a solid color fill - apply a pattern of images to a polygon. For more information, check this Stack Overflow question

Bonus 2: it should be possible to place the shapes on top of the markers. Normally they are drawn behind the markers.

Timileyin Oluwayomi commented a year ago

alright

Tafel · Answer 1 · Thu Mar 31 2022 18:02:17 GMT+0800 (China Standard Time)

@galilov will soon start with the implementation on Android. If someone would like to contribute and help with the iOS part, please feel free to chime in :)

nodiced922 · Answer 2 · Tue Oct 25 2022 08:46:20 GMT+0800 (China Standard Time)

Any ideas when polygons will be added.
I just upgraded my project from cordova to capacitor.....and now realize with the feature missing, I am going to have to revert everything back.....

woouser · Answer 3 · Tue Nov 08 2022 06:38:12 GMT+0800 (China Standard Time)

Missing polyline prevent us from using the capacitor google map.

Ibrahim El-Khatib · Answer 4 · Thu Nov 10 2022 01:03:02 GMT+0800 (China Standard Time)

Any idea when Circle will be added?

Ed Byrne · Answer 5 · Mon Jan 16 2023 09:08:32 GMT+0800 (China Standard Time)

Any idea when Circle will be added?

Was this feature ever added??

Tafel · Answer 6 · Fri Jan 20 2023 23:12:29 GMT+0800 (China Standard Time)

Partly shipped in 2.0.0-beta.6: adding polygons is now supported.

Wyn Owen · Answer 7 · Fri Apr 21 2023 19:31:37 GMT+0800 (China Standard Time)

Hi,

Is there a timeline for adding Polylines to this Plugin? It works wonderfully in my app BTW.

asma-omar · Answer 8 · Thu Apr 27 2023 19:25:56 GMT+0800 (China Standard Time)

=

Hi,

Is there a timeline for adding Polylines to this Plugin? It works wonderfully in my app BTW.

did you mean polyline works on your app ?how can i add polyline to map?

Wyn Owen · Answer 9 · Mon May 01 2023 17:19:54 GMT+0800 (China Standard Time)

Hi Good Morning,

What I meant is that the basic map, zoom, maptype etc all work. My question is your second question:

how can i add polyline to map?

I see it's not officially part of the plugin but I've seen bits referring to polylines in the code.

Timileyin Oluwayomi · Answer 10 · Tue May 09 2023 22:14:24 GMT+0800 (China Standard Time)

@WynOwen72 @asma-omar i was able to use polyline feature on the map
i had to edit the google map source code

result

Timileyin Oluwayomi · Answer 11 · Tue May 09 2023 22:17:58 GMT+0800 (China Standard Time)

if the team hasn't gotten this feature already developed, i can take my time to contribute to this

Wyn Owen · Answer 12 · Wed May 10 2023 06:03:19 GMT+0800 (China Standard Time)

if the team hasn't gotten this feature already developed, i can take my time to contribute to this

My skills are weak in Java and Swift but i'd love to take a peek.

Tafel · Answer 13 · Wed May 10 2023 13:43:19 GMT+0800 (China Standard Time)

PRs are welcome! Please try to adhere to the coding guidelines and principles in the codebase. That'll make it easier for me to review it.

jldlxs · Answer 14 · Fri May 12 2023 05:12:49 GMT+0800 (China Standard Time)

Hello @Timileyin105 and @tafelnl.
Some news about Polylines?

Thank you so much.

Timileyin Oluwayomi · Answer 15 · Fri May 12 2023 19:07:29 GMT+0800 (China Standard Time)

@jidlxs and @WynOwen72 i plan to work on this and push it tomorrow

Wyn Owen · Answer 16 · Fri May 12 2023 19:59:51 GMT+0800 (China Standard Time)

@jidlxs and @WynOwen72 i plan to work on this and push it tomorrow

Thank you :-)

jldlxs · Answer 17 · Sat May 13 2023 00:35:04 GMT+0800 (China Standard Time)

@jidlxs and @WynOwen72 i plan to work on this and push it tomorrow

This is amazing.
Thank you so much.

Timileyin Oluwayomi · Answer 18 · Sun May 14 2023 00:12:30 GMT+0800 (China Standard Time)

hello @jldlxs @WynOwen72 @tafelnl
i just opened a pull for the polyline
currently i use window and can't use xcode to work on the feature for ios

@tafelnl please review this and let me know if ok or there is still some works
thanks