Develop Reference

How to add shape on top of polylines in Google Maps Android SDK

I have an app containing code to draw polylines between the source and destination points using the Google Maps Android SDK and the Polyline and PolylineOptions classes.
My question is that how can I add a small shape - for example, an arrow pointing from the source to the destination, drawn on the top of the polyline - so that its direction and angle change by zooming and rotating the map UI, much like the standard arrows in popular navigation apps?
Any help would be appreciated.

Anyway, you can create MapView- or MapFragment-based custom view and draw whatever you want (like in this answer). In that case you need to draw polyline on custom view canvas directly, not via using Google Maps Polyline.
If you want to draw single arrow at the middle of the path segment you need:
determine direction using, for example, computeHeading() method of SphericalUtil class of Maps SDK for Android Utility Library;
determine middle of path segment, for example, via interpolate() method of SphericalUtil class:
LatLng middle = interpolate(from, to, 0.5);
If you want to draw small arrows along all polyline you can customize line styles via can use setPathEffect() method of Paint class. For this You should create path for "arrow stamp" (in pixels), which will repeated every "advance" (in pixels too) - totally like in this example for "diamond":
mPathDiamondStamp = new Path();
mPathDiamondStamp.moveTo(-DIAMOND_WIDTH / 2, 0);
mPathDiamondStamp.lineTo(0, DIAMOND_HEIGHT / 2);
mPathDiamondStamp.lineTo(DIAMOND_WIDTH / 2, 0);
mPathDiamondStamp.lineTo(0, -DIAMOND_HEIGHT / 2);
mPathDiamondStamp.close();
mPathDiamondStamp.moveTo(-DIAMOND_WIDTH / 2 + DIAMOND_BORDER_WIDTH, 0);
mPathDiamondStamp.lineTo(0, -DIAMOND_HEIGHT / 2 + DIAMOND_BORDER_WIDTH / 2);
mPathDiamondStamp.lineTo(DIAMOND_WIDTH / 2 - DIAMOND_BORDER_WIDTH, 0);
mPathDiamondStamp.lineTo(0, DIAMOND_HEIGHT / 2 - DIAMOND_BORDER_WIDTH / 2);
mPathDiamondStamp.close();
mPathDiamondStamp.setFillType(Path.FillType.EVEN_ODD);
mDiamondPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mDiamondPaint.setColor(Color.BLUE);
mDiamondPaint.setStrokeWidth(2);
mDiamondPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mDiamondPaint.setStyle(Paint.Style.STROKE);
mDiamondPaint.setPathEffect(new PathDashPathEffect(mPathDiamondStamp, DIAMOND_ADVANCE, DIAMOND_PHASE, PathDashPathEffect.Style.ROTATE));
In that case all work for "direction and angle change by zooming and rotating the map UI" processing Paint class do for you "from the box" - you just need to set the "stamp" pattern and intervals between stamps.
For converting LatLng coordinates into screen coordinates you can use toScreenLocation() of Projection class. So, make custom view based on MapView or SupportMapFragment and draw whatever you want with Canvas and Paint.
Here and there you can also find good examples of setPathEffect() usage.

Android Google map circle

I have a map with many markers for places. I want to draw an overlay around all map with a black transparent color, and a circle around those markers which is fully transparent to show them. Like the attached picture.
I know how to add an overlay view, but I don't know how to add the middle circle while keeping the overlay colored.
If I use Circle then only the circle is colored, and not rest of map.
I also tried to draw something like this but yea won't work ^^.
int d = 500; // diameter
Bitmap bm = Bitmap.createBitmap(d, d, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bm);
Paint p = new Paint();
p.setColor(getResources().getColor(R.color.colorAccent));
c.drawCircle(d / 2, d / 2, d / 2, p);
// generate BitmapDescriptor from circle Bitmap
BitmapDescriptor bmD = BitmapDescriptorFactory.fromBitmap(bm);
// mapView is the GoogleMap
googleMap.addGroundOverlay(new GroundOverlayOptions().
image(bmD).
position(latLng, RADIUS_CIRCLE * 2, RADIUS_CIRCLE * 2).
transparency(0.4f));
I am confused and not sure how to work it out. Any help will be appreciated. Thanks.

