ThomasG77/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Basic OSM Example</title>
    <link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
    <script src="http://dev.openlayers.org/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer, layerGBIF;

        var params = ['SP_1900_1910','OBS_1900_1910','OTH_1900_1910','SP_1910_1920',
                     'OBS_1910_1920','OTH_1910_1920','SP_1920_1930','OBS_1920_1930',
                     'OTH_1920_1930','SP_1930_1940','OBS_1930_1940','OTH_1930_1940',
                     'SP_1940_1950','OBS_1940_1950','OTH_1940_1950','SP_1950_1960',
                     'OBS_1950_1960','OTH_1950_1960','SP_1960_1970','OBS_1960_1970',
                     'OTH_1960_1970','SP_1970_1980','OBS_1970_1980','OTH_1970_1980',
                     'SP_1980_1990','OBS_1980_1990','OTH_1980_1990','SP_1990_2000',
                     'OBS_1990_2000','OTH_1990_2000','SP_2000_2010','OBS_2000_2010',
                     'OTH_2000_2010','SP_2010_2020','OBS_2010_2020','OTH_2010_2020',
                     'SP_NO_YEAR','OBS_NO_YEAR','OTH_NO_YEAR','LIVING',
                     'FOSSIL','SP_PRE_1900','OBS_PRE_1900','OTH_PRE_1900'];

        var countries = ['ML'];

        var getMyTileUrl = function getMyTileUrl(options) {
            var options = options;
            return function(bounds) {
                var res = this.map.getResolution();
                var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
                var z = this.map.getZoom();

                var country_params = options.countries.map(function(el) {
                    return 'key='+ el;
                })
                var layer_params = options.layers.map(function(el) {
                    return 'layer='+ el;
                })

                return this.url + '?' + 'x=' + x + '&y=' + y + '&z=' + z + '&' +
                    'type=COUNTRY' + '&' + country_params.join('&') + '&' + layer_params.join('&')+ '&palette=yellows_reds';
            }
        }

        function init(){
            map = new OpenLayers.Map( 'map');
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            layerGBIF = new OpenLayers.Layer.XYZ("GBIF",
                'http://api.gbif.org/v1/map/density/tile',
                {
                    name: 'layer name',
                    sphericalMercator: true,
                    getURL: getMyTileUrl({layers: params, countries: countries}),
                    type: 'png',
                    isBaseLayer: false,
                    transitionEffect: 'resize',
                    buffer: 3
                });
            map.addLayer(layer);
            map.addLayer(layerGBIF);
            map.setCenter(
                new OpenLayers.LonLat(-4.1306295470793835, 11.212624328831367).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 5
            );
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Basic OSM Example</h1>

    <div id="tags">
        openstreetmap basic light
    </div>

    <div id="shortdesc">Show a Simple OSM Map</div>

    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>This example shows a very simple OSM layout with minimal controls.</p>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>OpenLayers Basic OSM Example</title>
	<link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
	<link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
	<script src="http://dev.openlayers.org/OpenLayers.js"></script>
	<script type="text/javascript">
	var map, layer, layerGBIF;

	var params = ['SP_1900_1910','OBS_1900_1910','OTH_1900_1910','SP_1910_1920',
	'OBS_1910_1920','OTH_1910_1920','SP_1920_1930','OBS_1920_1930',
	'OTH_1920_1930','SP_1930_1940','OBS_1930_1940','OTH_1930_1940',
	'SP_1940_1950','OBS_1940_1950','OTH_1940_1950','SP_1950_1960',
	'OBS_1950_1960','OTH_1950_1960','SP_1960_1970','OBS_1960_1970',
	'OTH_1960_1970','SP_1970_1980','OBS_1970_1980','OTH_1970_1980',
	'SP_1980_1990','OBS_1980_1990','OTH_1980_1990','SP_1990_2000',
	'OBS_1990_2000','OTH_1990_2000','SP_2000_2010','OBS_2000_2010',
	'OTH_2000_2010','SP_2010_2020','OBS_2010_2020','OTH_2010_2020',
	'SP_NO_YEAR','OBS_NO_YEAR','OTH_NO_YEAR','LIVING',
	'FOSSIL','SP_PRE_1900','OBS_PRE_1900','OTH_PRE_1900'];

	var countries = ['ML'];

	var getMyTileUrl = function getMyTileUrl(options) {
	var options = options;
	return function(bounds) {
	var res = this.map.getResolution();
	var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
	var z = this.map.getZoom();

	var country_params = options.countries.map(function(el) {
	return 'key='+ el;
	})
	var layer_params = options.layers.map(function(el) {
	return 'layer='+ el;
	})

	return this.url + '?' + 'x=' + x + '&y=' + y + '&z=' + z + '&' +
	'type=COUNTRY' + '&' + country_params.join('&') + '&' + layer_params.join('&')+ '&palette=yellows_reds';
	}
	}

	function init(){
	map = new OpenLayers.Map( 'map');
	layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
	layerGBIF = new OpenLayers.Layer.XYZ("GBIF",
	'http://api.gbif.org/v1/map/density/tile',
	{
	name: 'layer name',
	sphericalMercator: true,
	getURL: getMyTileUrl({layers: params, countries: countries}),
	type: 'png',
	isBaseLayer: false,
	transitionEffect: 'resize',
	buffer: 3
	});
	map.addLayer(layer);
	map.addLayer(layerGBIF);
	map.setCenter(
	new OpenLayers.LonLat(-4.1306295470793835, 11.212624328831367).transform(
	new OpenLayers.Projection("EPSG:4326"),
	map.getProjectionObject()
	), 5
	);
	}
	</script>
	</head>
	<body onload="init()">
	<h1 id="title">Basic OSM Example</h1>

	<div id="tags">
	openstreetmap basic light
	</div>

	<div id="shortdesc">Show a Simple OSM Map</div>

	<div id="map" class="smallmap"></div>

	<div id="docs">
	<p>This example shows a very simple OSM layout with minimal controls.</p>
	</div>
	</body>
	</html>