MapControl
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<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>
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
}
}
{
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
}
}