Please check Antonio's answer in the comments. I have tested that and works for me.
user1892172 answer but i didn't test it, but seems correct also.
Thanks.

OpenStreetMap add marker to Nutiteq MapView with custom Xfermode

I need to put some markers on top of a Nutiteq MapView. In order to create these markers I create a bitmap with a semi-transparent circle.
int size = (int)(30*mDisplayMetrics.density);
Bitmap androidMarkerBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
Paint paint = new Paint();
paint.setColor(Color.argb(150, 255, 0, 0));
Canvas canvas = new Canvas(androidMarkerBitmap);
canvas.drawCircle(size / 2, size / 2, size / 2, paint);
com.nutiteq.graphics.Bitmap markerBitmap = BitmapUtils.createBitmapFromAndroidBitmap(androidMarkerBitmap);
androidMarkerBitmap.recycle();
Each marker has the same bitmap. The problem is the transparency of the bitmap (as you can see alpha is not 0). When I add many markers all the bitmaps are simply ADDED one over the another... The problem is that I do not want the "add" effect for transparency, but instead I need to obtain the "darken" one.
(source: csdn.net)
Is there a way to change the default Xfermode used when mapView draws markers on it?

No, there is no such option in Nutiteq SDK. The effect you describe would require rendering markers to a separate surface (with 'darken' effect) and then layering the rendered surface (with markers) atop of other layers. Such functionality is pretty expensive and is not implemented in the SDK.

Android MapView marker shadows move after activity resumes

I have a MapView, with various markers on it. On entering the MapActivity the first time, I set the bounds of drawables set on the markers, and everything appears fine. The markers and shadows all appear correctly. But when I click over to another activity, and return, the shadows, or the markers are no longer bound correctly. Sometimes its only some of the markers that are affected. Can anyone tell me what is going on here? Here is some code. Below is where I set the bounds on the marker drawable:
InputStream is = assetManager.open(imageName);
drawable = Drawable.createFromStream(is, null);
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
drawable.setBounds(-width / 2, -height, width - (width / 2), 0);
And here is how I create/add the overlay item to the map:
GeoPoint point = createGeoPoint(lat, lon);
OverlayItem overlayItem = new OverlayItem(point, character.get_id(), "");
Drawable image = drawable;
overlayItem.setMarker(image);
itemizedOverlay.addOverlay(overlayItem);
From what I can tell, the overlays are not being re-added to the map, this is simply a redraw after an onResume() event. Any ideas?
Update: I've actually figured out, only images of the type tapped move, and its not the shadow, but the image that moves. So, of there are x images of type A, and y images of type B, and I tap on any image of type A, all images of type A are misaligned with their shadows when I return to the MapActivity, while all images of type B are still properly aligned.
Another update: I am outputting the bounds to the log, and see that the bounds are changing after returning to the map screen. When the marker is initially added, its bounds are:
[Rect(-25, -48 - 25, 1)]
But when returning to the map screen, the bounds have changed to:
[Rect(0, 0 - 50, 49)]
...why would this be?
Yet another update: I have a workaround... but I would still like an answer as to why this is happening. The workaround is to override the draw method, and set the bounds (to center bottom) whenever the draw method is called. Here is the code:
#Override
public void draw(Canvas canvas) {
int dWidth = getIntrinsicWidth();
int dHeight = getIntrinsicHeight();
setBounds(-dWidth / 2, -dHeight, dWidth / 2, 0);
super.draw(canvas);
}

