MapControl.ascx

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="MapControl.ascx.cs" Inherits="MapPoint.MapControl" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<script language="javascript">

var xmlhttp=null;

function GetMap(x,y,zoom)
{
    //Create a valid url with user typed place value
    var url = "Handler.aspx?x=" + x + "&y=" + y + "&zoom=" + zoom + "&ramdon=" + Math.random();

    //Create an instance of xmlHttp
    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    if(xmlhttp)
    {
        //Now open a request and assign callback
        xmlhttp.open("GET",url,true);
        xmlhttp.onreadystatechange=SetMap;
        //Send the request
        xmlhttp.send(null);
    }
}

function SetMap()
{
    if(xmlhttp)
    {
        if(xmlhttp.readyState==4&&xmlhttp.responseText)
        {
            //Get the response content
            var placecontent = xmlhttp.responseText;
            //Just execute the response content
            if(placecontent != "")
            {
                /*
                var img = document.getElementById('Map_imgMap');
                img.src=placecontent;
                img.onreadystatechange = RepositionDiv;
                */
                
                RepositionDiv(placecontent);
            }
            xmlhttp = null;
            
        }
    }
}

function RepositionDiv(placecontent)
{
    var innerDiv = document.getElementById("innerDiv");
    
    if(stripPx(innerDiv.style.top) != 0 || stripPx(innerDiv.style.left) != 0)
    {
        var img = document.getElementById('Map_imgMap');
        innerDiv.removeChild(img);
        var img = document.createElement("img");
        img.src =placecontent;
        img.setAttribute("id", "Map_imgMap");
        innerDiv.style.top = 0;
        innerDiv.style.left = 0;
        innerDiv.appendChild(img);

    }
    else
    {
        var img = document.getElementById('Map_imgMap');
        img.src=placecontent;
        
    }

}
/*

function RepositionDiv()
{
    var innerDiv = document.getElementById("innerDiv");
    
    if(stripPx(innerDiv.style.top) != 0 || stripPx(innerDiv.style.left) != 0)
    {
        var img = document.getElementById('Map_imgMap');
        if(img.readyState == "complete")
        {
            innerDiv.style.top = 0;
            innerDiv.style.left = 0;
        }
    }

}

*/
var dragging = false;
var top;
var left;
var dragStartTop;
var dragStartLeft;

function init() {
    // wire up the mouse listeners to do dragging
    var outerDiv = document.getElementById("outerDiv");
    outerDiv.onmousedown = startMove;
    //outerDiv.onmousemove = processMove;
    //outerDiv.onmouseup = stopMove;
    document.onmousemove = processMove;    
    document.onmouseup = stopMove;
    // necessary to enable dragging on IE
    outerDiv.ondragstart = function() { return false; }
}
function startMove(event) {
    // necessary for IE
    if (!event) event = window.event;
    dragStartLeft = event.clientX;
    dragStartTop = event.clientY;
    var innerDiv = document.getElementById("innerDiv");
    innerDiv.style.cursor = "hand";//"-moz-grab";
    top = stripPx(innerDiv.style.top);
    left = stripPx(innerDiv.style.left);
    dragging = true;
    return false;
}
function processMove(event) {
    if (!event) event = window.event; // for IE
    var innerDiv = document.getElementById("innerDiv");
    if (dragging) {
        innerDiv.style.top = top + (event.clientY - dragStartTop);
        innerDiv.style.left = left + (event.clientX - dragStartLeft);
    }
}
function stopMove() {
    if(dragging)
    {
        var innerDiv = document.getElementById("innerDiv");
        innerDiv.style.cursor = "";
        dragging = false;
        var panx = (left - stripPx(innerDiv.style.left))/500;
        var pany = (stripPx(innerDiv.style.top) - top)/500;
        GetMap(panx,pany,0);
    }
}
function stripPx(value) {
    if (value == "") return 0;
    return parseFloat(value.substring(0, value.length - 2));
}
</script>
<style>
    #outerDiv { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; OVERFLOW: hidden; BORDER-LEFT: black 1px solid; WIDTH: 500px; BORDER-BOTTOM: black 1px solid; POSITION: relative; HEIGHT: 500px }
    #innerDiv { LEFT: 0px; POSITION: relative; TOP: 0px }
</style>
<div id="divMap" runat="server">
    <TABLE id="Table1" cellSpacing="1" cellPadding="1"
        width="480" border="1">
        <TR>
            <TD align="center" colspan="2">
                <INPUT type="button" value="N" onclick="GetMap(0,.25,0);"> <INPUT type="button" value="S" onclick="GetMap(0,-.25,0);">
                <INPUT type="button" value="E" onclick="GetMap(.25,0,0);"> <INPUT type="button" value="W" onclick="GetMap(-.25,0,0);">
                <INPUT type="button" value="+" onclick="GetMap(0,0,.25);"> <INPUT type="button" value="-" onclick="GetMap(0,0,-.25);">
            </TD>
        </TR>
        <TR>
            <TD></TD>
            <TD></TD>
        </TR>
    </TABLE>
    <div id="outerDiv">
        <div id="innerDiv"><asp:Image ID="imgMap" Runat="server" Visible="False" Height="500px" Width="500px" ></asp:Image></div>
    </div>
</div>

CodeBehind of MapControl.ascx

namespace MapPoint
{
    using System;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using MapPointService;
    using MapPointService.MapPointService;
    using System.Web.Services.Protocols;
    /// <summary>
    ///        Summary description for MapControl.
    /// </summary>
    public class MapControl : System.Web.UI.UserControl
    {
        protected System.Web.UI.WebControls.Image imgMap;
        protected System.Web.UI.HtmlControls.HtmlGenericControl divMap;

//        private readonly double PAN_ADJUSTMENT = 0.25;
//        private readonly double ZOOM_VALUE = 0.25;
    

        public SchoolLocator SchoolLocator
        {
            get
            {
                //return _mapSpecification;
                return (SchoolLocator)Session["SchoolLocator"];

            }
            set
            {
                //_mapSpecification = value;
                Session["SchoolLocator"] = value;
            }
        }
        public void RenderMap()
        {
            RenderMap(0,0,0);
        }
        private void Page_Load(object sender, System.EventArgs e)
        {
            // Put user code to initialize the page here
            this.divMap.Visible = false;
        }

        void RenderMap(double myPanHorizontalAdjustment, double myPanVerticalAdjustment, double myZoomValue) 
        {

            
            //Get the latest map specification object
            if(SchoolLocator == null)
            {
                this.divMap.Visible = false;
                return;
            }
            else
            {
                this.divMap.Visible = true;
            }
            //Pan or zoom the map as appropriate


            string url = SchoolLocator.GetMapURL(myPanHorizontalAdjustment, myPanVerticalAdjustment, myZoomValue);

            //Assign the Map Url
            if(url.Length > 0)
            {
                this.imgMap.ImageUrl = url;
                this.imgMap.Visible = true;
            }
            else
                this.divMap.Visible = false;

            Page.RegisterStartupScript("Init","<script language='JavaScript'>init();</script>");

        
        }

        Web Form Designer generated code


    }
}