Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

[SharePoint 2013] Crear una vista de mapa para el campo geolocalización mediante programación

Mapas BingA pesar de que muchos expertos se les esta llenando la boca diciendo que esta versión no aporta ninguna novedad al usuario final y han llegado a bautizar SharePoint 2010 como el nuevo Windows XP. Yo personalmente si que veo esta versión lo suficientemente atractiva como para plantearme un cambio/migración o unirme a la plataforma, ya que como producto no tiene competencia. Dicha opinión no es porque me considere un fan incondicional de SharePoint sino por el conocimiento de las funcionalidades que tiene una versión u otra. Podré estar más de acuerdo en como se plantean como hacerlo o no pero el resultado de cara a un usuario final me parece simplemente espectacular . Una de estas novedades son la utilización de los campos geolocalizados y el poder introducirlos en nuestros desarrollos, lo cual nos otorga un gran abanico de posibilidades y de nuevas oportunidades.

La pega que tienen estos campos geolocalizados es que no lo puedes añadir directamente como el resto de columnas y hay que realizar un desarrollo (relativamente simple como explico a continuación) para poder utilizarlo. Tenemos que crear una aplicación en modo consola para las versiones Foundation y Enterprise y para la versión en el cloud (Online y On-Premises) insertar código Html en una página y hacer uso del modelo de objetos en cliente de JavaScript para realizar estas operaciones. El no poder hacerlo directamente es debido a que esta funcionalidad de representación de Mapas es que este tipo de columnas se introdujeron en la versión de SQL Server 2008 R2 SP1 Feature Pack y desde Redmond ya tenian una versión más o menos estable de SharePoint y decidieron no introducirla directamente por el momento (aunque se espera que en próximos Service Pack ya este incorporada)

Manos a la obra
El sistema de mapas naturalmente esta basado en Bing, por ello el primer paso es obtener un identificador para poder utilizar los mapas Bing  para ello tenemos que registrarnos con un Windows Live ID en la siguiente página https://www.bingmapsportal.com/ (es totalmente gratuito) y hay obtener el ID. A continuación este ID lo tenemos que registrar en nuestra Aplicación Web o en nuestra granja de SharePoint, si tenemos el sitio en nuestros servidores lo podemos hacer con estos comandos PowerShell:

Set-SPBingMapsKey -BingKey "Keyobtenida"

En el caso de que estemos en un entorno en la nube, como no tenemos acceso a esta consola PowerShell lo podemos hacer utilizando el Objeto SPWeb y poniendole valor a la Key «BingKey» como en el siguiente ejemplo para más información acudir al siguiente enlace de mi compañero de LevaPoint Jose Quinto en CompartiMOSS

Uri oUri = new Uri("https://yourtenant.sharepoint.com");
MsOnlineClaimsHelper claimsHelper = new MsOnlineClaimsHelper(oUri, "yourid@yourtenant.onmicrosoft.com", "yourpassword");
using (ClientContext context = new ClientContext(oUri))
   {
     context.ExecutingWebRequest += claimsHelper.clientContext_ExecutingWebRequest;

     List oList = context.Web.Lists.GetByTitle("TestList");
     oList.Fields.AddFieldAsXml("", true,
                                    AddFieldOptions.AddToAllContentTypes);
     oList.Update();
     context.ExecuteQuery();
    }

Una vez ya tenemos activado que nuestras listas puedan tener campos calculados, el siguiente paso es añadirlas a una lista existente. Para ello podemos utilizar el modelo de objetos en cliente de JavaScript (también se puede utilizar el  de .NET lo pongo en JavaScript por ser la tendencia, pero con ambas API se puede hacer lo mismo):

<script type="text/javascript">
var contexto;
function CreateColumn()   {
 var nombreLista = document.getElementById('nombreLista').value;
var nombreColumna = document.getElementById('nombreColumna').value;
 contexto = new SP.ClientContext.get_current();
var lista = contexto.get_web().get_lists().getByTitle(nombreLista);
contexto.load(lista);
this.newField = lista.get_fields().addFieldAsXml(
 "<Field Type='Geolocation' DisplayName='" + nombreColumna + "'/>",   true, SP.AddFieldOptions.defaultValue        );
lista.update();

 contexto.executeQueryAsync(Function.createDelegate(this, this.Success),Function.createDelegate(this, this.ErrorAlCrear));
}
function Success()
{
 alert('Column GeoLocation Created !! .');
> function ErrorCreate(sender, args)
 {
<span style=alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
                }
</script>
<div>
<div>Create column Typ GeoLocation:</div>
 <span>List: </span><input id="nombreLista" type="text" value="" />
 <span>Column: </span><input id="nombreColumna" type="text" value="" />
 <input onclick="CreateColumn();" type="button" value="Create Column" /></div>
<pre>

Y el resultado seria una pantalla como la siguiente:
Demo 1

En nuestro ejemplo lo que queremos mostrar es como podemos crear una vista de los campos geolocalizados mediante programación por lo que vamos a crear dos columnas de este tipo, una llamada Origen y otra destino, en la que vamos a poner diversos puntos en el Mapa para después posicionar los en los mapas. Ahora bien para introducir los datos dentro de estas columnas tendremos que introducir la Latitud y la longitud tal y como vemos en esta imagen:
Introducir datos Lista

Una vez ya tenemos los datos introducidos el siguiente paso es crearnos la vista mediante programación para ello utilizaremos el modelo de objetos en cliente

 // Replace  and  with valid values.ClientContext context = new ClientContext("");
            List oList = context.Web.Lists.GetByTitle("");
            ViewCreationInformation viewCreationinfo = new ViewCreationInformation();
         // Replace  with the name you want for your map view.
viewCreationinfo.Title = "";
             viewCreationinfo.ViewTypeKind = ViewType.Html;
             View oView = oList.Views.Add(viewCreationinfo);
             oView.JSLink = "mapviewtemplate.js";
            oView.Update();
            context.ExecuteQuery();

Si todo funciona como lo esperado se muestra una vista semejante a la siguiente:
Vista de Mapa

En caso de que el punto marcado coincida con información que esta en Bing te lo indicará, por ejemplo si situamos la Estatua de la Libertad indicará también una breve descripción del mismo.

Conclusión

La utilización de este tipo de campos otorga un amplio abanico en nuestros desarrollos, y abordar tareas que hace no mucho tiempo era prácticamente imposible abordar por la dificultad y lo costoso que era. Además otra gran ventaja es que este tipo de campos se puede utilizar para representarlo en dispositivos móviles y entonces hacer un proyecto mucho más ambicioso (en algún post futuro abordaré como representar estos campos Geolocalizados en Windows Phone).

Referencias
http://msmvps.com/blogs/sundar_narasiman/archive/2012/11/22/how-to-add-geolocation-fields-to-sharepoint-2013-site.aspx
http://msdn.microsoft.com/es-es/library/jj656773.aspx
http://www.compartimoss.com/revistas/numero-15/integraci%C3%B3n-con-mapas-y-client-side-rendering-en-sharepoint-2013-parte-i

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.
Esta entrada ha sido publicada en sharepoint 2013 y etiquetada como , , , . Enlace permanente .
Suscríbete a Desarrollando sobre SharePoint

Suscríbete a Desarrollando sobre SharePoint

Recibe todas las actualizaciones semanalmente de nuestro blog

You have Successfully Subscribed!

ENCAMINA, piensa en colores