I found out what the problem was. You can see from the code in the question, I am reading in BitmapDrawables from an InputStream. To reduce waste, I put all images created in a flyweight and reuse them when I can. That means, when I put 3 'sunshines' on the map, all three are based on the same image. In addition, when I place them on the map via an ItemizedOverlay, I am calling boundCenterBottom() so the shadow will display in the correct place.
When I open a different Activity, that Activity has an ImageView that I was populating with the same image. Turns out, that ImageView must have been resetting the bounds. I know this because, after overriding the draw() method, and setting the bounds on every draw, I was no longer able to see the images in the ImageViews. When I comment out the overridden draw() method, I am able to see the images in the ImageViews, but the images are shifted when I return to the map. This tells me that adding the image to the ImageView must be updating the bounds.
My solution is to create two distinct images for each image type; one for the map, and one for the ImageViews on the other Activities. I can still put them in the flyweight, but they have separate keys so multiple image instances can exist for the same image.
Hope this helps someone. I know there was another question of StackOverflow about this, but I can't find it to link to or to answer.

Android: How to to set imageView as a marker in google map API android?

till now i was using drawable to populate marker on my map .Now i was wondering it would be cool if i could display custom imageview as a marker in map.
till now i am doing it like
itemized= new Itemazide(drawable, mContext);
i want to achieve something like

I might be a bit late but I'll post a solution for others who have faced/are facing a similar issue. So basically what you have to do (at least for the solution you are seeking, i.e a custom image imposed on a box-like background) is impose the customImage on the background box with the help of a canvas. Using this implementation you can effectively create a BitmapDrawable from the canvas that you can then assign as a marker for your 'Overlay' / 'ItemizedOverlay'.
Also, please refrain from creating an ImageView for each overlay as this will utterly destroy your memory/ your app if you have to deal with thousands of such ImageViews simultaneously. Instead, use BitmapDrawables that can be assigned to the overlays during their construction and don't consume nearly enough memory as an ImageView.
public BitmapDrawable imageOnDrawable(int drawableBackground, Bitmap customImage)
{
//The following line is optional but I'd advise you to minimize the size of
//the size of the bitmap (using a thumbnail) in order to improve draw
//performance of the overlays (especially if you are creating a lot of overlays).
Bitmap customImageThumbnail = ThumbnailUtils.extractThumbnail(
customImage, 100, 100);
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId);
bm = Bitmap.createScaledBitmap(bm, 112, 120, false);
Canvas canvas = new Canvas(bm);
canvas.drawBitmap(bm, 0, 0, null);
// The 6,6 in the below line refer to the offset of the customImage/Thumbnail
// from the top-left corner of the background box (or whatever you want to use
// as your background)
canvas.drawBitmap(customImageThumbnail, 6, 6, null);
return new BitmapDrawable(bm);
}

Yeah I was wondering if I could do something like this, i.e. show a custom View instead of drawable. You can override draw() method, but unfortunately it always (someone please tell me I'm wrong) has to be drawable. I think it's because custom View would take too much memory.
That being said, depending on what you're trying to achieve it's probably possible to hack mapview-baloon library to achieve some similar effect.
EDIT:
Now that you've shown what you're trying to achieve I think you should override draw() in your OverlayItem and in this method inflate your ImageView. But I didn't try to do it this way, so there may be some drawbacks (I remember a SO thread on a similar matter that claimed, that it would interrupt all touch events on this OverlayItem).

In google mapv2, map-view ballon like functionality is provided by default.
Just, you have to write some lines for it :
private GoogleMap mapView;
if (mapView == null)
mapView = ((MapFragment) getFragmentManager().findFragmentById(
R.id.map_view)).getMap();
mapView.getUiSettings().setMyLocationButtonEnabled(false);
mapView.setMyLocationEnabled(true);
MarkerOptions markerDestinationOptions;
markerDestinationOptions = new MarkerOptions()
.position(latLngDestination) .icon(BitmapDescriptorFactory.fromResource(R.drawable.marker));
mapView.addMarker(markerDestinationOptions);