Primeros pasos en el desarrollo con Bing Maps en .NET

Trataré de introduciros a la programación con Bing Maps en .NET. En este post simplemente crearemos un sencillo mapa y cargaremos los pins de un fichero CSV.

Qué necesitamos:

Cómo mínimo necesitamos lo siguiente:

  • Repositorio de datos
  • Página .aspx en la que cargaremos el mapa (fichero .js a parte en el que escribiremos nuestro código javascript)
  • Servicio web (.asmx) o Generic Handler (.ashx) que podamos invocar para cargar los datos del repositorio en el “server side”

Cómo lo implementamos:

Aquí se aprecia la estructura del proyecto y todos los archivos involucrados:

1. El mapa:

Se trata de un fichero aspx en el que definiremos el div que contendrá el mapa y las referencias a archivos javascript y al servicio web.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mapa.aspx.cs" Inherits="SampleBingMaps.Mapa" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2'></script>
    <script type="text/javascript" src="Mapa.js"></script>
</head>
<body onload="onLoad()">
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/ServicioWeb.asmx" />
        </Services>
    </asp:ScriptManager>
        <div id="mapaDiv" style="width:600px; height:450px"></div>
    </form>
</body>
</html>

2. Servicio Web

Creamos el método web que devolverá un array de objetos tipo Pin leídos del csv (nuestro repositorio de datos).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.IO;

namespace SampleBingMaps
{
    /// <summary>
    /// Summary description for ServicioWeb
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class ServicioWeb : System.Web.Services.WebService
    {

        [WebMethod]
        public Pin[] LeerPins()
        {
            StreamReader stIn = new StreamReader(Server.MapPath("App_Data/MisPinsNew.csv"));
            List<Pin> list = new List<Pin>();
            string line;
            while ((line = stIn.ReadLine()) != null)
            {
                string[] values = line.Split(';');
                list.Add(new Pin(Convert.ToInt32(values[0]), values[1], values[2], Convert.ToDouble(values[3]), Convert.ToDouble(values[4])));
            }
            stIn.Close();
            return list.ToArray();
        }
    }
}

3. Fichero JS

Al cargarse la página se llama a la función onLoad() que llamará al servicio web para posteriormente cargar los pins en el mapa.

function onLoad() {
    SampleBingMaps.ServicioWeb.LeerPins(ResultadoOK, ResultadoKO);
}

function ResultadoOK(resultado) {
    if (resultado != null) {
        var map = new VEMap('mapaDiv');
        map.LoadMap(new VELatLong(42.95968115329742, -2.5895950198173523), 9, 'r', false);
        var shapeLayer = new VEShapeLayer();
        map.AddShapeLayer(shapeLayer);
        for (var i = 0; i < resultado.length; i++) {
            var pin = resultado[i];
            var bounds = new VELatLong(pin.Lat, pin.Lon);
            var shape = new VEShape(VEShapeType.Pushpin, bounds);
            shape.SetTitle(pin.Nombre);
            shape.SetDescription(pin.Desc);
            shapeLayer.AddShape(shape);
        }
    }
}

function ResultadoKO(error) {
    alert("Se ha producido un error");
}

4. Clase Pin

Clase que define al objeto Pin con los datos que mostraremos en el popup del pin y su localización.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SampleBingMaps
{
    public class Pin
    {
        public int PinId { get; set; }
        public string Nombre { get; set; }
        public string Desc { get; set; }
        public double Lat { get; set; }
        public double Lon { get; set; }

        public Pin()
        { }

        public Pin(int pinId, string nombre, string desc, double lat, double lon)
        {
            PinId = pinId;
            Nombre = nombre;
            Desc = desc;
            Lat = lat;
            Lon = lon;
        }
    }
}

5. Archivo CSV

Es un simple csv con tres pins.

1;Pin 1;Este es un ejemplo de texto a mostrar para el Pin 1;42,849793;-2,65500
2;Pin 2;Este es un ejemplo de texto a mostrar para el Pin 2;43,317684;-1,984406
3;Pin 3;Este es un ejemplo de texto a mostrar para el Pin 3;43,256963;-2,923441

Resultado:

Al cargarse la página se leen los pins del archivo csv y se muestran en pantalla:

Anuncios
  1. Deja un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: