rdmpage · March 7, 2014 13:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>GBIF and Google Maps</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }

      #map {      	
       	width:100%;
        height: 100%;
      }
      
    </style>
    
    <script src="http://www.google.com/jsapi"></script>    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script type="text/javascript">
    
    var map;
    

    </script>
    
    <script type="text/javascript">
      google.load('maps', '3', {
        other_params: 'sensor=false'
      });
      google.setOnLoadCallback(initialize);
      
      
 	//--------------------------------------------------------------------------------------------
  
 	// Normalizes the coords that tiles repeat across the x axis (horizontally)
 	// like the standard Google map tiles.
 	function getNormalizedCoord(coord, zoom) {
 	  var y = coord.y;
 	  var x = coord.x;
 	
 	  // tile range in one direction range is dependent on zoom level
 	  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
 	  var tileRange = 1 << zoom;
 	
 	  // don't repeat across y-axis (vertically)
 	  if (y < 0 || y >= tileRange) {
 		return null;
 	  }
 	
 	  // repeat across x-axis
 	  if (x < 0 || x >= tileRange) {
 		x = (x % tileRange + tileRange) % tileRange;
 	  }
 	
 	  return {
 		x: x,
 		y: y
 	  };
 	}
 			  
      
 	/** @constructor */
 	function GbifMapType(tileSize) {
 	  this.tileSize = tileSize;
 	}
 	
 	GbifMapType.prototype.getTile = function(coord, zoom, ownerDocument) {	
 	  var div = ownerDocument.createElement('div');
 	  
 		var normalizedCoord = getNormalizedCoord(coord, zoom);
 		  if (!normalizedCoord) {
 			return null;
 		  }  
 	  
 	  // http://www.gbif.org/developer/maps
 	  var url = 'http://api.gbif.org/v0.9/map/density/tile?x=' + normalizedCoord.x + '&y=' + normalizedCoord.y + '&z=' + zoom + '&type=TAXON&key=1';
 	  
 	  url += '&resolution=4'; // 4 pixels
 	
 	  // colours
 	  url += '&colors=' + encodeURIComponent(',100,#FFFF0B66|100,1000,#FC4E0766|1000,10000,#FC180833|10000,,#BD000466');
 	  
 	 
 	  div.innerHTML = '<img src="' + url + '"/>';
 	  div.style.width = this.tileSize.width + 'px';
 	  div.style.height = this.tileSize.height + 'px';

 	  /*
 	  div.style.fontSize = '10';
 	  div.style.borderStyle = 'solid';
 	  div.style.borderWidth = '1px';
 	  div.style.borderColor = '#AAAAAA';
 	  */
 	  return div;
 	};      

      //--------------------------------------------------------------------------------------------
      function initialize() {
    	
 		var center = new google.maps.LatLng(0,0);
 		
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });
        
 		// Insert this overlay map type as the first overlay map type at
 		// position 0. Note that all overlay map types appear on top of
 		// their parent base map.
 		map.overlayMapTypes.insertAt(
 		  0, new GbifMapType(new google.maps.Size(256, 256)));
      }
      
 	/* http://stackoverflow.com/questions/6762564/setting-div-width-according-to-the-screen-size-of-user */
 	$(window).resize(function() { 
 		var windowHeight = $(window).height();
 		$('#map').css({'height':windowHeight });
 	});	
      
      
    </script>
  </head>
  <body onload="$(window).resize()">
   	<div id="map"></div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>GBIF and Google Maps</title>

	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}

	#map {
	width:100%;
	height: 100%;
	}

	</style>

	<script src="http://www.google.com/jsapi"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

	<script type="text/javascript">

	var map;


	</script>

	<script type="text/javascript">
	google.load('maps', '3', {
	other_params: 'sensor=false'
	});
	google.setOnLoadCallback(initialize);


	//--------------------------------------------------------------------------------------------

	// Normalizes the coords that tiles repeat across the x axis (horizontally)
	// like the standard Google map tiles.
	function getNormalizedCoord(coord, zoom) {
	var y = coord.y;
	var x = coord.x;

	// tile range in one direction range is dependent on zoom level
	// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
	var tileRange = 1 << zoom;

	// don't repeat across y-axis (vertically)
	if (y < 0 \|\| y >= tileRange) {
	return null;
	}

	// repeat across x-axis
	if (x < 0 \|\| x >= tileRange) {
	x = (x % tileRange + tileRange) % tileRange;
	}

	return {
	x: x,
	y: y
	};
	}


	/** @constructor */
	function GbifMapType(tileSize) {
	this.tileSize = tileSize;
	}

	GbifMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
	var div = ownerDocument.createElement('div');

	var normalizedCoord = getNormalizedCoord(coord, zoom);
	if (!normalizedCoord) {
	return null;
	}

	// http://www.gbif.org/developer/maps
	var url = 'http://api.gbif.org/v0.9/map/density/tile?x=' + normalizedCoord.x + '&y=' + normalizedCoord.y + '&z=' + zoom + '&type=TAXON&key=1';

	url += '&resolution=4'; // 4 pixels

	// colours
	url += '&colors=' + encodeURIComponent(',100,#FFFF0B66\|100,1000,#FC4E0766\|1000,10000,#FC180833\|10000,,#BD000466');


	div.innerHTML = '<img src="' + url + '"/>';
	div.style.width = this.tileSize.width + 'px';
	div.style.height = this.tileSize.height + 'px';

	/*
	div.style.fontSize = '10';
	div.style.borderStyle = 'solid';
	div.style.borderWidth = '1px';
	div.style.borderColor = '#AAAAAA';
	*/
	return div;
	};

	//--------------------------------------------------------------------------------------------
	function initialize() {

	var center = new google.maps.LatLng(0,0);

	map = new google.maps.Map(document.getElementById('map'), {
	zoom: 3,
	center: center,
	mapTypeId: google.maps.MapTypeId.TERRAIN
	});

	// Insert this overlay map type as the first overlay map type at
	// position 0. Note that all overlay map types appear on top of
	// their parent base map.
	map.overlayMapTypes.insertAt(
	0, new GbifMapType(new google.maps.Size(256, 256)));
	}

	/* http://stackoverflow.com/questions/6762564/setting-div-width-according-to-the-screen-size-of-user */
	$(window).resize(function() {
	var windowHeight = $(window).height();
	$('#map').css({'height':windowHeight });
	});


	</script>
	</head>
	<body onload="$(window).resize()">
	<div id="map"></div>
	</body>
	</html>