<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" type="text/css"> <title>DeFROST Leaflet example</title>
<script type="text/javascript">
var token = '<YOUR_ACCESS_TOKEN>';
var defrost_maps_url = 'https://maps.defrost.io/{z}/{x}/{y}.png';
L.TileLayer.headers = L.TileLayer.extend({
createTile(coords, done) {
var tile = document.createElement('img');
L.DomEvent.on(tile, 'load', L.Util.bind(this._tileOnLoad, this, done, tile));
L.DomEvent.on(tile, 'error', L.Util.bind(this._tileOnError, this, done, tile));
if (this.options.crossOrigin || this.options.crossOrigin === '') {
tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons
http://www.w3.org/TR/WCAG20-TECHS/H67
Set role="presentation" to force screen readers to ignore this
https://www.w3.org/TR/wai-aria/roles#textalternativecomputation
tile.setAttribute('role', 'presentation');
// Custom code to query tiles using Bearer Authentication headers
var url = this.getTileUrl(coords);
var client = new XMLHttpRequest();
client.responseType = "arraybuffer";
client.setRequestHeader("Authorization", "Bearer " + token);
client.onload = function () {
var arrayBufferView = new Uint8Array(this.response);
var blob = new Blob([arrayBufferView], { type: 'image/png' });
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
L.tileLayer.headers = (url, options) => new L.TileLayer.headers(url, options);
map = L.map('map').setView([46.0207, 7.7491], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
L.tileLayer.headers(defrost_maps_url, {
attribution: 'Snow data © <a href="https://www.defrost.io/">WeGaw Ltd.</a>',
crossOrigin: 'anonymous',