Google Maps: How to draw arrows in the middle of each PolylineOptions rect?

Question

I'm displaying a route using PolylineOptions for drawing rects from one POI to the next POI.

Also in each POI I'm drawing a circle.

The objective is to draw an arrow in the middle of each PolylineOptions rect. This arrow will represent the direction of the route. The problem is that I can't find how to do this.

This is my code:

    PolylineOptions rectOptions = new PolylineOptions();
    float[] prevHSV = new float[3];
    Color.colorToHSV(getResources().getColor(R.color.colorPrimary), prevHSV);
    rectOptions.color(Color.HSVToColor(255, prevHSV));

    String[][] routeInformation = ((MyApplication)getApplication()).getLineInformation(line);
    ArrayList<Double[]> routeStops = Util.getFullRouteFromLine(this, line);
    final LatLngBounds.Builder builder = new LatLngBounds.Builder();

    for (int i=0; i<routeInformation.length; i++){
        LatLng latlng = new LatLng(Double.parseDouble(routeInformation[i][0]),Double.parseDouble(routeInformation[i][1]));
        builder.include(latlng);
        mMap.addCircle(new CircleOptions().center(latlng).radius(15).strokeColor(Color.HSVToColor(255, prevHSV)).fillColor(Color.HSVToColor(255, prevHSV)).zIndex(7777));            
    }

    for (Double[] pos : routeStops){
        rectOptions.add(new LatLng(pos[0],pos[1])).width(5);
    }
    mMap.addPolyline(rectOptions);

Andrii Omelchenko · Answer 1 · 2018-12-07T11:25:28.857

Easiest way is to use marker with north-oriented (it's important due rotation angle of marker starts from North) arrow (like this marker ) - place it in middle of current polyline segment, rotate it according direction and set its property anchor() property to (0.5,0.5) and flat to true. Something like that:

 ...
 // place first point of route (direction can't be calculated for it)
 LatLng prevLatLng = new LatLng(Double.parseDouble(routeInformation[0][0]),Double.parseDouble(routeInformation[0][1]));
 builder.include(prevLatLng);
 mMap.addCircle(new CircleOptions().center(prevLatLng).radius(15).strokeColor(Color.HSVToColor(255, prevHSV)).fillColor(Color.HSVToColor(255, prevHSV)).zIndex(7777));       

 // place other points
 for (int i=1; i<routeInformation.length; i++){
    LatLng latlng = new LatLng(Double.parseDouble(routeInformation[i][0]),Double.parseDouble(routeInformation[i][1]));
    builder.include(latlng);
    mMap.addCircle(new CircleOptions().center(latlng).radius(15).strokeColor(Color.HSVToColor(255, prevHSV)).fillColor(Color.HSVToColor(255, prevHSV)).zIndex(7777));

    // determine middle of segment
    LatLng middleLatLng = getMiddlePoint(prevLatLng, latlng);

    // determine direction
    float direction = bearingBetweenLocations(prevLatLng, latlng);

    // add marker with arrow      
    mMap.addMarker(new MarkerOptions()
    .position(middleLatLng)
    .anchor(0.5,0.5)
    .rotation(direction)
    .flat(true));       

    // move previous position to current
    prevLatLng = latlng;
}
...

Middle point of polyline segment can be found lice center of bounds:

private LatLng getMiddlePoint(LatLng latlng1, LatLng latlng2) {
    LatLngBounds.Builder builder = new LatLngBounds.Builder();
    builder.include(latlng1);
    builder.include(latlng2);  
    LatLngBounds bounds = builder.build();
    return bounds.getCenter();
}

or with SphericalUtil.interpolate(LatLng from, LatLng to, double fraction) from Google Maps Android API Utility Library:

LatLng middleLatLng = SphericalUtil.interpolate(prevLatLng, latlng, 0.5);

And direction can be determined on two neighboring route points like in this answer of satti8893:

private double bearingBetweenLocations(LatLng latLng1,LatLng latLng2) {

    double PI = 3.14159;
    double lat1 = latLng1.latitude * PI / 180;
    double long1 = latLng1.longitude * PI / 180;
    double lat2 = latLng2.latitude * PI / 180;
    double long2 = latLng2.longitude * PI / 180;

    double dLon = (long2 - long1);

    double y = Math.sin(dLon) * Math.cos(lat2);
    double x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1)
            * Math.cos(lat2) * Math.cos(dLon);

    double brng = Math.atan2(y, x);

    brng = Math.toDegrees(brng);
    brng = (brng + 360) % 360;

    return brng;
}

NB! This is not full code, just an idea.

Also take a look at this question of Scorpion.

Other way is create MapView-based custom view and draw whole path with lines circles and and arrows manually in overrided dispatchDraw().

Google Maps: How to draw arrows in the middle of each PolylineOptions rect?

1 Answers1