Esta semana, hemos lanzado la aplicación oficial del RockCoast Festival 2012 en Tenerife. Una aplicación de marketing que mantiene informado al usuario sobre los acontecimientos del evento, artistas, noticias y demás, junto con otras funcionalidades que se irán implementando en siguientes versiones.

En la siguiente versión, estamos incluyendo un mapa del recinto con todos los puntos de interés necesarios para disfrutar del festival, áreas VIPS, escenarios, zonas de FastFood, etc, y nos hemos encontrado con un problema en el mapa de Bing.

La versión del mapa de Canarias es de 2010 y la zona habilitada para el concierto no estaba construida en esa fecha y no aparece, el recinto del festival se sitúa en el agua (sé de un amigo que vive en Holanda que se reirá mucho de mi cuando lea esta frase porque al final va a tener razón y esto es África).

Nos nos queda otra opción que buscar otro mapa y reemplazar la versión de Bing por uno que contenga ese trozo de muelle que falta.

El control de mapa de Bing nos permite crearnos nuestro propio TileSource y utilizar el API de Nokia, Google u OpenStreetMap para mostrar el mapa. Para ello necesitamos crearnos una clase que herede de este TileSource y sobrescribir el método GetUri que se encarga de obtener la imagen adecuada con la latitud, longitud y zoom que el control necesite.

public override Uri GetUri(int x, int y, int zoomLevel)

{

    //Url del mapa con los parámetros de latitud, longitud y zoom

    UriFormat = @"http://tile.openstreetmap.org/{2}/{0}/{1}.png";

    if (zoomLevel > 0)

    {

        var Url = string.Format(UriFormat, x, y, zoomLevel);

        return new Uri(Url);

    }

    return null;

}

Para utilizar este Tile, usamos un MapTileLayer especificando el TileSource que hemos creado.

<Maps:Map HorizontalAlignment="Stretch" Name="map" VerticalAlignment="Stretch" CredentialsProvider="PUTSYOUR" CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Visible" RenderTransformOrigin="0.5,0.5">

    <Maps:Map.Mode>                    

        <MapsCore:MercatorMode/>                

    </Maps:Map.Mode>           

    <Maps:MapTileLayer Visibility="Visible" Name="street" Margin="0,0,0,32">

        <Maps:MapTileLayer.TileSources>

            <!-- TileSource que vamos a utilizar -->

            <MapsSource:OpenStreetMapsTile TileTypes="Street"/>

        </Maps:MapTileLayer.TileSources>

    </Maps:MapTileLayer>

</Maps:Map>

Así, podemos utilizar los mapas de Google, Nokia Maps o OpenStreetMap, sin ningún problema y sólo implementando la Uri adecuada para cada uno de ellos.

Google Maps Uri http://mt{0}.google.com/vt/lyrs={1}&z={2}&x={3}&y={4} (0 es el servidor, 1 es el modo de mapa, 2 es el zoom, 3 es la latitud y 4 es la longitud.

Nokia Map Uri http://maptile.maps.svc.ovi.com/maptiler/v2/maptile/newest/normal.day/{0}/{1}/{2}/256/png8?token={3}&app_id={4}&lg={5} (0 es el zoom, 1 es la latitud, 2 es la longitud, 3 es el token de la aplicación, 4 es el id de la aplicación y 4 es el idioma).

OpenStreetMap Uri http://tile.openstreetmap.org/{2}/{0}/{1}.png (2 es el zoom, 0 es la latitud y 1 es la longitud)

El resultado final, usando OpenStreetMap quedaría tal cómo vemos en la siguiente imagen:

Al final, con el objeto MapTileLayer podemos superponer tanto otros mapas como imágenes geolocalizadas, en la posición correcto.

Saludos a todos…