Virtual Earth ile Web Sayfalarında Harita Kullanmak

Yazar: Gökhan BAĞCI

Kategori: ASP.NET

Eklenme Tarihi: 22.01.2008 09:45:31

Bu makalemde Microsoft Virtual Earth kullanarak web sayfamızda harita kullanımına değineceğiz. Yazılarımı takip edenler bilir daha öncede Google'ın sunduğu Google Map API'lerini kullanarak harita uygulaması geliştirmiştik. Virtual Earth, Google Map'e göre daha basit ve daha fazla fonksiyonu olan, We

Bu makalemde Microsoft Virtual Earth kullanarak web sayfamızda harita kullanımına değineceğiz. Yazılarımı takip edenler bilir daha öncede Google?ın sunduğu Google Map API?lerini kullanarak harita uygulaması geliştirmiştik. Virtual Earth, Google Map?e göre daha basit ve daha fazla fonksiyonu olan, Web Dökümanlarında harita uygulamaları için kullanılan bir kontroldür.

Gelelim geliştireceğimiz projeye, bir emlak ilanının detay bilgilerini tutmak için kullanacağız. Daha farklı kullanım yerleride olabilir. Ör: Firma iletişim sayfalarında kroki göstermek gibi?

Aşağıdaki gibi kullanacağımız tablomuzu oluşturalım.

Tablomuzu oluşturduktan sonra iki adet sayfa tasarlayacağız. Ekle.aspx ve Goster.aspx

Ekle.aspx

<head>
    <%--Virtual Earth'ye ait Sınıfı sayfamıza ekliyoruz--%>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
</head>
<%--GetMap() fonksiyonu ile sayfanın yüklendiği an Haritamızı yükleyeceğiz!--%>
<body onload="GetMap();">
    <form id="form1" runat="server">
        <%--myMap üzerinde, oluşturacağımız Haritayı göstereceğiz--%>
        <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
        Koordinat:
        <asp:TextBox ID="txtKoordinat" runat="server"></asp:TextBox><br />
        Zoom:
        <asp:TextBox ID="txtZoom" runat="server"></asp:TextBox><br />
        <asp:Button ID="btnEkle" runat="server" Text="Ekle" />
    </form>
</body>

Ekle.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<script type=\"text/javascript\">" + Environment.NewLine);
    //Haritanın kullanacağı değişkenleri tanımlıyoruz...
    sb.Append("var map = null;" + Environment.NewLine);
    sb.Append("var pixel = null;" + Environment.NewLine);
    sb.Append("var clickEvent = null;" + Environment.NewLine);
    //Page_load eventında belirttiğimiz Function yazıyoruz...
    sb.Append("function GetMap()" + Environment.NewLine);
    sb.Append("{" + Environment.NewLine);
    //Kullanacağımız Haritayı oluşturuyoruz ve myMap içerisinde kullanacağımızı belirtiyoruz
    sb.Append("    map = new VEMap('myMap');" + Environment.NewLine);
    //Eğer Query'de değer varsa bunları hem TextBox'larımıza çekiyoruz,
    //Hemde haritayı gelen koordinatlara göre ortalıyoruz...
    if (Request.QueryString["Koordinat"] != null)
    {
        txtKoordinat.Text = Request.QueryString["Koordinat"].ToString();
    }
    if (Request.QueryString["Zoom"] != null)
    {
        txtZoom.Text = Request.QueryString["Zoom"].ToString();
    }
    if (txtKoordinat.Text != "" && txtZoom.Text != "")
    {
        //LoadMap methodunda VELatLong ile koordinatı, daha zoom bilgisini, daha sonra 'r' ile belirtilen kısımda harita stilini belirliyebiliyoruz
        //İsterseniz daha farklı stillerde kullanabilirsiniz.
        //r=Road, h=hybird, a=Aerial gibi...
        sb.Append("    map.LoadMap(new VELatLong(" + txtKoordinat.Text + "), " + txtZoom.Text + " ,'a' ,false);" + Environment.NewLine);
    }
    else
    {
        //Eğer koordinat yoksa default ortalama ile gelecek.
        //İsterseniz yukarıdaki gibi VELatLong ile kendi belirlediğiniz sabit
        //noktalarada ortalayabilirsiniz...
        sb.Append("    map.LoadMap();" + Environment.NewLine);
    }
    //onClick eventında PixelClick fonksiyonun kullanılacağını belirtiyoruz
    sb.Append("    map.AttachEvent(\"ondoubleclick\", PixelClick);" + Environment.NewLine);
    sb.Append("}" + Environment.NewLine);
    sb.Append("function PixelClick(e)" + Environment.NewLine);
    sb.Append("{" + Environment.NewLine);
    //Gelen class içerisinden X ve Y koordinatlarına erişiyoruz ve bunun harita üzerindeki
    //karşılıklarını LatLong cinsine çevirip bilgileri alıyoruz...
    sb.Append("    var x = e.mapX;" + Environment.NewLine);
    sb.Append("    var y = e.mapY;" + Environment.NewLine);
    sb.Append("    pixel = new VEPixel(x, y);" + Environment.NewLine);
    //Çevirme işlemini gerçekleştiriyoruz...
    sb.Append("    var LL = map.PixelToLatLong(pixel);" + Environment.NewLine);
    //Normalde TextBox, Input vs. gibi kontrol içerisine değerleri yazdırabilirdik
    //ancak enteresan bir şekilde kontrollere değer atayamıyoruz. Sanırım onClick eventında
    //bu işlemler iptal ediliyor. Bizde QueryString ile başka bir sayfaya yada aynı sayfaya
    //değeri gönderip oradan çekeceğiz...
    sb.Append("    window.location = \"Default.aspx?Koordinat=\" + LL.toString() + \"&Zoom=\" + e.zoomLevel;" + Environment.NewLine);
    sb.Append("    ;" + Environment.NewLine);
    sb.Append("}" + Environment.NewLine);
    sb.Append("</script>" + Environment.NewLine);
    //RegisterClientScriptBlock ile oluşturduğumuz JS kodlarını sayfamıza ekliyoruz...
    ClientScript.RegisterClientScriptBlock(GetType(), "Script2", sb.ToString());
}

