Google Maps en Android (IV)

Buenas, como todas las semanas, vuelvo para hablaros de Android. Pero antes os voy a volver a recordar nuestro proyecto de software libre, ya ha empezado a participar la gente y nos gustaría que todo el mundo participara. Ya sea dando una idea o opinando sobre cualquiera que haya dicho alguno de los lectores. Animaros!


Dicho esto, empiezo. Esta semana voy a retomar el tema de los mapas de Google Maps, y lo voy a hacer hablando de una cosa muy sencilla pero que puede ser muy útil, los paths, caminos o rutas. Como bien sabréis, en la versión web de Google Maps es posible editar nuestros propios mapas, pudiendo añadir puntos y un camino para indicarle a cualquiera que lo vea que tiene que ir de un punto a otro siguiendo una determinada ruta.

Para este ejercicio vamos a utilizar una clase a la que llamaremos LinePathOverlay, y se va a encargar de pintar una línea que va desde una coordenada a otra. Luego juntaremos unos cuantos puntos e iremos juntando todas las líneas para formar nuestra ruta. Fácil ¿no? Vamos a ver como es el código de nuestra clase:


public class LinePathOverlay extends Overlay {
 private GeoPoint GeoPointInicio;
 private GeoPoint GeoPointFin; 
 private Projection projection; 
 private String HexColor = "#eda62b";
 
 public LinePathOverlay(GeoPoint geoPointInicio,GeoPoint geoPointFin, String color){
  if (color.length() > 0)
   HexColor = "#" + color;
  this.GeoPointInicio = geoPointInicio;
  this.GeoPointFin = geoPointFin;
    }  
 
    public LinePathOverlay(GeoPoint geoPointInicio,GeoPoint geoPointFin){
     this.GeoPointInicio = geoPointInicio;
     this.GeoPointFin = geoPointFin;
    }   

    public void draw(Canvas canvas, MapView mapview, boolean shadow){
        super.draw(canvas, mapview, shadow);
        
        
        Paint   mPaint = new Paint();
        mPaint.setDither(true);
        
        mPaint.setColor(Color.parseColor(HexColor));
        
        
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(4);

        Point p1 = new Point();
        Point p2 = new Point();
        
 projection = mapview.getProjection(); 
        projection.toPixels(this.GeoPointInicio, p1);
        projection.toPixels(this.GeoPointFin, p2);
        
        Path  path = new Path();
        path.moveTo(p2.x, p2.y);
        path.lineTo(p1.x,p1.y);

        canvas.drawPath(path, mPaint);
    }

}

Esta clase hereda de Overlay ya que va a ser una capa más en nuestro mapa de Google Maps. Lo primero que os debéis fijar es que hay dos constructores. En uno pasamos los GeoPoints de inicio y fin y en el otro también un color. En caso de no pasarle un color se le asignará uno por defecto.

El otro método utilizado en esta clase es draw, el cual se está sobreescribiendo. Primero de todo se hace un super.draw para llamar al método draw de la clase padre Overlay, y luego implementamos lo que queremos que haga en nuestro caso.

Lo siguiente que se hace es crear un objeto tipo Paint con las características de nuestra línea. Le vamos a setear ciertas propiedades como el color, el ancho...

Ahora lo que necesitamos es pasar nuestros GeoPoint a coordenadas del eje x-y para poder pintar en nuestra pantalla, para ello utilizaremos el objeto Projection. Como veis hemos definido dos objetos Point donde tendremos el inicio y final pasados a coordenadas x-y de nuestra pantalla. Para ello inicializamos el objeto proyection con nuestro MapView y luego utilizamos el método toPixels.


Ahore ya tenemos las coordenadas x-y, las características de nuestra línea y nos falta crear la línea, para ello utilizaremos el objeto Path. Con moveTo le indicamos el punto de inicio y con lineTo el de fin.


Por último nos falta pintarlo en nuestra capa o Overlay con el objeto canvas que nos proporciona esta y el método drawPath, a este le pasaremos nuestra línea y sus características.


Lo siguiente que vamos a ver ahora es como pintar una ruta con esta clase. Yo lo voy a hacer directamente en un MapActivity, así que volveremos sobre nuestros pasos y reutilizaremos los ejemplos de las semanas anteriores de los mapas de Google Maps.


Lo primero de todo es inicializar el mapa, ahí no nos vamos a parar. Luego debéis ir a la web de Google Maps y recoger 4 o 5 puntos para poder hacer una pequeña ruta. Para los que no recordeis como inicializamos el mapa lo podeis ver en el artículo Google Maps en Android (II) y el artículo sobre como pintar los balloon y como inicializar mapOverlays lo encontrareis en Google Maps en Android (III)

List<GeoPoint> list = new ArrayList<GeoPoint>();
     list.add(new GeoPoint(40405131,-3713379));
 list.add(new GeoPoint(41407280, 2161620));        
     for(int i = 0; i < list.size(); i++){
      if(i>0){
       mapOverlays.add(new LinePathOverlay(list.get(i-1), list.get(i)));
      }

     }


Para este ejemplo, debéis ejecutar este código después de haber inicializado el mapa y el objeto mapOverlays, con eso llegará. Lo que se hace aquí es crear una lista de GeoPoint, los cuales ya habéis recogido en GoogleMaps. Y añadirlos con list.add, yo solo añado dos, pero podéis añadir todos los que queráis. 

Por último recorremos la lista. La primera vez no hacemos nada, esto es por que al añadir a mapOverlays un objeto de nuestra clase LinePathOverlay le pasamos el objeto de nuestra posición i actual y el i-1. Si hiciéramos esto la primera vez intentaría coger el de la posición -1, dándonos una excepción. Cada una de las líneas irá desde el GeoPoint del elemento anterior de la lista al actual, y con esto conseguiremos que todas las líneas que pintemos se unan formando una ruta.

Comments are closed.