jieter · August 29, 2015 14:16
diff --git a/index-https.html b/index-https.html
 <!doctype html>
 <html lang="en">
 <head>
 	<title>Leaflet Provider Demo</title>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />

 	<style>
 		html {
 			height: 100%;
 			-moz-box-sizing: border-box;
 			-webkit-box-sizing: border-box;
 			box-sizing: border-box;
 			vertical-align: baseline;
 		}
 		.map { width: 30%; height: 100px; float: left; margin-right: 1%; }

 		.fail {
 			color: red;
 		}
 		.ok {
 			color: green;
 		}
 		h2 { clear: both;}

 	</style>
 	<!--Fork Me on Github ribbon, we're using the awsome version from simonwhitaker available at https://github.com/simonwhitaker/github-fork-ribbon-css  -->
 	<link rel="stylesheet" href="../css/gh-fork-ribbon.css" />
 	<!--[if IE]>
 		<link rel="stylesheet" href="../css/gh-fork-ribbon.ie.css" />
 	<![endif]-->
 	<link rel="stylesheet" href="highlightjs/github.css">
 	<link rel="stylesheet" href="control.layers.minimap.css">
 </head>
 <body>
 	<div class="github-fork-ribbon-wrapper right">
 		<div class="github-fork-ribbon">
 			<a href="https://github.com/leaflet-extras/leaflet-providers">Fork me on GitHub</a>
 		</div>
 	</div>

 	<h1>Testing provider protocols</h1>
 	<table id="list">
 		<tr><th>Provider</th><th>HTTPS</th></tr>
 	</table>
 	<div id="maps"></div>

 	<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>
 	<script src="../leaflet-providers.js"></script>

 	<script>
 		L.TileLayer.prototype._tileOnError = function () {
 			var layer = this._layer;
 			if (layer.err_container) {
 				layer.err_container.innerHTML = '<span class="fail">not supported</span>';
 			}
 		}

 		var list = L.DomUtil.get('list');
 		var container = L.DomUtil.get('maps');

 		function addLayer(provider) {
 			var layer = L.tileLayer.provider(provider);
 			var url = layer._url.replace('{variant}', layer.options.variant);
 			var options = layer.options;

 			if (url.indexOf('http:') == 0) {
 				url = url.slice(5);
 			} else if (url.indexOf('https:') == 0) {
 				url = url.slice(6);
 			}

 			var row = L.DomUtil.create('tr', '', list);
 			row.id = provider;
 			L.DomUtil.create('td', '', row).innerHTML = provider;

 			var result = L.DomUtil.create('td', '', row);
 			var but = L.DomUtil.create('button', '', result);
 			but.innerHTML = 'test';

 			L.DomEvent.on(but, 'click', function() {
 				result.innerHTML = 'testing...';
 				container.innerHTML = '';
 				var map1 = L.map(L.DomUtil.create('div', 'map', container)).setView([52, 4], 9);
 				var http_layer = L.tileLayer('http:' + url, options)
 				map1.addLayer(http_layer);

 				var map2 = L.map(L.DomUtil.create('div', 'map', container)).setView([52, 4], 9);
 				var https_layer = L.tileLayer('https:' + url, options);

 				map2.addLayer(https_layer);

 				https_layer.err_container = result;
 				https_layer.on('load', function () {
 					result.innerHTML = '<span class="ok">seems to be OK</span>';
 				});
 			});
 		}

 		for (var provider in L.TileLayer.Provider.providers) {
 			if (L.TileLayer.Provider.providers[provider].variants) {
 				for (var variant in L.TileLayer.Provider.providers[provider].variants) {
 					addLayer(provider + '.' + variant);
 				}
 			} else {
 				addLayer(provider);
 			}
 		}

 	</script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Leaflet Provider Demo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />

	<style>
	html {
	height: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: baseline;
	}
	.map { width: 30%; height: 100px; float: left; margin-right: 1%; }

	.fail {
	color: red;
	}
	.ok {
	color: green;
	}
	h2 { clear: both;}

	</style>
	<!--Fork Me on Github ribbon, we're using the awsome version from simonwhitaker available at https://github.com/simonwhitaker/github-fork-ribbon-css -->
	<link rel="stylesheet" href="../css/gh-fork-ribbon.css" />
	<!--[if IE]>
	<link rel="stylesheet" href="../css/gh-fork-ribbon.ie.css" />
	<![endif]-->
	<link rel="stylesheet" href="highlightjs/github.css">
	<link rel="stylesheet" href="control.layers.minimap.css">
	</head>
	<body>
	<div class="github-fork-ribbon-wrapper right">
	<div class="github-fork-ribbon">
	<a href="https://github.com/leaflet-extras/leaflet-providers">Fork me on GitHub</a>
	</div>
	</div>

	<h1>Testing provider protocols</h1>
	<table id="list">
	<tr><th>Provider</th><th>HTTPS</th></tr>
	</table>
	<div id="maps"></div>

	<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>
	<script src="../leaflet-providers.js"></script>

	<script>
	L.TileLayer.prototype._tileOnError = function () {
	var layer = this._layer;
	if (layer.err_container) {
	layer.err_container.innerHTML = '<span class="fail">not supported</span>';
	}
	}

	var list = L.DomUtil.get('list');
	var container = L.DomUtil.get('maps');

	function addLayer(provider) {
	var layer = L.tileLayer.provider(provider);
	var url = layer._url.replace('{variant}', layer.options.variant);
	var options = layer.options;

	if (url.indexOf('http:') == 0) {
	url = url.slice(5);
	} else if (url.indexOf('https:') == 0) {
	url = url.slice(6);
	}

	var row = L.DomUtil.create('tr', '', list);
	row.id = provider;
	L.DomUtil.create('td', '', row).innerHTML = provider;

	var result = L.DomUtil.create('td', '', row);
	var but = L.DomUtil.create('button', '', result);
	but.innerHTML = 'test';

	L.DomEvent.on(but, 'click', function() {
	result.innerHTML = 'testing...';
	container.innerHTML = '';
	var map1 = L.map(L.DomUtil.create('div', 'map', container)).setView([52, 4], 9);
	var http_layer = L.tileLayer('http:' + url, options)
	map1.addLayer(http_layer);

	var map2 = L.map(L.DomUtil.create('div', 'map', container)).setView([52, 4], 9);
	var https_layer = L.tileLayer('https:' + url, options);

	map2.addLayer(https_layer);

	https_layer.err_container = result;
	https_layer.on('load', function () {
	result.innerHTML = '<span class="ok">seems to be OK</span>';
	});
	});
	}

	for (var provider in L.TileLayer.Provider.providers) {
	if (L.TileLayer.Provider.providers[provider].variants) {
	for (var variant in L.TileLayer.Provider.providers[provider].variants) {
	addLayer(provider + '.' + variant);
	}
	} else {
	addLayer(provider);
	}
	}

	</script>
	</body>
	</html>