Created
March 7, 2014 13:28
-
-
Save rdmpage/9411457 to your computer and use it in GitHub Desktop.
GBIF data overlayed on Google Maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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