I am trying to replicate this feature of Maps in Android:
You can see that on the map, there's a Circle depicting the range that the user has selected.
In my application, I'll also want a dragger to reside on the perimeter of the circle, which can be dragged to redefine radius.
If someone could tell me how to draw custom drawable overlays and 2D graphics over map, I can do other things on my own.
Thanks!
The full application can be reached at this link
Okay, I tried to do things on my Own, and put this code to get the above effect:
public class MarkerOverlay extends Overlay {
Geocoder geoCoder = null;
public MarkerOverlay() {
super();
}
#Override
public boolean onTap(GeoPoint geoPoint, MapView mapView){
selectedLatitude = geoPoint.getLatitudeE6();
selectedLongitude = geoPoint.getLongitudeE6();
return super.onTap(geoPoint,mapView);
}
#Override
public void draw(Canvas canvas, MapView mapV, boolean shadow){
if(shadow){
Projection projection = mapV.getProjection();
Point pt = new Point();
projection.toPixels(globalGeoPoint,pt);
GeoPoint newGeos = new GeoPoint(selectedLat+(100),selectedLong); // adjust your radius accordingly
Point pt2 = new Point();
projection.toPixels(newGeos,pt2);
float circleRadius = Math.abs(pt2.y-pt.y);
Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(0x30000000);
circlePaint.setStyle(Style.FILL_AND_STROKE);
canvas.drawCircle((float)pt.x, (float)pt.y, circleRadius, circlePaint);
circlePaint.setColor(0x99000000);
circlePaint.setStyle(Style.STROKE);
canvas.drawCircle((float)pt.x, (float)pt.y, circleRadius, circlePaint);
Bitmap markerBitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(),R.drawable.pin);
canvas.drawBitmap(markerBitmap,pt.x,pt.y-markerBitmap.getHeight(),null);
super.draw(canvas,mapV,shadow);
}
}
}
This let me have following effect:
The calculation used may not be what you want.
Its just for demonstration purposes. Real range/distance calculation requires the use of bearing too and has some specific formula.
Let me know if you have any questions regarding this.
Extend the class ItemizedOverlay to override the draw() method. The Canvas where overlays are drawn is passed to that method and you can call drawCircle or anything that's needed to make your range dragger appear.
An example code to draw a pushpin with the circle:
public class MapDemoActivity extends MapActivity {
MapView mapView;
MapController mc;
GeoPoint p;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mapView = (MapView) findViewById(R.id.mapView);
LinearLayout zoomLayout = (LinearLayout)findViewById(R.id.zoom);
View zoomView = mapView.getZoomControls();
zoomLayout.addView(zoomView,
new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
mapView.displayZoomControls(true);
mc = mapView.getController();
String coordinates[] = {"28.38", "77.12"};
double lat = Double.parseDouble(coordinates[0]);
double lng = Double.parseDouble(coordinates[1]);
p = new GeoPoint(
(int) (lat * 1E6),
(int) (lng * 1E6));
mc.animateTo(p);
mc.setZoom(8);
//---Add a location marker---
MapOverlay mapOverlay = new MapOverlay();
List<Overlay> listOfOverlays = mapView.getOverlays();
listOfOverlays.clear();
listOfOverlays.add(mapOverlay);
mapView.invalidate();
}
class MapOverlay extends com.google.android.maps.Overlay
{
#Override
public boolean draw(Canvas canvas, MapView mapView,
boolean shadow, long when)
{
super.draw(canvas, mapView, shadow);
//---translate the GeoPoint to screen pixels---
Point screenPts = new Point();
mapView.getProjection().toPixels(p, screenPts);
//--------------draw circle----------------------
Point pt=mapView.getProjection().toPixels(p,screenPts);
Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(0x30000000);
circlePaint.setStyle(Style.FILL_AND_STROKE);
canvas.drawCircle(screenPts.x, screenPts.y, 50, circlePaint);
//---add the marker---
Bitmap bmp = BitmapFactory.decodeResource(
getResources(), R.drawable.pin);
canvas.drawBitmap(bmp, screenPts.x, screenPts.y-bmp.getHeight(), null);
super.draw(canvas,mapView,shadow);
return true;
}
}
#Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}
Related
How can I draw lines between different GPS coordinates to connect them all together?
I should mention that this is not a route. I am using satellite view and the line can go over a house for example.
If its just two coordinates than how about drawing a simple canvas over the map and drawing a straight line between those coordinates, so it would be a simple line and it could be any drawn anywhere , even over a house.
Below Sample Code was taken
Drawing a line/path on Google Maps
/** Called when the activity is first created. */
private List<Overlay> mapOverlays;
private Projection projection;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
linearLayout = (LinearLayout) findViewById(R.id.zoomview);
mapView = (MapView) findViewById(R.id.mapview);
mapView.setBuiltInZoomControls(true);
mapOverlays = mapView.getOverlays();
projection = mapView.getProjection();
mapOverlays.add(new MyOverlay());
}
#Override
protected boolean isRouteDisplayed() {
return false;
}
class MyOverlay extends Overlay{
public MyOverlay(){
}
public void draw(Canvas canvas, MapView mapv, boolean shadow){
super.draw(canvas, mapv, shadow);
Paint mPaint = new Paint();
mPaint.setDither(true);
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(2);
GeoPoint gP1 = new GeoPoint(19240000,-99120000);
GeoPoint gP2 = new GeoPoint(37423157, -122085008);
Point p1 = new Point();
Point p2 = new Point();
Path path = new Path();
projection.toPixels(gP1, p1);
projection.toPixels(gP2, p2);
path.moveTo(p2.x, p2.y);
path.lineTo(p1.x,p1.y);
canvas.drawPath(path, mPaint);
}
i am trying google map first time i got a some tutorial from From this site
where we can pin a location but it does not show pin a particular location on click the code is given below
public class GoogleActivity extends MapActivity
{
MapView mapView;
MapController mc;
GeoPoint p;
class MapOverlay extends com.google.android.maps.Overlay
{
#Override
public boolean draw(Canvas canvas, MapView mapView,
boolean shadow, long when)
{
super.draw(canvas, mapView, shadow);
//---translate the GeoPoint to screen pixels---
Point screenPts = new Point();
mapView.getProjection().toPixels(p, screenPts);
//---add the marker---
Bitmap bmp = BitmapFactory.decodeResource(
getResources(), R.drawable.ic_launcher);
canvas.drawBitmap(bmp, screenPts.x, screenPts.y-50, null);
return true;
}
}
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mapView = (MapView) findViewById(R.id.mapView);
LinearLayout zoomLayout = (LinearLayout)findViewById(R.id.zoom);
View zoomView = mapView.getZoomControls();
zoomLayout.addView(zoomView,
new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
mapView.displayZoomControls(true);
mc = mapView.getController();
String coordinates[] = {"1.352566007", "103.78921587"};
double lat = Double.parseDouble(coordinates[0]);
double lng = Double.parseDouble(coordinates[1]);
p = new GeoPoint(
(int) (lat * 1E6),
(int) (lng * 1E6));
mc.animateTo(p);
mc.setZoom(17);
mapView.invalidate();
//---Add a location marker---
MapOverlay mapOverlay = new MapOverlay();
List<Overlay> listOfOverlays = mapView.getOverlays();
listOfOverlays.clear();
listOfOverlays.add(mapOverlay);
mapView.invalidate();
}
#Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}
now what i need is that i want to pin a location when i chick a particular location. How can i implement a click event in google map
THe MapOverlay class has an onTap() method you can override. It will be called when you tab on the map and a GeoPoint object will be passed as a parameter describing the location that was taped.
Through my main java file I am calling overlay and than I am passing the geopoint, and the lines is coming so wierd not even close. Starts from top corner and goes to the middle of the screen.
java1:
public class TourmapActivity extends MapActivity {
private MapView mapView;
private MyOverlay myOverlay;
private List<Overlay> mapOverlays;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mapView = (MapView) findViewById(R.id.mapview);
mapView.setBuiltInZoomControls(true);
mapOverlays = mapView.getOverlays();
myOverlay = new MyOverlay(mapView);
mapOverlays.add(myOverlay);
}
#Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}
java2:
public class MyOverlay extends Overlay {
private Point point1;
private Point point2;
private Projection projection;
public MyOverlay(MapView mapView){
projection = mapView.getProjection();
}
public void draw(Canvas canvas, MapView mapView, boolean shadow){
super.draw(canvas, mapView, shadow);
Paint paint = new Paint();
paint.setDither(true);
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(2);
point1 = new Point();
point2 = new Point();
Path path = new Path();
//43.26082327999097, -79.92047309875488 jhe
float longitude = 43.26082327999097f; // first point
float latitude = -79.92047309875488f;
//43.26347189172956, -79.91776943206787 student center
float longitude_1 = 43.26347189172956f; // second point
float latitude_1 = -79.91776943206787f;
GeoPoint geoPoint1 = new GeoPoint((int)(longitude * 1E6), (int)(latitude * 1E6));
GeoPoint geoPoint2 = new GeoPoint((int)(longitude_1 * 1E6), (int)(latitude_1* 1E6));
projection.toPixels(geoPoint1, point1);
projection.toPixels(geoPoint2, point2);
path.lineTo(point1.x, point1.y);
path.lineTo(point2.x, point2.y);
canvas.drawPath(path, paint);
}
}
You should look at the documentation for Path, specifically for lineTo and moveTo.
So you want to change
path.lineTo(point1.x, point1.y);
to
path.moveTo(point1.x, point1.y);
in my app i want to show a map with a pointer and above the pointer i want to show a text view with a button. Using that button i want to move to next activity. Following is my code to show the point, but how to show a point with text and button to right of it. And how to write the btn action for it
class MapOverlay extends com.google.android.maps.Overlay
{
public boolean draw(Canvas canvas, MapView mapView,boolean shadow, long when)
{
super.draw(canvas, mapView, shadow);
//---translate the GeoPoint to screen pixels---
Point screenPts = new Point();
mapView.getProjection().toPixels(p, screenPts);
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.marker);
canvas.drawBitmap(bmp, screenPts.x, screenPts.y-100, null);
mapView.getProjection().toPixels(q, screenPts);
#SuppressWarnings("unused")
Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.drawable.blue);
canvas.drawBitmap(bmp, screenPts.x, screenPts.y-100, null);
return true;
}
}
p = new GeoPoint((int) (latPt * 1E6),(int) (lngPt * 1E6));
Log.e("point p ",""+p);
mapController.animateTo(p);
mapController.setZoom(16);
mapView.invalidate();
mapView.setTraffic(true);
mapController = mapView.getController();
MapOverlay mapOverlay = new MapOverlay();
List<Overlay> listOfOverlays = mapView.getOverlays();
listOfOverlays.clear();
listOfOverlays.add(mapOverlay);
I did it by using views instead of overlays, so you add a new view for each item in your map with addItem. Here it is the code:
AnnotationView
public AnnotationView(final Context context,final Object object) {
super(context);
setOrientation(VERTICAL);
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.map_overlay, this, true);
// Set the textview
lBubble = (LinearLayout) findViewById(R.id.lAnnotation);
txtPlace = ((TextView) (findViewById(R.id.txtPlace)));
txtPlace.setText(object.getName());
// set button touch listener
((ImageButton) (findViewById(R.id.btnPlace)))
.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Do anything
};
});
// add your overlay on mapview by geopoint
btnMarker = ((ImageButton) (findViewById(R.id.btnMarker)));
btnMarker.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Do anything };
});
setLayoutParams(new MapView.LayoutParams(
MapView.LayoutParams.WRAP_CONTENT,
MapView.LayoutParams.WRAP_CONTENT, new GeoPoint(
(int) (object.getLatitude() * 1E6),
(int) (object.getLongitude() * 1E6)),
MapView.LayoutParams.BOTTOM_CENTER));
}
Then I just created it and add to the map like:
overlay = new AnnotationView(this, object);
mapView.addView(overlay);
The map_overlay layout is just the linealayout you want to display over the map as a overlay (images, buttons...)
I have only a problem with zoom scales, because the point changes a bit while zooming I am trying to solve it.
Hope that helps
Cheers
I have three gps points in android app. How to set on map connect first and second with red and second and third with blue line ? How to connect any two points on map, draw line between them?
Here's a minimal implementation (2 points only, no markers) using a map overlay and mapView.getProjection() fro you to expand upon:
public class HelloGoogleMaps extends MapActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MapController mMapController;
MapView mapView = (MapView) findViewById(R.id.mapview);
mapView.setBuiltInZoomControls(true);
mMapController = mapView.getController();
mMapController.setZoom(18);
// Two points in Mexico about 1km apart
GeoPoint point1 = new GeoPoint(19240000,-99120000);
GeoPoint point2 = new GeoPoint(19241000,-99121000);
mMapController.setCenter(point2);
// Pass the geopoints to the overlay class
MapOverlay mapOvlay = new MapOverlay(point1, point2);
mapView.getOverlays().add(mapOvlay);
}
public class MapOverlay extends com.google.android.maps.Overlay {
private GeoPoint mGpt1;
private GeoPoint mGpt2;
protected MapOverlay(GeoPoint gp1, GeoPoint gp2 ) {
mGpt1 = gp1;
mGpt2 = gp2;
}
#Override
public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
long when) {
super.draw(canvas, mapView, shadow);
Paint paint;
paint = new Paint();
paint.setColor(Color.RED);
paint.setAntiAlias(true);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(2);
Point pt1 = new Point();
Point pt2 = new Point();
Projection projection = mapView.getProjection();
projection.toPixels(mGpt1, pt1);
projection.toPixels(mGpt2, pt2);
canvas.drawLine(pt1.x, pt1.y, pt2.x, pt2.y, paint);
return true;
}
}
#Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}
.