Search code examples
androidgoogle-mapsgoogle-polyline

Align Polyline to Edge of Road in Android Google Maps


I saw this in the web image So I confirmed that it is possible to have 2 fill in 2 different polylines in one path in Google Maps.

To experiment this, I tried to add only one polyline at first using this code:

public static void drawEncodedPolyOnMap(String encoded, GoogleMap map) {
    List<LatLng> points = new ArrayList<>();
    int index = 0, len = encoded.length();
    int lat = 0, lng = 0;
    while (index < len) {
        int b, shift = 0, result = 0;
        do {
            b = encoded.charAt(index++) - 63;
            result |= (b & 0x1f) << shift;
            shift += 5;
        } while (b >= 0x20);
        int dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
        lat += dlat;
        shift = 0;
        result = 0;
        do {
            b = encoded.charAt(index++) - 63;
            result |= (b & 0x1f) << shift;
            shift += 5;
        } while (b >= 0x20);
        int dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
        lng += dlng;
        LatLng p = new LatLng((((double) lat / 1E5)),
            (((double) lng / 1E5)));
        points.add(p);
    }

    map.addPolyline(new PolylineOptions().width(7).color(Color.RED).geodesic(true).addAll(points));
}

But it is not giving me the display that I expected

enter image description here

Basically in my case, polylines get center-aligned even though the markers are at the edge of the road, the case I don't like to happen.

Is it possible to align the polyline with the markers in Android? How?


Solution

  • It seems no one is answering and I just found out a way on how to do it.

    Basically, I just updated my drawEncodedPolyOnMap to add paddings to the original LatLng returned by the bit shifting. So here goes the code below

    public static void drawEncodedPolyOnMap(String encoded, GoogleMap map, boolean type) {
        List<LatLng> points = new ArrayList<>();
        int index = 0, len = encoded.length();
        int lat = 0, lng = 0;
        while (index < len) {
            int b, shift = 0, result = 0;
            do {
                b = encoded.charAt(index++) - 63;
                result |= (b & 0x1f) << shift;
                shift += 5;
            } while (b >= 0x20);
            int dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
            lat += dlat;
            shift = 0;
            result = 0;
            do {
                b = encoded.charAt(index++) - 63;
                result |= (b & 0x1f) << shift;
                shift += 5;
            } while (b >= 0x20);
            int dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
            lng += dlng;
            double newLat = (((double) lat / 1E5));
            double newLng = (((double) lng / 1E5));
    
            if(type){
                points.add(new LatLng(newLat+PADDING_LAT, newLng+PADDING_LNG));
            }else{
                points.add(new LatLng(newLat-PADDING_LAT, newLng-PADDING_LNG));
            }
        }
    
        map.addPolyline(new PolylineOptions().width(7).color((type)?Color.RED:Color.GREEN).geodesic(true).addAll(points));
    }
    

    And that's it. Problem solved.