ASP.NET Podcast Show #111 - ASP.NET AJAX with Virtual Earth
Original url: http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2008/05/05/asp-net-podcast-show-111-asp-net-ajax-with-virtual-earth.aspx
Subscribe.
<-- Everybody needs some, how about you!
Download WMV - Video for PC.
Download M4V - Video for iPod.
Download MP3 - Audio only.
Show Notes:
Source Code:
Master Page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!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>ASP.NET Podcast Mapping Page</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA_mrKwezGRvHyiI2zD3-QjxQyvuBphQwgXhP_kHK6Ww2QlMKTbxQ3mY6sQnMU6V5PMK8wQzOfhkt_Vw" language="javascript" type="text/javascript"></script> <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script> </head><body onunload="GUnload()"> <form id="form1" runat="server"> <asp:ScriptManager ID="sm" runat="server"> <Services> <asp:ServiceReference Path="~/GetMapData.asmx" /> </Services> </asp:ScriptManager> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form></body>
</html>
ASP.NET Page:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Live_Default" Title="Virtual Earth Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div id="MapDiv" style="position:relative; width:450px; height: 350px;" ></div><br /><div id="MapInfo"></div> <script language="javascript" type="text/javascript">var Map;function pageLoad(){ GetMapData.MapData(SetupMap);} function SetupMap(result){ var Lat = result.Center.Lat; var Lon = result.Center.Lon; var ZoomLevel = result.ZoomLevel; var MapView, TopLeft, BottomRight; Map = new VEMap('MapDiv'); Map.LoadMap(new VELatLong(Lat, Lon), ZoomLevel ,'h' ,false); MapView = Map.GetMapView(); TopLeft = MapView.TopLeftLatLong; BottomRight = MapView.BottomRightLatLong; //TopleftLatLong and BottomRightLatLong return a VELatLong object. Map.AttachEvent("onchangeview", MapChangedView); GetMapData.GetPointData(10, TopLeft.Latitude, TopLeft.Longitude, BottomRight.Latitude, BottomRight.Longitude, GetDataSuccess);}function GetDataSuccess(result){ var i = 0; var Lat, Lon; $get("MapInfo").innerHTML = ""; for(i=0;i<result.length;i++) { Lat = result[i].Location.Lat; Lon = result[i].Location.Lon; var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(Lat, Lon)); shape.SetTitle("Title: " + i); shape.SetDescription(result[i].Description); Map.AddShape(shape); $get("MapInfo").innerHTML += "Point Location - Lat: " + result[i].Location.Lat + " Lon: " + result[i].Location.Lon + "<br />"; }}
function MapChangedView(e){ Map.DeleteAllShapes(); MapView = Map.GetMapView(); TopLeft = MapView.TopLeftLatLong; BottomRight = MapView.BottomRightLatLong; GetMapData.GetPointData(10, TopLeft.Latitude, TopLeft.Longitude, BottomRight.Latitude, BottomRight.Longitude, GetDataSuccess);}</script></asp:Content>
Web Service:
using System;using System.Collections;using System.Collections.Generic;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Web.Script.Services; /// <summary>/// Summary description for GetMapData/// </summary>[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][ScriptService]public class GetMapData : System.Web.Services.WebService { public GetMapData () { //Uncomment the following line if using designed components //InitializeComponent(); } [WebMethod] [GenerateScriptType(typeof(MapData))] public MapData MapData() { MapData md = new MapData(); LatLon ll = new LatLon(); ll.Lat = 36; ll.Lon = -84; md.Center = ll; md.ZoomLevel = 8; return (md); } [WebMethod] [GenerateScriptType(typeof(PointData))] public PointData[] GetPointData(int PointCount, double ULLat, double ULLon, double LRLat, double LRLon) { int i = 0; double PTLat, PTLon; double LatDelta, LonDelta; Random rd = new Random(); PointData pd; LatLon ll; List<PointData> pdl = new List<PointData>(); LatDelta = ULLat - LRLat; LonDelta = ULLon - LRLon; for (i = 0; i < PointCount; i++) { pd = new PointData(); ll = new LatLon(); ll.Lat = LRLat + LatDelta * rd.NextDouble(); ll.Lon = LRLon + LonDelta * rd.NextDouble(); pd.Location = ll; pd.Description = "Point number: " + i.ToString(); pdl.Add(pd); } return (pdl.ToArray()); }} public class MapData{ public LatLon Center; public int ZoomLevel;} public class LatLon{ public double Lat; public double Lon;} public class PointData{ public LatLon Location; public string Description;}