How to create direction arrows for my polylines in android

Question

what i need to add for

PolylineOptions polyline = new PolylineOptions(); polyline.addAll(geom); polyline.color(defaultStrokeColor).width(defaultWidth); mapObjects.add(polyline); 

is this code for showing arrows?

Answer 1

I found a solution, it works for me

 PolylineOptions polyline = new PolylineOptions(); polyline.addAll(geom); polyline.color(defaultStrokeColor).width(defaultWidth); mapObjects.add(polyline); double lat1 = geom.get(0).latitude; double lng1 = geom.get(0).longitude; // destination double lat2 = geom.get(1).latitude; double lng2 = geom.get(1).longitude; //midpoint double lat = (lat1 + lat2)/2; double lng = (lng1 + lng2)/2; double dLon = (lng2-lng1); double y = Math.sin(dLon) * Math.cos(lat2); double x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon); double brng = Math.toDegrees((Math.atan2(y, x))); 

and now add a marker (bitmap arrow) at the end point

 MarkerOptions marker = new MarkerOptions().position(geom.get(0)); marker.anchor(0.5f, 0.5f); marker.icon(BitmapDescriptorFactory.fromBitmap(bstyle)); marker.rotation((float) brng); marker.flat(true); 

Answer 2

I saw other questions / answers about this that use markers and rotate them. But there is an easier way to have direction arrows on the GoogleMap Polyline.

The GoogleMap API v2 provides a convenient way to do this by adding the " endcap " icon to PolylineOptions. It takes your bitmap icon and rotates it in the direction of your polyline. Arrows do not need markers. And rotate the icon automatically. While the original arrow icon points up.

Honestly, I am surprised that there is no ArrowCap class. These classes exist: ButtCap , RoundCap , SquareCap , but not the ArrowCap class.

So, we need to break through it with our own arrow image. The only minor issue is that Polyline (and the next connected Polyline) uses the CENTER of the icon as the endpoint. Therefore, make sure that the icon of your butt is in the center of the image.

I made and uploaded a sample arrow image here: < >

Sorry that it is white and looks invisible, but it exists between <>, just drag it to the desktop.

I wanted to be able to change the color of the arrow programmatically, so I created this white PNG image and then used the color filter to overlay (MULTIPLY) the colors on it.

The icon is a white arrow pointing up with a dot in the CENTER of the image. The upper half of the image is empty (transparent). You want to use Image Asset Studio (or your favorite image tool) to create mipmap images for these resolutions: mdpi = 24x24, hdpi = 36x36, xhdpi = 48x48, xxhdpi = 72x72, xxxhdpi = 96x96.

Here is the code to create the final BitmapDescriptor file needed for Polyline / PolylineOptions ( R.mipmap.endcap is the image I included above):

 /** * Return a BitmapDescriptor of an arrow endcap icon for the passed color. * * @param context - a valid context object * @param color - the color to make the arrow icon * @return BitmapDescriptor - the new endcap icon */ public BitmapDescriptor getEndCapIcon(Context context, 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(context, R.mipmap.endcap); // set the bounds to the whole image (may not be necessary ...) drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); // overlay (multiply) your color over the white icon drawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY); // create a bitmap from the drawable android.graphics.Bitmap bitmap = android.graphics.Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); // render the bitmap on a blank canvas Canvas canvas = new Canvas(bitmap); drawable.draw(canvas); // create a BitmapDescriptor from the new bitmap return BitmapDescriptorFactory.fromBitmap(bitmap); } 

And here is the code for creating the Polyline with an arrow outline that points towards the Polyline:

 /** * Draw a GoogleMap Polyline with an endcap arrow between the 2 locations. * * @param context - a valid context object * @param googleMap - a valid googleMap object * @param fromLatLng - the starting position * @param toLatLng - the ending position * @return Polyline - the new Polyline object */ public Polyline drawPolylineWithArrowEndcap(Context context, GoogleMap googleMap, LatLng fromLatLng, LatLng toLatLng) { int arrowColor = Color.RED; // change this if you want another color (Color.BLUE) int lineColor = Color.RED; BitmapDescriptor endCapIcon = getEndCapIcon(context,arrowColor); // have googleMap create the line with the arrow endcap // NOTE: the API will rotate the arrow image in the direction of the line Polyline polyline = googleMap.addPolyline(new PolylineOptions() .geodesic(true) .color(lineColor) .width(8) .startCap(new RoundCap()) .endCap(new CustomCap(endCapIcon,8)) .jointType(JointType.ROUND) .add(fromLatLng, toLatLng); return polyline; }