Dotted circle route path like google map

Question

I want a Map UI like above dotted circle route path .I searched a lot through web and stack overflow i cant find any source.

I tried

addCircle polyline but the circle is large when i zoom the camera to an extend in google map
I don't know how google map implemented it either with marker or polyline

Provided help is appreciated rather than downvotes!!

thanks :-)

Take a look at my project here https://github.com/antoniocarlon/richmaps — antonio, Jan 05 '17 at 09:38
map.addCircle(CircleOptions) or add overlayView to draw dished line using override onDraw on draw line with Paint.setPathEffect(new DashPathEffect(new float[] {10,20}, 0)); — Qamar, Jan 05 '17 at 09:46
@Qamar could you send me the link or sample for canvas overlay view .I used addCircle UI is not good but while searching on web i came to know about overlay but i can't find a sample or link for it .thanks — prasanthMurugan, Jan 05 '17 at 09:53
addCircle does not look good if i zoom my map the circle get even bigger — prasanthMurugan, Jan 05 '17 at 09:54
You can extend `MapView` and override onDraw to draw stuff over map. Draw your stuff after super.onDraw. Just push too find solution. check out if this help you. — Qamar, Jan 05 '17 at 10:19

score 2 · Answer 1 · answered Mar 12 '18 at 17:44

You can use Stroke Patterns for polylines like this:

@Override
public void onMapReady(GoogleMap googleMap) {
    List<LatLng> sourcePoints = new ArrayList<>();
    sourcePoints.add(new LatLng(22.724526, 75.825979));
    sourcePoints.add(new LatLng(22.720165, 75.905953));
    sourcePoints.add(new LatLng(22.766649, 76.075773));
    sourcePoints.add(new LatLng(22.862032, 76.098302));

    PolylineOptions polyLineOptions = new PolylineOptions();
    polyLineOptions.addAll(sourcePoints);
    polyLineOptions.width(50f);
    polyLineOptions.color(Color.rgb(0, 178, 255));
    Polyline polyline = googleMap.addPolyline(polyLineOptions);

    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dot(), new Gap(10f));
    polyline.setPattern(pattern);

    CameraPosition cameraPosition = new CameraPosition.Builder()
            .target(sourcePoints.get(2))
            .zoom(14)                   
            .build();
googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

}

to get result like that:

Unfortunately it's impossible to draw bigger circles under smaller to achieve "bordered" circles path because of nonlinear dependency between Dot() and Gap() sizes.

Or you can draw whatever you want on MapVew canvas via overriding dispatchDraw() of MapView like in this answer (it's about MapBox MapView, but approach is applicable for Google Maps MapView too).

score 0 · Answer 2 · answered Jan 05 '17 at 09:41

0

I think its overkill, but you can use some of Google APIs from https://console.developers.google.com/apis/library

and get path and make from them set of LatLngs, then draw them on googleMap just like normal marker, but with small round circle as icon.

To be honest, I am not sure what you want to achieve, I think simpler idea is to use origin and destination and open it in GoogleMaps Android App - do not reinvent the wheel.

answered Jan 05 '17 at 09:41

Lukas

1,216
12
25

i used the api and i have all the point i need to draw on google map – prasanthMurugan Jan 05 '17 at 09:43
only thing is i want my UI to look like above pic i dont know whether google used maker or polyline to achieve this view – prasanthMurugan Jan 05 '17 at 09:44
you can "make" additional latlngs between each 2 points for example points (x1,y1) and (x2,y2) you can draw 'dotted' marker at coordinates ([x1+x2]/2, [y1+y2]/2) and so on. – Lukas Jan 05 '17 at 09:45
i have all my point like you said the intermediate ([x1+x2]/2, [y1+y2]/2) point .My problem is if you gone throw google map direction dotted route i want to know if they used marker to represent the point or polyline to represent the points – prasanthMurugan Jan 05 '17 at 09:50

Dotted circle route path like google map

2 Answers2