Skip to content

Instantly share code, notes, and snippets.

@timrobertson100

timrobertson100/demo.html

Last active August 26, 2015 08:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timrobertson100/2e8777fc914380c4ca62 to your computer and use it in GitHub Desktop.
Save timrobertson100/2e8777fc914380c4ca62 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of adjusting map for Fede
Raw
demo.html
<!DOCTYPE html>
<html style="width: 99%; height: 99%; min-height: 99%;">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body style="width: 100%; height: 100%; min-height: 100%;">
<div id="map" style="width: 100%; height: 100%; min-height: 100%;"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script>
var map = L.map('map', { zoomControl:false }).setView([0, 0], 0);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/timrobertson100.map-x2mlizjd/{z}/{x}/{y}.png', {
maxZoom: 14,
attribution: "Mapbox, <a href='http://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap contributors</a>"
}).addTo(map);
var baseURL = 'http://apps2.gbif-uat.org:9094/map/occurrence/occurrence.png?&resolution=1&x={x}&y={y}&z={z}&palette=yellows_reds&gridLevel=';
var gbif = L.tileLayer(baseURL + '3', {
maxZoom: 14,
attribution: "GBIF.org"
});
gbif.addTo(map);
// set up a change listener to adjust the grid level on zooming
map.on('zoomanim', function(event) {
var newGridLevel = 1 + event.zoom; // for demo only
// set some limits
if (newGridLevel > 4) newGridLevel = 4;
if (newGridLevel < 3) newGridLevel = 3;
gbif.setUrl(baseURL + newGridLevel);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment