SharePoint 2010: Como usar un mapa de Bing Maps!

Otro de los ejemplos de aplicación que facilita el mejor soporte de serie de Silverlight por parte de SharePoint 2010 es la facilidad de integrar en sitios de SharePoint controles potentes como el control de Silverlight de mapas de Bing Maps que facilita encajar un mapa de Bing en aplicaciones web en general y en SharePoint en particular. Para usar este control en SharePoint 2010:

  • En primer lugar, nos descargamos e instalamos el control en nuestro entorno de desarrollo.
  • Creamos un proyecto de tipo Silverlight Application en Visual Studio 2010.
  • Añadimos referencias a los ensamblados disponibles en el directorio de instalación de Bing Maps en nuestro equipo de desarrollp (C:Program Files (x86)Bing Maps Silverlight Control):
    • Microsoft.Maps.MapControl.dll
    • Microsoft.Maps.MapControl.Common.dll
  • En la superficie de diseño, arrastramos desde la paleta de controles el control de Bing Maps o bien especificamos el correspondiente código XAML (para usar de forma correcta el control, os recomiendo revisar las referencias que he añadido al final del post.

image

  • Nos vamos a la vista de código de la aplicación Silverligth, y añadimos directivas using a Microsoft.Maps, Microsoft.Maps.MapControl y System.Windows.Media.Imaging.
  • En el método Loaded() del control, añadimos el siguietne código que permite configurar de forma adecuada el mapa de Bing a desplegar:

private void CIINMap_Loaded(object sender, RoutedEventArgs e)
{
    //Coordendas y nivel de zoom
    var lLatitud=43.454609;
    var lLongitud=-3.86825;
    var zZoomLevel =15;
    //Localización
    Location lcCIINLocation =
        new Location(lLatitud, lLongitud);
    //Capa para añadir la localización
    MapLayer mpLayer = new MapLayer();

    //Objeto pin           
    Pushpin psPushpIn = new Pushpin();
    psPushpIn.Location = lcCIINLocation;
    psPushpIn.Width = 10;
    psPushpIn.Height = 10;
    psPushpIn.Opacity = 0.65;
    psPushpIn.Name = “PCTCAN – Grupo Sodercan”;
    psPushpIn.Tag = “Haga clic aquí para más información…”;

    //Eventos del Pushin
    psPushpIn.MouseEnter +=
        new MouseEventHandler(psPushpIn_MouseEnter);
    psPushpIn.MouseLeave +=
        new MouseEventHandler(psPushpIn_MouseLeave);

    //TextBlock / Image que muestra la información
    tbInformacion = new TextBlock();
    imgLogo = new Image();
    MapLayer mpLayerInfo = new MapLayer();
    mpLayerInfo.Children.Add(tbInformacion);
    mpLayerInfo.Children.Add(imgLogo);
    CIINMap.Children.Add(mpLayerInfo);
    //Añadimos el Pushpin al MapLayer
    mpLayer.Children.Add(psPushpIn);
    //Centramos la capa y el nivel de zoom
    CIINMap.SetView(lcCIINLocation, zZoomLevel);   
    //Añadimos la capa al control de mapa
    CIINMap.Children.Add(mpLayer);

}

  • Añadimos los manejadores psPushpIn_MouseEnter() y psPushpIn_MouseLeave() y el código respectivo:

void psPushpIn_MouseEnter(object sender, MouseEventArgs e)
{
    Pushpin pin = (Pushpin)sender;
    tbInformacion.Text=pin.Name;
    tbInformacion.Visibility = Visibility.Visible;           
    tbInformacion.Foreground = new SolidColorBrush(Colors.Black);
    tbInformacion.FontStyle = FontStyles.Italic;
    tbInformacion.FontWeight = FontWeights.Bold;
    //Posicionamos el TextBlock
    MapLayer.SetPosition(tbInformacion, pin.Location);
    MapLayer.SetPositionOrigin(tbInformacion, PositionOrigin.BottomCenter);
    MapLayer.SetPositionOffset(tbInformacion,new Point(0,-20));

    //Posicionamos la imagen
    Uri uriImage =
        new Uri(“
http://www.ciin.es/web/servicios/eventos/PublishingImages/logociin.jpg”);

    BitmapImage biImage = new BitmapImage(uriImage);
    imgLogo.Source =biImage;
    imgLogo.Width = 80;
    imgLogo.Height = 80;
    imgLogo.Visibility = Visibility.Visible;
    MapLayer.SetPosition(imgLogo, pin.Location);
    MapLayer.SetPositionOrigin(imgLogo, PositionOrigin.BottomCenter);
    MapLayer.SetPositionOffset(imgLogo, new Point(0, 70));  

}

void psPushpIn_MouseLeave(object sender, MouseEventArgs e)
{
    tbInformacion.Visibility = Visibility.Collapsed;

}

  • Compilamos el proyecto y nos vamos a nuestro sitio de SharePoint 2010. Editamos una página cualquiera disponible y a través de la pestaña “Herramientas de edición” y la opción “Insertar”, hacemos clic sobre “Elemento web” y localizamos la WebPart de Silverlight que viene de serie con la plataforma (Categoría “Medios y contenido”).
  • Pulsamos el botón Agregar para añadir la WebPart de Silverlight, con lo que de forma automática se nos solicita la ruta del archivo .xap que se va a visualziar en la WebPart.
  • Cargamos el archivo .xap correspondiente al mapa creado en una biblioteca de documentos o en la ruta del servidor “..14TEMPLATELAYOUTSClientBin. En el caso de usar esta última opción, tendremos que especificar la ruta de la forma /_layouts/ClientBin/SPSilverlightCIINBingMap.xap.
  • Tras pulsar “Aceptar”, se muestra el mapa creado en nuestro sitio de SharePoint 2010.
image image image
  image  

Finalmente, comentaros que para facilitar el despliegue del mapa en el directorio ClientBin, podríamos crear un proyecto de tipo “Empty SharePoint Proyect” en Visual Studio 2010, crear una carpeta mapeada seleccionando la carpeta ClientBin del directorio del servidor y añadir el archivo XAP en dicha carpeta. De esta forma, podremos desplegar de forma directa el mapa y crear la correspondiente solución .WSP.

image image  

 Algunas referencias adicionales al trabajo con el control Silverlight de Bing Maps:

Espero que el post os haya resultado interesante.

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

Un comentario en “SharePoint 2010: Como usar un mapa de Bing Maps!”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *