Building custom overlay specifically circle with radius(colored) in Android MapBox GL

Question

Building custom overlay specifically circle with radius(colored) in Android MapBox GL. It allows to change radius dynamically using seekbar.

I'm trying to build some custom markers and I used SimpleCircleView but Im having problem trying to display it in MapBox GL android, and it created lots of bugs.

1. The map touch event is unresponsive once my CircleOverlay is displayed in map
2. The marker doesnt stay in its coordinates once i zoom-in , zoom-out.
3. Updating markers doesnt work, So I have to remove then add again the marker.
4. The color does not match the color that I set in marker.

I'll limit my posting on code, because this repo is mine and to keep the problem understandable.

In building custom overlay I have to make these classes:

1. CircleMarkerView.java - The Custom Marker View
2. [CircleMarkerViewOptions.java] (https://github.com/spurdow/SimpleCircleView/blob/master/app/src/main/java/com/spurdow/circleviewtest/CircleMarkerViewOptions.java) - This is to be used with CircleMarkerView
3. SimpleCircleView.java - This is my custom view for dynamic circle changing its radius etc.
4. MainActivityMapBox - This is where to put it all

This is an example of the code in the repo.

Does anybody have any idea how to do this simply? Or Is there another way of building an overlay dynamically? Or Is it possible to create a circle bitmap dynamically and convert it to icon when seekbar's progress is changing?

Answer 1

1. The map touch event is unresponsive once my CircleOverlay is displayed in map
This is an issue we plan to address by next release, you can follow progress on this here.

2. The marker doesnt stay in its coordinates once i zoom-in , zoom-out.
The could be because you aren't anchoring the marker icon correctly using .setAnchor() or your icon has padding around it. For a circle, you'll want to anchor centered (using 0.5f). A bug was introduced right before the previous stable release that causes anchoring not to work correctly. If this is an issue, use the 4.2.0-SNAPSHOT.

3. Updating markers doesnt work, So I have to remove then add again the marker. Could you elaborate on this issue? You might be using

Marker marker = mapboxMap.addMarker(new MarkerViewOptions()...

When you should be using:

MarkerView marker = mapboxMap.addMarker(new MarkerViewOptions()...

Which will give you more options to update markers.

4. The color does not match the color that I set in marker.
Could you clarify what you mean by this?

It sounds like you are wanting to do what this example does in the testapp? I would follow along with the code found there.