«

»

oct 29 2012

OSMBonusPack, añadiendo funcionalidad a OSMDROID (OSM Parte III)

Hoy os traemos el tercer y último tutorial sobre OSMDROID en el que os hablaremos de OSMBonusPack, una librería que ampliará las posibilidades de nuestros mapas.

 

 

OSMBonusPack nos permite poder crear nuestros propios globos de información personalizados y que se adapten al diseño de nuestra app, así como la consulta de rutas y su visualización. En este post nos centraremos en la primera parte.

NOTA: No hay que olvidar que esta esta librería se apoya en OSMDROID y extiende la funcionalidad de esta y por tanto es necesario conocer el uso de la anterior y tenerla integrada dentro de nuestro proyecto.

 

Lo primero que haremos será descargar la última versión disponible de osmbonuspack.jar y copiar el jar al directorio libs de nuestro proyecto. En función de la versión del ADT que tengáis instalada deberéis añadir la librería al Build Path, en las versiones más actuales lo hace automáticamente. Adicionalmente deberemos descargarnos los recursos (imagen 9-patch, layout, buton) necesarios para la presentación de nuestro globo, si quisiéramos personalizarlos bastaría con modificar estos.

 

Para la burbuja blanca:

  • drawable-mpi/bonuspack_bubble.9.png
  • layout/bonuspack_bubble.xml

Para la burbuja gris:

  • drawable-mpi/bonuspack_bubble_black.9.png
  • layout/bonuspack_bubble_black.xml

Para el boton “mas info”:

  • drawable/btn_moreinfo.xml
  • drawable-mpi/moreinfo_arrow.png
  • drawable-mpi/moreinfo_arrow_pressed.png

 

NOTA: Otra posibilidad es sincronizar el proyecto completo mediante SVN y configurar en las propiedades de nuestro proyecto que use este como una librería. Muy útil si queremos depurar o realizar alguna modificación sobre el código fuente del mismo.

 

Con esto ya tendríamos listo nuestro proyecto para trabajar con OSMBonusPack así ¡que manos a la obra!.

 

Para poder visualizar nuestros globos asociados a nuestros puntos deberemos usar un tipo concreto de overlay que nos proporciona esta librería y que se denomina ItemizedOverlayWithBubble. En la creación le proporcionaremos como parámetros el contexto, el listado de puntos, el MapView y una instancia de OsmInfoBubble. Este último parámetro solo es necesario si queremos añadir funcionalidad al botón del globo.

 

final ArrayList<ExtendedOverlayItem> osmPois = new ArrayList<ExtendedOverlayItem>();
ItemizedOverlayWithBubble<ExtendedOverlayItem> osmPoisOverlay = new ItemizedOverlayWithBubble<ExtendedOverlayItem>(this, osmPois, mOpenMapView, new OsmInfoBubble(mOpenMapView));
mOpenMapView.getOverlays().add(osmPoisOverlay);

 

Overlay listo y cargado, pero… ¡nuestro listado de elementos esta vacío! No hay problemas a continuación os explicamos como rellenarlo:

 

for (int i = 0; i < numElementos; i++) {
            ExtendedOverlayItem point = new ExtendedOverlayItem("title", "", new GeoPoint(latitude, longitude), ctx);
 
            // Podemos incluir un objeto relacionado que luego podremos recuperar a la hora de hacer click sobre el globo
            point.setRelatedObject(elementID);
 
            // Indicamos la alineacion del marcador en el mapa y elegimos el marcador
            point.setMarkerHotspot(OverlayItem.HotspotPlace.BOTTOM_CENTER);
            point.setMarker(getResources().getDrawable(R.drawable.marker));
 
            // Añadimos descripción y subdescripcion
            point.setDescription("descripcion");
            point.setSubDescription("subDesc");
             
            // Seleccionamos una imagen que mostrar en el globo
            Drawable icon = getResources().getDrawable(R.drawable.imagen);
            point.setImage(icon);
 
            osmPoisOverlay.addItem(point);
}

 

Y por último os mostramos un ejemplo de InfoWindows customizado para que al hacer click sobre el botón en el globo y gracias al RelatedObject podamos navegar a otra Activity y mostrar datos del punto en cuestión:

 

import org.osmdroid.bonuspack.overlays.DefaultInfoWindow;
import org.osmdroid.bonuspack.overlays.ExtendedOverlayItem;
import org.osmdroid.views.MapView;
 
import android.content.Intent;
import android.view.View;
import android.widget.Button;
 
public class OsmInfoBubble extends DefaultInfoWindow {
    Long poiID;
     
    public OsmInfoBubble(MapView mapView) {
        super(R.layout.bonuspack_bubble, mapView);
 
        Button btn = (Button) (mView.findViewById(R.id.bubble_moreinfo));
         
        btn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Intent i = new Intent(v.getContext(), DetailActivity.class);
                i.putExtra("poiID", poiID);
                v.getContext().startActivity(i);
            }
        });
    }
 
    @Override
    public void onOpen(ExtendedOverlayItem item) {
        super.onOpen(item);
        poiID = (Long) item.getRelatedObject();
        mView.findViewById(R.id.bubble_moreinfo).setVisibility(View.VISIBLE);
    }
 
}

 

Pues ya hemos finalizado y tenéis todo lo necesario para customizar cuando queráis vuestras propias burbujas de información.

 

fuente | Ingens Blog

 

Espero que os haya gustado y si es así no lo dudéis y ¡¡compartid lo aprendido!!

 

Acerca del autor

JMPergar

Mobile Developer at @BeRepublic & Founder of @AndroCode. Silver Speaker & Member of Core Team at @GDGBarcelona.

  • ivan diaz

    Hola:
    Muy buen tutorial..
    Tengo un dolor de cabeza enorme, ya que quiero mostrar unas imagenes del servidor web en este codigo

    == Drawable icon = getResources().getDrawable(R.drawable.imagen);
    point.setImage(icon); ==

    No las tengo en el telefono, las tengo en un servidor web,

    Sabes como llamarlas ???
    Saludos

    • ivan diaz

      Es decir, se como llamarlas , pero no sé como ponerlas en esa parte del codigo

      • http://www.linkedin.com/in/jmpergar JMPergar

        Para tratar imagenes alojadas en la nube te recomiendo la libreria “Android Query”. Yo las descargaria antes y luego ya las añadiria.

  • Rodrigo

    una ayuda porfa… tengo el ADT 22 y tambien el osmdroid 3.0 pero no se inicializa al emularlo…
    que version necesito?

  • http://mobiledevstories.wordpress.com mobiledevstories

    Muy buen tutorial. Me ha servido como punto de partida para terminar mi implementación.
    La clase DefaultInfoWindow se ha marcado como obsoleta, aquí explico una alternativa que también funciona bien
    http://mobiledevstories.wordpress.com/2014/03/01/osmdroid-bonus-pack-markers-with-clickable-infowindows/