Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GBIF data overlayed on Google Maps
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.