Example of Drawing Directions for Driving, Bicycling and Walking - Maps Kit - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
This article covers to draw polylines for different directions types like, Driving, Bicycling and Walking. To get directions response, use OkHttpClient, Volley and Retrofit libraries.
In this article, used Retrofit library to get the response. Check the below code
Code:
private void callDirectionsApi(final String directionType) {
if (!NetworkUtil.isNetworkConnected(this)) {
showNetworkDialog();
return;
}
Origin origin = new Origin();
origin.setLat(13.242430); // Current Location Latitude
origin.setLng(79.277502); // Current Location Longitude
Destination destination = new Destination();
destination.setLat(destinationLocation.getLat());
destination.setLng(destinationLocation.getLng());
DirectionsRequest request = new DirectionsRequest();
request.setOrigin(origin);
request.setDestination(destination);
ApiInterface apiInterface = ApiClient.getClient().create(ApiInterface.class);
Call<DirectionsResponse> call = apiInterface.getDirections(directionType, request);
call.enqueue(new Callback<DirectionsResponse>() {
@Override
public void onResponse(@NotNull Call<DirectionsResponse> call, @NotNull Response<DirectionsResponse> response) {
if (response.isSuccessful()) {
startEndMarkerList = new ArrayList<>();
DirectionsResponse directionsResponse = response.body();
assert directionsResponse != null;
Log.e(TAG + " Response", directionsResponse.toString());
List<RoutesItem> routesItemList = directionsResponse.getRoutes();
if (routesItemList.size() > 0) {
List<StepsItem> steps = routesItemList.get(0).getPaths().get(0).getSteps();
lineLatLngList = new ArrayList<>();
for (StepsItem stepItem : steps) {
List<PolylineItem> polylineItems = stepItem.getPolyline();
for (PolylineItem polylineItem : polylineItems) {
LatLng latLng = new LatLng(polylineItem.getLat(), polylineItem.getLng());
lineLatLngList.add(latLng);
}
}
Iterable<LatLng> latLngIterable = lineLatLngList;
PolylineOptions polyOptions = new PolylineOptions();
if (directionType == "bicycling") {
polyOptions .width(3);
} else if (directionType == "driving") {
polyOptions .width(5);
} else {
List<PatternItem> pattern = Arrays.asList(new Dot(), new Gap(70));
polyOptions .pattern(pattern);
polyOptions .width(7);
}
polyOptions .color(Color.RED);
polyOptions .jointType(ROUND);
directionsPolyline= huaweiMap.addPolyline(polyOptions );
LatLngBounds.Builder builder = new LatLngBounds.Builder();
for (LatLng latLng : latLngIterable) {
builder.include(latLng);
}
LatLngBounds bounds = builder.build();
CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, 50);
huaweiMap.animateCamera(cameraUpdate);
}
addPolylineCap(lineLatLngList.get(0), R.drawable.grey_circle);
addPolylineCap(lineLatLngList.get(lineLatLngList.size() - 1), R.drawable.white_circle);
addMarkerToMap(destinationLocation, false, destinationName);
animatePolyLine();
}
}
@Override
public void onFailure
(@NotNull Call<DirectionsResponse> call, @NotNull Throwable t) {
Log.e(TAG + " Response Error", Objects.requireNonNull(t.getMessage()));
}
});
}
Dotted and Dashed Polyline:
To draw Dotted and Dashed polyline, following are three classes:
1. Dot
2. Dash
3. Gap
Here based upon directionType changed the width of polyline and for walking path added pattern with new Dot() and new Gap(70) classes.
If we use new Dash() instead of new Dot() we will get dashed polyline.
Code:
if (directionType == "bicycling") {
polyOptions .width(3);
} else if (directionType == "driving") {
polyOptions .width(6);
} else {
List<PatternItem> pattern = Arrays.asList(new Dot(), new Gap(70));
polyOptions .pattern(pattern);
polyOptions .width(10);
}
Polyline Caps:
To add start and end caps for polyline, check the below code.
Code:
addPolylineCap(lineLatLngList.get(0), R.drawable.grey_circle);
addPolylineCap(lineLatLngList.get(lineLatLngList.size() - 1), R.drawable.white_circle);
Instead of adding markers like this, Use default classes for adding caps to polyline, as follows.
1. RoundCap
2. Square Cap
To add this caps to polyline. Check the below code.
Code:
polyOptions.startCap(new RoundCap());
polyOptions.endCap(new CustomCap(getEndCapIcon(Color.BLACK), 100));
Here we can set new RoundCap() and new SquareCap() and also we can give custom cap. Check the below code for adding custom cap.
Code:
public BitmapDescriptor getEndCapIcon(int color) {
// mipmap icon - white arrow, pointing up, with point at center of image
// you will want to create: mdpi=24x24, hdpi=36x36, xhdpi=48x48, xxhdpi=72x72, xxxhdpi=96x96
Drawable drawable = ContextCompat.getDrawable(this, R.mipmap.arrow);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
drawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
android.graphics.Bitmap bitmap = android.graphics.Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.draw(canvas);
return BitmapDescriptorFactory.fromBitmap(bitmap);
}
Code:
addMarkerToMap(destinationLocation, false, destinationName);
To add custom marker to map. Check my previous article.
Article Link: To customize Maps with Custom Marker and Custom Info Window - Maps Kit
To Animate Polyline like Uber and Swiggy
To animate polylines, Use ValueAnimator to achieve easily. Check the below code.
Code:
private void animatePolyLine() {
ValueAnimator animator = ValueAnimator.ofInt(0, 100);
animator.setDuration(2000);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animator) {
List<LatLng> latLngList = directionsPolyline.getPoints();
int initialPointSize = latLngList.size();
int animatedValue = (int) animator.getAnimatedValue();
int newPoints = (animatedValue * lineLatLngList.size()) / 100;
if (initialPointSize < newPoints) {
latLngList.addAll(lineLatLngList.subList(initialPointSize, newPoints));
directionsPolyline.setPoints(latLngList);
}
}
});
animator.addListener(polyLineAnimationListener);
animator.start();
}
Using AnimatorListener, we can do much more based upon our requirements. Check the below code.
Code:
Animator.AnimatorListener polyLineAnimationListener = new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
if (selectedMarker != null) {
selectedMarker.showInfoWindow();
}
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
};
Find the output in below image
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Conclusion :
In this articles covers some of the functionalities of Directions. There are lot of concepts are there just try it
Reference links
Driving Direction API:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-References-V5/directions-driving-0000001050161496-V5
Walking Directions API:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-References-V5/directions-walking-0000001050161494-V5
BiCycling Directions API:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-References-V5/directions-bicycling-0000001050163449-V5

---

will it support available shortest path from origin to destination?