Plotting Zip-Code Boundaries using Ajax.Net and Microsoft Virtual Earth
Plotting Zip-Code Boundaries using Ajax.Net and Microsoft Virtual Earth
Plotting Zip-Code Boundaries using Ajax.Net and Microsoft Virtual Earth
During a recent project, I had the opportunity to play around with the Virtual Earth Map Control from Microsoft (http://dev.live.com/virtualearth/sdk/). The goal of the project was to display zip codes by outlining its boundary. In the end we decided to go a different route, but I thought I would share the prototype (~200 lines of code including markup).
The sample app is an asp.net web page with a drop down list that allows the user to select the zip-code they want shaded. When the search button is clicked, I make a webservice call to the ZipCodeSearch webservice (using the Ajax.Net framework), find the points that make up the latitude/longitudes for the provided zip-code, then hand these coordinates off the the Virtual Earth map control so it can plot them for me.
Also, here some of the sample code. Markup for the Default.aspx page (there is no code-behind required)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map;
function LoadMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
</script>
</head>
<body onload="LoadMap();">
<form id="form" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference Path="ZipCodeService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="js/ZipCode.js" />
</Scripts>
</asp:ScriptManager>
<select id="zipCodes">
<option value="32224" selected="selected">Jacksonville FL - 32224</option>
<option value="32246">Jacksonville FL - 32246</option>
<option value="58103">Fargo ND - 58103</option>
<option value="58104">Fargo ND - 58104</option>
</select>
<input type="button" value="Search" onclick="FindZipCodeInfo(zipCodes.value); return false;" />
<div id="myMap" style="position:relative;width:600px;height:400px;" />
</form>
</body>
</html>
Here is the java script client ...
// Call the Web service method to get the lat/longs
function FindZipCodeInfo(zipCode)
{
// Call the Web service method to get the lat/longs
ZipCodeService.FindZipCodeInfo(zipCode, SucceededCallback, FailedCallback);
}
// Display any errors that occur
function FailedCallback(result)
{
var message = error.get_message();
alert('An unhandled exception has occurred:\n' + message);
}
// This is the callback function that
// processes the value returned by the Web service.
function SucceededCallback(result)
{
var points = result;
if(points.length > 0)
{
var latLongTokens = points.split('|');
var veLatLongs = new Array(latLongTokens.length - 1);
var centerLatLong;
for(index = 0; index < latLongTokens.length; index++)
{
// format= {0},{1}|
var latitude = latLongTokens[index].split(',')[0];
var longitude = latLongTokens[index].split(',')[1];
if(index == 0)
{
// center point of the zipcode
centerLatLong = new VELatLong(latitude, longitude);
}
else
{
// build the points array from the string
veLatLongs[index - 1] = new VELatLong(latitude, longitude);
}
}
var poly = new VEPolygon('polygon', veLatLongs, new VEColor(0,0,255,.2), new VEColor(0,0,255,1), 1);
// clear any existing polygons
map.DeleteAllPolygons();
// add our new polygon
map.AddPolygon(poly);
// set the view to these points
map.SetMapView(veLatLongs);
}
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();