PHP: Hack 26. Create the Google Maps Scrolling Effect

Документация

Hack 26. Create the Google Maps Scrolling Effect

Use a combination of small images, PHP, and JavaScript to allow users to use their mouse to scroll around an image that is much larger than their screen.

When Google Maps (http://maps.google.com/) was first introduced, the interactivity of the map blew people's socks off. On older mapping sites, you were presented with a map that had eight arrows positioned around it. When you clicked on an arrow, the page would be refreshed, and the map scrolled by one map unit in the direction you requested. Because of that page refresh, though, you had to reorient yourself to the new location.

Google Maps changed all that. With Google Maps [Hack #95], you simply click on the map and then drag it in whichever direction you want to go. The page never refreshes (although it occasionally redraws), and you never lose track of where you were.

I was so impressed with these maps that I decided to make my own version of the Google Maps code using PHP, some JavaScript, and the very large image created in "Split One Image into Multiple Images" [Hack #30].

Figure 3-23 shows the system's conceptual design. On the lefthand side of the illustration is the page, and on the righthand side is a set of images that contain the sliced-up larger image. The map moves within a view rectangle by repositioning the images within the view area. These images are drawn from the bank of images on the righthand side (all of the images are available instantly, without requiring a refresh).

Figure 3-23. The image scroller design

3.17.1. The Code

The code you want is shown in Example 3-21; save it as index.php.

Example 3-21. Mimicking Google with a little PHP wizardry

<?php
$rows = 5;
$cols = 5;

$maxrows = 40;
$maxcols = 40;
$width = 100;
$height = 100;
?>
<html>
<head>
<script language="Javascript">
var origimgs = [];
<?php
for( $col = 0; $col < $maxcols; $col++ ) {
?>
origimgs[ <?php echo($col); ?> ] = [];
<?php
for( $row = 0; $row < $maxrows; $row++ ) {
  $id = sprintf( "img%02d_%02d", $row, $col ); 
?>
origimgs[ <?php echo($col); ?> ][ <?php echo($row); ?> ] = "<?php echo( $id )
	?>.jpg";
<?php
} } 
?>

var imgs = [];

function startup()
{
<?php
for( $col = 0; $col < $cols + 2; $col++ ) {
?>
imgs[<?php echo($col) ?>] = [];
<?php
for( $row = 0; $row < $rows + 2; $row++ ) {
  $id = sprintf( "img%02d_%02d", $row, $col ); 
?>
imgs[<?php echo($col) ?>][<?php echo($row) ?>] = document.getElementById( "<?php
echo( $id ); ?>" );
<?php
} }
?>
  position(0,0);
}

var scrollrows = <?php echo( $rows ); ?>;
var scrollcols = <?php echo( $cols ); ?>;
var width = <?php echo( $width ); ?>;
var height = <?php echo( $height ); ?>;
var maxrows = <?php echo( $maxrows ); ?>;
var maxcols = <?php echo( $maxcols ); ?>;
var xpos = 0;
var ypos = 0;

document.onmousemove = function(e)
{
  if ( dragging )
  {

    xpos += e.pageX - dragx;
	ypos += e.pageY - dragy;

	if ( xpos < 0 )
      xpos = 0;
    if ( ypos < 0 )
      ypos = 0;

    position( xpos, ypos );

	dragx = e.pageX;
	dragy = e.pageY;
   }
}

document.onmousedown = function(e)
{
  dragging = true;
  dragx = e.pageX;
  dragy = e.pageY;
}

document.onmouseup = function(e)
{
  dragging = false;
}

function position( x, y )
{
  if ( x < 0 ) x = 0;
  if ( y < 0 ) y = 0;

  startcol = Math.floor( x / width );
  startrow = Math.floor( y / height );

  offsetx = Math.abs( x - ( startcol * width ) ) * -1;
  offsety = Math.abs( y - ( startrow * height ) ) * -1;

  viewheight = ( scrollrows + 1 ) * height;
  viewwidth = ( scrollcols + 1 ) * width;

  for( var row = 0; row < scrollrows + 2; row++)
  {
    for( var col = 0; col < scrollcols + 2; col++)
	{

	var left = offsetx + ( col * width );
	var top = offsety + ( row * height );
	imgs[row][col].style.left = left;
	imgs[row][col].style.top = top;
	imgs[row][col].src = origimgs[startrow+row][startcol+col];

	remainderx = viewwidth - ( left + width );
	remaindery = viewheight - ( top + height );

	if ( remainderx > width )
      remainderx = width;
    if ( remainderx < 0 )
      remainderx = 0;
    if ( remaindery > height )
      remaindery = height;
    if ( remaindery < 0 )
      remaindery = 0;

	imgs[row][col].style.clip = "rect( 0px 0px "+remaindery+"px
"+remainderx+"px )";
	}
  } 
}

var dragging = false;
var dragx = 0;
var dragy = 0;

</script>
</head>
<body onload="startup();">
<?php
for( $row = 0; $row < $rows + 2; $row++ ) {
for( $col = 0; $col < $cols + 2; $col++ ) {
  $id = sprintf( "img%02d_%02d", $row, $col );
?>