kepo-ing Zz85

For singapore.

Something like Google Maps demostrate the power of aJAx.

Here’s a simple “ajax” map for Singapore’s Streetdirectory. Its far from working good (coded in a spur), but its nice to play with anyway. Alternatives could be coded in GreaseMonkey. Improvements could be done 1) Prefetching 2) Layering 3) and DHML dragging.

Here’s the code

<br />

<img alt="" id="streetimg" name="hi"/> <br />
<input type="button" onclick="clevel(1);" value="+"/> <input type="button" onclick="clevel(-1);" value="-"/>  <input type="button" onclick="cy(1);" value="Up" title="Beginning"/> <input type="button" onclick="cx(-1);" value="&lt;&lt;" title="Previous"/> <input type="button" onclick="cx(1);" value="/&gt;&gt;" title="Next"/> <input type="button" onclick="cy(-1);" value="Down" title="End"/>
<script type="text/javascript">
var x,y, level, sizex, sizey, incr;
x = 15814;
y= 34552;
level = 2;
sizex = 350;
sizey = 350;
incr = sizex * 2;
var streetimg = document.getElementById("streetimg");
alert(streetimg);
//var streetimg = document.images.streetimg;
test = getImage2();
swap(test);
function getImage2(){
return getImage(x,y, level, sizex, sizey);
}
function getImage(x,y, level, sizex, sizey){
var preImage = new Image();
preImage.src = "http://www.streetdirectory.com.sg/genmapphp.cgi?x=" + x + "&y= " + y + "&level="+level+"&sizex="+sizex+"&sizey="+sizey;
//&iconlist=star1,x,y;
return preImage ;
}
function swap(nextImg){
streetimg.src = nextImg.src;
}
function clevel(changeLevel){
level += changeLevel;
swap(getImage2());
}
function cx(by){
x = x + by * incr * 7/level;
swap(getImage2());
}
function cy(by){
y = y + by * incr * 7/level;
swap(getImage2());
}
function prefetchs(){
fx(1);fx(-1);fy(1);fy(-1);
}
function fx(by){
x = x + by * 1000;
getImage2();
}
function fy(by){
y = y + by * sizey;
getImage2();
}
</script>