JSFiddle - React, Tailwind, and code Playground

by Gabor Farkas

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width: 100%; height: 100%;"></div>

CSS

.olControlAttribution {
        right : 0;
        bottom: 0;
        background: rgba(0, 60, 136, 0.3);
        padding: 2px 4px;
        border-radius: 5px 0 0 0;
        color: white;
    }
    .olControlAttribution a {
        color: white;
    }
    .olControlAttribution a:hover {
        color: #FF8000;
    }

JavaScript

var map = new OpenLayers.Map('map');
var osm = new OpenLayers.Layer.OSM();
var params = ['OBS_2000_2010'];

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;
      });

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


 var 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.addLayers([osm, layerGBIF]);
map.zoomToMaxExtent();