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="//dev.openlayers.org/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="//dev.openlayers.org/examples/style.css" type="text/css">
<script src="//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",
'//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>