How to add a polyline overlay to a static image in Mapbox?

Question

I'm trying to save a map with a route as a static image. I'm currently able to save the map as a static map with some annotations as overlay, but I'm unable to figure out how to add the route to the static map.

This is the code I currently have:

List<StaticMarkerAnnotation> markers = new ArrayList<>();
List<StaticPolylineAnnotation> polylines = new ArrayList<>();

markers.add(StaticMarkerAnnotation.builder().name(StaticMapCriteria.LARGE_PIN)
             .lnglat(Point.fromLngLat(pointList.getFirst().longitude(), pointList.getFirst().latitude()))
             .label("a")
             .build());

markers.add(StaticMarkerAnnotation.builder().name(StaticMapCriteria.LARGE_PIN)
             .lnglat(Point.fromLngLat(pointList.getLast().longitude(),pointList.getLast().latitude()))
             .label("b")
             .build());

polylines.add(StaticPolylineAnnotation.builder().polyline(currentRoute.geometry()).build()); // DirectionsRoute currentRoute

String staticImage = MapboxStaticMap.builder()
             .accessToken(getString(R.string.mapbox_access_token))
             .width(mapView.getMeasuredWidth())
             .height((int) (250*getResources().getDisplayMetrics().density))
             .retina(true)
             .cameraAuto(true)
             .staticMarkerAnnotations(markers)
             .staticPolylineAnnotations(polylines) // does not work!
             .build()
             .url()
             .toString();

Without the .staticPolylineAnnotations(polylines) it creates successfully creates a static image (without route). With the .staticPolylineAnnotations(polylines), the created staticImage string results in {"message":"Latitude must be between -85.0511-85.0511."}.

I guess I'm passing my currentRoute incorrectly, but I don't know the right way.

Answer 1

For getting the Route image in Android First add your all Lat and Long into a List and after that convert your complete list of lat and long into encoded poly line string with the help of Google Poly line Encoding techniques.

-> After that create Map box account and use static image API of map box with valid token

-> Now use StaticPolylineAnnotation:

List{StaticPolylineAnnotation} list1 = new ArrayList<>(); (Replace {} with <>) list.add(StaticPolylineAnnotation.builder().polyline(polilineString).strokeWidth(1.0).strokeColor(56, 69, 181).build()); Note: PolilineString is your encoded string got from Google Poly line Encoding techniques

-> MapboxStaticMap staticImage = MapboxStaticMap.builder().user("mapboxaccountusename") .accessToken("Mapbox Token") .styleId("Your Style id") .staticPolylineAnnotations(list1) .cameraAuto(true) .retina(true) .build();

->get url of image using String imageUrl = staticImage.url().toString();

Answer 2

This error message {"message": "Latitude must be between -85.0511-85.0511."} usually appears when you have the latitude and longitude in a reversed order. It worth testing your coordinates in the Mapbox direction API playground to validate it before adding them to your implementation.

You could also explore using the MapSnapshotter for Android to save your map with a route.