ESRI también provee varios APIs para la web y para escritorio, que mediante controles de alto nivel, permiten proveer cartografía a nuestros usuarios. Aunque claro, llevan algunas limitaciones, que en algunos casos sólo puedes resolver con un licencia de ArcGIS Server, que por supuesto ya no es gratis.

Ficha técnica:

• ESRI API 3.0 for Silverlight
• C#.NET (4.0)

He seleccionado este API, aunque Silverlight ya no es una prioridad para el gigante de Redmond, el código que vamos a generar servirá para enlazar con el siguiente post, ya que el código XAML y el code behind serán aproximadamente los mismos.

Lo primero que hemos de hacer es descargar el API de la página de descargas de ESRI, si no eres usuario, te puedes registrar rápidamente para descargarlo.

Una vez descargado, procedemos a instalar.

Creamos un nuevo proyecto de Silverlight / ESRI Standard Map Application

Una vez creamos el proyecto, seleccionando una de las plantillas que nos ofrece ESRI, debemos actualizar las referencias de Microsoft.Expressions.Interactions y System.Windows.Interactivity. Generamos y voila, tenemos mapa.

Esta plantilla está muy bien, tenemos un control de mapa, con un montón de elementos y funcionalidades, qué a priori, a parte de estar muy estético, puede resultar que no nos sirva para nada. Así, que vamos a crear nuestra propio control al que le iremos añadiendo los componentes que consideramos necesarios. Para ello, agregamos un nuevo proyecto de Silverlight.

Si la instalación del API ha sido correcto, tendremos en nuestro cuadro de herramientas los controles de ESRI, pero sino es así. Lo más sencillo, y más "limpio" es agregar las referencias a mano, para ello, agregamos la referencia ESRI.ArcGIS.Client a nuestro proyecto, y a nuestro marcado.

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800">

    <Grid x:Name="LayoutRoot" Background="White" />
</UserControl>

Una vez lo hemos agregado, incluimos un nuevo control de mapa en el grid.

    <Grid x:Name="LayoutRoot" Background="White">
        <esri:Map x:Name="map1" WrapAround="True">
            <esri:Map.Layers>
                <esri:LayerCollection>
                    <esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
                </esri:LayerCollection>
            </esri:Map.Layers>
        </esri:Map>
    </Grid>

Y con esto, tenemos un control de mapa pelado sin ningún componente más. Ahora lo que vamos a hacer es incluir un servicio WMS, concretamente el del PNOA, el cual nos va a permitir cargar el servicio web del plan nacional de ortofotografía aérea española. Para ello, agregamos otra referencia al proyecto de Silverlight, ESRI.ArcGIS.Client.Toolkit.DataSources, y dejamos el control de mapa sin ninguna capa, ya que vamos a agregar el servicio wms desde el código.

            var wms = new WmsLayer
                          {
                              Url = "http://www.idee.es/wms/PNOA/PNOA",
                              SkipGetCapabilities = false,
                              Layers = new string[] { "PNOA" },
                              Version = "1.3.0",
                              ProxyUrl = "http://tusitio.web/proxy.ashx"
                          };

El API de Silverlight, requiere de un proxy para realizar las peticiones al servicio WMS, para ello ESRI sirve un ejemplo para que puedas incluirlo en tu sitio web, más información.

Después continuamos creando una capa KML, y agregando tanto el sevicio WMS como el KML que hemos agregado.

            var kml = new KmlLayer
                          {
                              Url = new Uri("http://tusitio.web/fichero.kml"),
                              ProxyUrl = "http://tusitio.web/proxy.ashx"
                          };
            MyMap.Layers.Add(wms);
            MyMap.Layers.Add(kml);

Por último incorporamos al control de usuario una barra de progreso para que nos indique el proceso de carga de las capas, un control de navegación, la leyenda y la escala.

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800" Loaded="UserControlLoaded">

    <Grid x:Name="LayoutRoot" Background="AliceBlue">
        <esri:Map x:Name="MyMap" WrapAround="True">
            <esri:Map.Extent>
                <esri:Envelope XMin="-21.37979367" XMax="5.07891717" YMin="27.14108121" YMax="44.03141073" >
                    <esri:Envelope.SpatialReference>
                        <esri:SpatialReference WKID="4326"/>
                    </esri:Envelope.SpatialReference>
                </esri:Envelope>
            </esri:Map.Extent>
        </esri:Map>
        <esri:ScaleLine x:Name="Scale" Map="{Binding ElementName=MyMap}" 
        HorizontalAlignment="Left" VerticalAlignment="Bottom" Visibility="Visible" />
        <esri:Legend x:Name="Legend" Map="{Binding ElementName=MyMap}" 
        HorizontalAlignment="Right" VerticalAlignment="Center"/>
        <esri:Navigation x:Name="Navigation" Map="{Binding ElementName=MyMap}"/>
        <esri:MapProgressBar x:Name="PBar" Map="{Binding ElementName=MyMap}" 
        HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="30"/>
    </Grid>
</UserControl>