![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Listing 6. The script that puts it all together and creates the GUI -- written in HTML, JavaScript, and some PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Lurie.biz - zip code data map</title>
<script src='http://maps.google.com/maps?file=api&v=1&key=
ABQIAAAAOBYLPNrQJzjQFUhDwY_YkBQELLMkwsMvs8iue266Jq8P_N9NTxSxJp6XRujR63qbEd-Y2zTS
clw6cg' type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">
html,body
{
padding:0;
margin:0px;
}
#top {
float:left;
padding:4px;
background-color:navy;
color:white;
font-size:large;
font-family:arial, helvetica;
}
#search {
padding: 3px;
border: 1px solid white;
font-size: 80%;
font-family:sans-serif;
}
#zip,#go {
border:1px solid black;
font-size: 80%;
font-family: verdana;
}
#loading {
float:right;
height:1.2em;
padding: 3px;
margin:.4em;
font-size: 80%;
font-family:arial, helvetica;
color:white;
background-color:navy;
font-weight:bold;
}
#jsForm {
margin:0;
}
#contbg {
background-color:navy;
color:navy;
height:2em;
}
#rightblock {
float:left;
margin:4px;
}
.header {
font-size:80%;
color:black;
font-weight:bold;
font-family:arial,helvetica;
border-bottom:1px solid black;
}
.rightdata {
font-size:80%;
color:black;
font-family:arial,helvetica;
}
.scroll {
overflow:auto;
height:360px;
width:260px;
}
</style>
</head>
<body>
<!-- start of page -->
<div id="contbg"> <!--container -->
<form id="jsForm" onsubmit="goSearch(); return false" action="">
<div id="top"> <!-- header -->
The Lurie.biz Zipcode Data Map
<span id ="search" > Search by zip:
<input type="text" size="10" name="zip" id="zip"/>
<input type="button" id="go" value="Go!" onclick="goSearch(); return false;"/> </span>
</div> <!-- end of "top" -->
<div id ="loading"></div>
<br style="clear: both; display: block; height: 0;" />
</form>
</div> <!-- end container -->
<div id="map" style="float:left;width:700px;height:500px;border:1px solid black;border-top:0">
</div>
<div id ="rightblock">
<div id="header1" class="header">
The Map
</div><!--end header1 -->
<div id="zoomlev" class="rightdata">
Zoom Level: 13
</div><!-- end zoomlev-->
<div id="longlat" class="rightdata">
</div> <!--end longlat-->
<br style="clear: both; height: 1em;" />
<div id="header2" class="header">
Zip Codes
</div><!--end header2 -->
<div id="searchstatus" class="rightdata">
</div><!--end search status-->
<div id="zipstatus" class="rightdata">
</div><!-- end zip status-->
<br style="clear: both; height: 1em;" />
<div id="ziplist" class="scroll">
</div><!-- end zip list-->
<div id="rightzip">
</div><!--end rightzip -->
<br style="clear: both; height: 1em;" />
</div> <!-- end right block-->
<script type="text/javascript">
//<![CDATA[
//-----------------START OF LOADING SIGN METHODS -----------------
function loadOn()
{
var a=document.getElementById('loading');
document.getElementById('loading').innerHTML="
LOADING... ";
document.getElementById('loading').style.backgroundColor="red";
}
function loadOff()
{
var a=document.getElementById('loading');
document.getElementById('loading').innerHTML="";
document.getElementById('loading').style.backgroundColor="navy";
}
function changeLoad()
{
var a=document.getElementById('loading');
if(a.innerHTML=="")
{
document.getElementById('loading').innerHTML="
LOADING... ";
document.getElementById('loading').style.backgroundColor="red";
}else{
document.getElementById('loading').innerHTML="";
document.getElementById('loading').style.backgroundColor="navy";
}
}
//------------------START OF SEARCH METHODS -------------------------
var sV; //search value
function goSearch()
{
//this is where the fun begins
//1. get data from field, run it to php script posing as xml
//sV is the field value
sV = document.getElementById('zip').value;
//check if they entered anything
if (sV == "")
{alert("You must enter a zip code");}
else{
//if they did, run the script
//----start tech stuff goSearch
loadOn();
//get values to send
var request = GXmlHttp.create();
var open2="returnLoc.php?location="+sV;
request.open("GET", open2, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML.documentElement;
var geo = xmlDoc.getElementsByTagName("Zip");
//test if result came back
if (geo.length==0) alert("Sorry, but we couldn't find this zip code.
\nPlease enter another zip and try again");
for (var i = 0; i < geo.length; i++) {
var searchPoint =
new GPoint(parseFloat(xmlDoc.getElementsByTagName("Longitude").item(i).firstChild.data),
parseFloat(xmlDoc.getElementsByTagName("Latitude").item(i).firstChild.data));
//now store their search for later reference
map.centerAndZoom(searchPoint, 4);
document.getElementById("searchstatus").innerHTML=
"*The zip code you searched for<br>
has an asterisk in the center of it's marker";
}//end for() loop
loadOff();
}//end if readyState
}//end function
request.send(null);
//----end goSearch tech stuff
}//end of script if they entered something
}//end of function
//-----------------------------END OF SEARCH METHODS -----------------
//-----------------------------DEFINE ICONS---------------------------
var stars=[]; //var to hold stars
var icons=[]; //var to hold icons
<?
for($inum=1;$inum<=6;$inum++)
{
echo "var icon$inum=new GIcon();";
echo "icon$inum.image= \"pushpins/$inum.png\";";
echo "icon$inum.shadow= \"pushpins/templates/shadow50.png\";";
echo "icon$inum.iconSize = new GSize(20, 34);";
echo "icon$inum.shadowSize = new GSize(37, 34);";
echo "icon$inum.iconAnchor = new GPoint(6, 20);";
echo "icon$inum.infoWindowAnchor = new GPoint(5, 1);";
echo "var star$inum=new GIcon();";
echo "star$inum.image= \"pushpins/star$inum.png\";";
echo "star$inum.shadow= \"pushpins/templates/shadow50.png\";";
echo "star$inum.iconSize = new GSize(20, 34);";
echo "star$inum.shadowSize = new GSize(37, 34);";
echo "star$inum.iconAnchor = new GPoint(6, 20);";
echo "star$inum.infoWindowAnchor = new GPoint(5, 1);";
echo "icons.push(icon$inum);";
echo "stars.push(star$inum);";
}
?>
//-----------------------------START OF MARKER METHODS----------------
var map; //we want to initialize this now so we dont have to later
function infoMarker(marker,windowHtml,zipCode,colorPop)
{
//this must be here to create different marker instances
//population algorithm
var popLev=0;
if(colorPop<40000) popLev=1;
if(colorPop<15000) popLev=2;
if(colorPop<5000) popLev=3;
if(colorPop<2000) popLev=4;
if(colorPop<500) popLev=5;
var htmlInf='<div style="white-space:nowrap;">'+windowHtml+'</div>';
if(zipCode==sV)
var zipMark=new GMarker(marker,stars[popLev]);
else
var zipMark=new GMarker(marker,icons[popLev]);
GEvent.addListener(zipMark,"click", function() {
zipMark.openInfoWindowHtml(htmlInf);
});
return zipMark;
}//end infoMarker
function getZips()
{
loadOn();
//clear map
map.clearOverlays();
//clear sidebar
document.getElementById("ziplist").innerHTML ="";
//get boundaries in lat/lng form and make a string
var bounds = map.getBoundsLatLng();
var str="right="+bounds.maxX+"&left="+bounds.minX+"&top="+bounds.maxY+"&bottom="+bounds.minY;
//pre-initialize the var so every block can see
var geo2;
//run to php
var phpGet = GXmlHttp.create();
phpGet.open("POST", "returnMarkers.php",true);
phpGet.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
phpGet.send(str);
phpGet.onreadystatechange = function() {
if (phpGet.readyState == 4) {
var zipCode; //variable to be used later for infowindows
var xmlDoc2 = phpGet.responseXML.documentElement;
geo2 = xmlDoc2.getElementsByTagName("Zip");
//test if result came back
for (var i = 0; i < geo2.length; i++) {
var allZips= new GPoint(
parseFloat(xmlDoc2.getElementsByTagName("Longitude").item(i).firstChild.data),
parseFloat(xmlDoc2.getElementsByTagName("Latitude").item(i).firstChild.data));
//now we create the markers and infowindow
//string with html for sidebar
var sideHtml =
xmlDoc2.getElementsByTagName("Code").item(i).firstChild.data+
' ('+
xmlDoc2.getElementsByTagName("State").item(i).firstChild.data+
') - Pop: '+
xmlDoc2.getElementsByTagName("Population").item(i).firstChild.data+'<br>';
document.getElementById("ziplist").innerHTML +=sideHtml;
//string with html for infowindows
var totalHtml = 'Zip Code: '+
xmlDoc2.getElementsByTagName("Code").item(i).firstChild.data+
' State: '+
xmlDoc2.getElementsByTagName("State").item(i).firstChild.data+
'<br>Population: '+
xmlDoc2.getElementsByTagName("Population").item(i).firstChild.data+
'<br>Land Area (Sq. Meters): '+
xmlDoc2.getElementsByTagName("Area").item(i).firstChild.data;
//infoMarker(point,html in window, zipcode,population)
var zipMarker=infoMarker(
allZips,totalHtml,xmlDoc2.getElementsByTagName("Code").item(i).firstChild.data,
xmlDoc2.getElementsByTagName("Population").item(i).firstChild.data);
map.addOverlay(zipMarker);
}//end for() loop
loadOff();
document.getElementById("zipstatus").innerHTML="Number of zip codes in map area:<b> "+geo2.length+"</b>";
}//end if readyState
}//end onreadystatechange function
}//end function getZips()
//-----------------------------END OF MARKER METHODS------------------
//define map
map = new GMap(document.getElementById('map'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var x = map.getMapTypes();
map.setMapType(x[0]);
var maxZoom=6;// this is the farthest out they can zoom while still seeing markers
//event listener for movement takes care of refreshing
GEvent.addListener(map, 'moveend', function() {
var center = map.getCenterLatLng();
var latLngStr = "Long/Lat of map center: ";
latLngStr += '(' + Math.round(center.y*10000)/10000 + ', ' + Math.round(center.x*10000)/10000 + ')';
document.getElementById("longlat").innerHTML = latLngStr;
var zoomstring="Zoom Level: ";
zoomstring +=map.zoomLevel;
var divZoom = document.getElementById("zoomlev").innerHTML = zoomstring;
if (map.zoomLevel <= maxZoom)
getZips();
else
{
document.getElementById("searchstatus").innerHTML = "";
document.getElementById("ziplist").innerHTML = "";
document.getElementById("zipstatus").innerHTML =
"<b>Zoom in closer to see the zip code list</b>";
map.clearOverlays();
}
});
map.centerAndZoom(new GPoint(-95.8008,40.9799), 13);
//]]>
</script>
<!--end of page -->
</body>
</html>
|
Note: To print this page, use landscape printing option.