Google map change polyline strokeweight when zoom change

Question

How can change polyline strokeweight when zoom change like Uber

The Polyline width change when the camera zoom change

Answer 1

You can add listener to listen the onCameraIdle event. This event happens each time the camera finished movement. Inside this listener you can calculate a width of the line according to the camera zoom.

I've created a simple example that executes sample directions request to get a sample polyline and draws this polyline on map. The onCameraIdle listener recalculates the polyline width. Please have a look at sample code:

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback, GoogleMap.OnCameraIdleListener {

    private GoogleMap mMap;
    private Polyline mPoly;

    private String TAG = MapsActivity.class.getName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        LatLng pos = new LatLng(41.381087,2.176731);
        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(pos, 16));

        mMap.getUiSettings().setZoomControlsEnabled(true);

        //Get sample polyline and draw it
        List<LatLng> path = this.getSamplePoly();
        if (path.size() > 0) {
            PolylineOptions opts = new PolylineOptions().addAll(path).color(Color.BLUE).width(this.getLineWidth());
            mPoly = mMap.addPolyline(opts);
        }

        //Set listener for camera idle event
        mMap.setOnCameraIdleListener(this);
    }

    @Override
    public void onCameraIdle() {
        mPoly.setWidth(this.getLineWidth());
    }

    //Defines a width of polyline as some function of zoom
    private int getLineWidth() {
        float zoom = mMap.getCameraPosition().zoom;
        float a = (zoom-12>0 ? (zoom-12)*(zoom-12) : 1);
        return Math.round(a);
    }

    //Executes directions request to get sample polyline
    private List<LatLng> getSamplePoly () {
        List<LatLng> path = new ArrayList();

        GeoApiContext context = new GeoApiContext.Builder()
                .apiKey("YOUR_API_KEY")
                .build();

        DirectionsApiRequest req = DirectionsApi.getDirections(context, "41.381624,2.176058", "41.380503,2.177116");
        try {
            DirectionsResult res = req.await();

            //Loop through legs and steps to get encoded polylines of each step
            if (res.routes != null && res.routes.length > 0) {
                DirectionsRoute route = res.routes[0];

                if (route.legs !=null) {
                    for(int i=0; i<route.legs.length; i++) {
                        DirectionsLeg leg = route.legs[i];
                        if (leg.steps != null) {
                            for (int j=0; j<leg.steps.length;j++){
                                DirectionsStep step = leg.steps[j];
                                if (step.steps != null && step.steps.length >0) {
                                    for (int k=0; k<step.steps.length;k++){
                                        DirectionsStep step1 = step.steps[k];
                                        EncodedPolyline points1 = step1.polyline;
                                        if (points1 != null) {
                                            //Decode polyline and add points to list of route coordinates
                                            List<com.google.maps.model.LatLng> coords1 = points1.decodePath();
                                            for (com.google.maps.model.LatLng coord1 : coords1) {
                                                path.add(new LatLng(coord1.lat, coord1.lng));
                                            }
                                        }
                                    }
                                } else {
                                    EncodedPolyline points = step.polyline;
                                    if (points != null) {
                                        //Decode polyline and add points to list of route coordinates
                                        List<com.google.maps.model.LatLng> coords = points.decodePath();
                                        for (com.google.maps.model.LatLng coord : coords) {
                                            path.add(new LatLng(coord.lat, coord.lng));
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        } catch(Exception ex) {
            Log.e(TAG, ex.getLocalizedMessage());
        }

        return path;
    }
}

You can download this example from the github repository:

https://github.com/xomena-so/so45566330

Don't forget replace API keys with yours.

I hope this helps!