Yukarıdaki kod bloğunu oluşturduğumuzda ve harita üzerinde bir nokta belirttiğimizde aşağıdaki gibi bir görünüm elde etmiş olacağız.

Şimdi veritabanına eklediğimiz değerleri harita üzerinde göstereceğimiz goster.aspx sayfasını oluşturacağız.

Goster.aspx

Goster.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    //İlan detaylarına erişip, haritamızı yükleyeceğiz...
    string Baslik = "";
    string Nokta = "";
    string Zoom = "";
    string ilanID = "";
    if (Request.QueryString["ID"] != null)
    { ilanID = Request.QueryString["ID"].ToString(); }
    else
    { ilanID = "0"; }
    SqlConnection con = new SqlConnection("Server=.; Database=********************");
    SqlDataAdapter da = new SqlDataAdapter("Select Baslik, Nokta, Zoom From Ilanlar Where IlanID=@IlanID", con);
    da.SelectCommand.Parameters.AddWithValue("@IlanID", ilanID);
    DataTable dt = new DataTable();
    da.Fill(dt);
    if (dt != null && dt.Rows.Count > 0)
    {
        Baslik = dt.Rows[0]["Baslik"].ToString();
        Nokta = dt.Rows[0]["Nokta"].ToString();
        Zoom = dt.Rows[0]["Zoom"].ToString();
    }
    StringBuilder sb = new StringBuilder();
    sb.Append("<script type=\"text/javascript\">" + Environment.NewLine);
    //Haritanın kullanacağı değişkenleri tanımlıyoruz...
    sb.Append("var map = null;" + Environment.NewLine);
    sb.Append("var pixel = null;" + Environment.NewLine);
    sb.Append("var clickEvent = null;" + Environment.NewLine);
    //Page_load eventında belirttiğimiz Function yazıyoruz...
    sb.Append("function GetMap()" + Environment.NewLine);
    sb.Append("{" + Environment.NewLine);
    //Kullanacağımız Haritayı oluşturuyoruz ve myMap içerisinde kullanacağımızı belirtiyoruz
    sb.Append("    map = new VEMap('myMap');" + Environment.NewLine);
    //Yükleme yapmadan önce harita üzerindeki kontrolleri (Zoom Aracı, Harita Tipi vs..)
    //3 farklı şekilde gösterme şansımızda mevcut Small, Tiny ve Normal
    sb.Append("    map.SetDashboardSize(VEDashboardSize.Small);" + Environment.NewLine);
    //Eğer Query'de değer varsa bunları hem TextBox'larımıza çekiyoruz,
    //Hemde haritayı gelen koordinatlara göre ortalıyoruz...
    if (Nokta != "" && Zoom != "")
    {
        //LoadMap methodunda VELatLong ile koordinatı, daha zoom bilgisini, daha sonra 'r' ile belirtilen kısımda harita stilini belirliyebiliyoruz
        //İsterseniz daha farklı stillerde kullanabilirsiniz.
        //r=Road, h=hybird, a=Aerial gibi...
        sb.Append("    map.LoadMap(new VELatLong(" + Nokta + "), " + Zoom + " ,'r' ,false);" + Environment.NewLine);
    }
    else
    {
        //Eğer koordinat yoksa default ortalama ile gelecek.
        //İsterseniz yukarıdaki gibi VELatLong ile kendi belirlediğiniz sabit
        //noktalarada ortalayabilirsiniz...
        sb.Append("    map.LoadMap();" + Environment.NewLine);
    }
    //Diğer sayfada yaptığımız işlemlere ek olarak, sayfaya birde nokta kaydedeceğiz!
    sb.Append("var nokta = new VEShape(VEShapeType.Pushpin, new VELatLong(" + Nokta + "));" + Environment.NewLine);
    //Nokta başlığını belirtiyoruz
    sb.Append("nokta.SetTitle('" + Baslik + "');" + Environment.NewLine);
    //Nokta açıklamasını belirtiyoruz
    sb.Append("nokta.SetDescription('<br><a href=http://www.gokhanbagci.com>gokhanbagci.com</a>');" + Environment.NewLine);
    sb.Append("map.AddShape(nokta);" + Environment.NewLine);
    sb.Append("}" + Environment.NewLine);
    sb.Append("</script>" + Environment.NewLine);
    //RegisterClientScriptBlock ile oluşturduğumuz JS kodlarını sayfamıza ekliyoruz...
    ClientScript.RegisterClientScriptBlock(GetType(), "Script2", sb.ToString());
}

Sonuç...

Daha fazla bilgi için http://dev.live.com/virtualearth/sdk/

Başka bir makalemde görüşmek dileğiyle...

Gökhan BAĞCI
Microsoft Certified Professional

Yazar Hakkında Yorum Yok Yorum Yaz Yazara ait diğer Makaleler