How to draw Uber polyline?

Question

Uber app has a polyline that is curved, and even includes a shadow. The shadow may be just a black with transparent polyline connecting two points. That is easy. But the second polyline with curve, how to accomplish this? Is this a Bezier curve, or a built in function like setGeodesic(true)?

I have looked through the google maps examples and I see a section about circle polylines. Can this be adapted to create semi circles? Code snippet from demo.

PolylineOptions options = new PolylineOptions();
int radius = 5; //What is that?
int numPoints = 100;
double phase = 2 * Math.PI / numPoints;
for (int i = 0; i <= numPoints; i++) {
    options.add(new LatLng(SYDNEY.latitude + radius * Math.sin(i * phase),
            SYDNEY.longitude + radius * Math.cos(i * phase)));
}
int color = Color.RED;
mMap.addPolyline(options
        .color(color)
        .width(2));

Similar question http://stackoverflow.com/questions/43305664/can-i-draw-a-curved-dashed-line-in-google-maps-android. You can find answer there. — xomena, Apr 27 '17 at 21:07
The curve isn't so smooth in that algorithm. I created an updated one that is more smooth. — portfoliobuilder, Apr 27 '17 at 22:33
iOS Solution Link: https://stackoverflow.com/a/53569754/6593774 — Rouny, Dec 01 '18 at 10:13
You can see my answer [here](https://stackoverflow.com/questions/43305664/can-i-draw-a-curved-dashed-line-in-google-maps-android/63078781#63078781), might be helpful for you. — Amir Raza, Jul 24 '20 at 17:44

score 15 · Accepted Answer · answered Apr 27 '17 at 22:32

15

I was able to achieve this with the following bezier curve calculation

    double cLat = ((start.latitude + end.latitude) / 2);
    double cLon = ((start.longitude + end.longitude) / 2);

    //add skew and arcHeight to move the midPoint
    if(Math.abs(start.longitude - end.longitude) < 0.0001){
        cLon -= 0.0195;
    } else {
        cLat += 0.0195;
    }

    double tDelta = 1.0/50;
    for (double t = 0;  t <= 1.0; t+=tDelta) {
        double oneMinusT = (1.0-t);
        double t2 = Math.pow(t, 2);
        double lon = oneMinusT * oneMinusT * start.longitude
                + 2 * oneMinusT * t * cLon
                + t2 * end.longitude;
        double lat = oneMinusT * oneMinusT * start.latitude
                + 2 * oneMinusT * t * cLat
                + t2 * end.latitude;
        alLatLng.add(new LatLng(lat, lon));
    }

    // draw polyline
    PolylineOptions line = new PolylineOptions();
    line.width(POLYGON_STROKE_WIDTH_PX);
    line.color(Color.RED);
    line.addAll(alLatLng);
    map.addPolyline(line);

answered Apr 27 '17 at 22:32

portfoliobuilder

7,556
14
76
136

how can i provide dark to light color on the single curve line? – Ashim Kansal Aug 14 '17 at 05:14
@AshimKansal this is possible. But you should poise the question on SO. If I see it, I will give you an answer. I figured that one out too. Although it is very complicated. As a warning, be careful asking questions. As you can see, people minus voted mine for no reason. Makes you not want to ask any questions any more. – portfoliobuilder Aug 16 '17 at 22:28
what is the type of alLatLng variable – Usman Jdn Oct 16 '20 at 11:01
1

@UsmanJdn ArrayList of Google LatLng objects – portfoliobuilder Jan 28 '21 at 21:39

score 3 · Answer 2 · answered Jan 21 '21 at 10:48

 private fun plotPolyline(
    startLat: Double?,
    startLon: Double?,
    markerLat: Double?,
    markerLon: Double?
) {
    if (startLat == null || startLon == null || markerLat == null || markerLon == null) {
        return
    }
    var startPoint = LatLng(startLat, startLon)
    var endPoint = LatLng(markerLat, markerLon)
    val distance = SphericalUtil.computeDistanceBetween(startPoint, endPoint)
    val midPoint = SphericalUtil.interpolate(startPoint, endPoint, 0.5)
    val midToStartLocHeading = SphericalUtil.computeHeading(midPoint, startPoint)
    val controlPointAngle = 360.0 - (90.0 - midToStartLocHeading)
    val controlPoint = SphericalUtil.computeOffset(midPoint, distance / 2.0, controlPointAngle)
    var t = 0.0
    val polylineOptions = PolylineOptions()

    while (t <= 1.00) {
        val oneMinusT = 1.0 - t
        val lon: Double =
            oneMinusT * oneMinusT * startLon + 2 * oneMinusT * t * controlPoint.longitude + t * t * markerLon
        val lat: Double =
            oneMinusT * oneMinusT * startLat + 2 * oneMinusT * t * controlPoint.latitude + t * t * markerLat
        polylineOptions.add(LatLng(lat, lon))
        t += 0.05
    }

    polylineOptions.add(endPoint)

    // Draw polyline
    polyline?.remove()
    var pattern = listOf<PatternItem>(Gap(10.0f), Dash(10.0f))
    polyline = googleMap?.addPolyline(
        polylineOptions.width(10f).pattern(pattern)
            .geodesic(false)
    )
}

How to draw Uber polyline?

2 Answers2

Linked