Polyline stroke rounded first and last edge

[Snowbases]

I'm submitting a ... (check one with "x")

• [x] question
• [ ] any problem or bug report

OS: (check one with "x")

• [x] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-email-composer 0.9.2 "EmailComposer"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-nativegeocoder 3.4.1 "NativeGeocoder"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-x-socialsharing 5.6.8 "SocialSharing"
cordova-sqlite-storage 5.0.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
ionic-plugin-deeplinks 1.0.20 "Ionic Deeplink Plugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^5.22.0-beta-1",
"@ionic-native/google-maps": "^5.27.0-beta-20200630",

Current behavior:

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

// This only data
location_data = {
    pickup_location: {
        long_address: '',
        short_address: '',
        place_id: '',
        latitude: '',
        longitude: ''
    },
    destination_location: {
        long_address: '',
        short_address: '',
        place_id: '',
        latitude: '',
        longitude: ''
    }
}

// This method 
calculateAndDisplayRoute() {
    console.log('calculateAndDisplayRoute', this.location_data);

    let origin = new google.maps.LatLng(
        parseFloat(this.location_data.pickup_location.latitude),
        parseFloat(this.location_data.pickup_location.longitude)
    );

    let destination = new google.maps.LatLng(
        parseFloat(this.location_data.destination_location.latitude),
        parseFloat(this.location_data.destination_location.longitude)
    );

    console.log('origin', origin, 'destination', destination);

    this.directionsService.route({
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    }, async (response, status) => {
        console.log(response, status);

        // google.maps.DirectionsStatus.OK = OK
        if (status === 'OK') {
            console.log('OK status');
            this.map.clear();

            // decode overview_polyline from direction services.
            let decodedPoints = Encoding.decodePath(response.routes[0].overview_polyline);

            let markerOptionsPickup: MarkerOptions = {
                position: decodedPoints[0], // Use first decodePoints
                icon: {
                    url: "https://i.ibb.co/QFhH4Yd/ezgif-com-gif-maker-3.png",
                    size: {
                        width: 32,
                        height: 42
                    }
                },
                zIndex: 99999999999,
                disableAutoPan: true
            }

            let markerOptionsDropOff: MarkerOptions = {
                position: decodedPoints[decodedPoints.length - 1], // // Use last decodePoints
                icon: {
                    url: "https://i.ibb.co/6sgGrW6/ezgif-com-gif-maker-4.png",
                    size: {
                        width: 32,
                        height: 42
                    }
                },
                zIndex: 99999999999,
                disableAutoPan: true
            }

            // Add markers
            let markerPickup: Marker = this.map.addMarkerSync(markerOptionsPickup);
            console.log('markerPickup sync', markerPickup);

            let markerDropOff: Marker = this.map.addMarkerSync(markerOptionsDropOff);
            console.log('markerDropOff sync', markerDropOff);

            // Add two polyline, but each have different width (the purpose just to get the stroke color as in image)
            this.map.addPolyline({
                points: decodedPoints,
                color: 'rgba(3, 183, 83, 1)',
                width: 6, 
                geodesic: true,
                clickable: false,
                zIndex: 3
            });

            this.map.addPolyline({
                points: decodedPoints,
                color: 'rgba(17, 129, 53, 1)',
                width: 8,
                geodesic: true,
                clickable: false,
                zIndex: 2
            });

            // Trying to add circle to cover the last edge but not success since its follow the radius
            const originCircle = this.map.addCircle({
                center: decodedPoints[0],
                radius: 10,
                strokeColor: 'rgba(17, 129, 53, 1)',
                strokeWidth: 1,
                fillColor: 'rgba(3, 183, 83, 1)',
                clickable: false,
                zIndex: 10
            });

            const destinationCircle = this.map.addCircle({
                center: decodedPoints[decodedPoints.length - 1],
                radius: 10,
                strokeColor: 'rgba(17, 129, 53, 1)',
                strokeWidth: 1,
                fillColor: 'rgba(3, 183, 83, 1)',
                clickable: false,
                zIndex: 10
            });

            console.log('decodedPoints', decodedPoints);

        } else if (status === 'ZERO_RESULTS') {

        } else if (status === 'NOT_FOUND') {

        } else if (status === 'INVALID_REQUEST') {

        } else {
            console.log('Directions request failed due to', status);

        }
    });
}

Support this plugin activity

I appreicate if you give me a beer :beer: from here

Explaination

The current issue is polyline doesn't have rounded edge,

in the attached code,, I have use a circle with a radius to cover the edge but its not follow the polyline size.

is there any method to get a rounded polyline edge?

[wf9a5m75]

There is no such a feature

[Snowbases]

@wf9a5m75 Just workaround on this

polylineOptions.startCap(new RoundCap());
polylineOptions.endCap(new RoundCap());
polylineOptions.jointType(JointType.ROUND);

Ref:

https://developers.google.com/android/reference/com/google/android/gms/maps/model/RoundCap https://developers.google.com/android/reference/com/google/android/gms/maps/model/SquareCap https://developers.google.com/android/reference/com/google/android/gms/maps/model/ButtCap

[wf9a5m75]

Please send a pull request :)

By the way, please include the code for Android, iOS and browser

[thurasw]

Any update on this feature?

[wf9a5m75]

This plugin just draws the specified data. You need to create such a draw path by yourself

[thurasw]

I meant the startCap, endCap, and the jointType for the polyline options, since they don't seem to exist in this plugin yet. Or am I missing something here?

[wf9a5m75]

I mean this plugin provides only the features to draw on a map. You need to prepare the data your necessary by your self.

The markers start point and end point are also.