Skip to content

Instantly share code, notes, and snippets.

@ebrelsford
Created February 8, 2014 22:39
Show Gist options
  • Save ebrelsford/8891414 to your computer and use it in GitHub Desktop.
Save ebrelsford/8891414 to your computer and use it in GitHub Desktop.
Example of Leaflet.loading not working when adding a layer
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/ebrelsford/Leaflet.loading/master/src/Control.Loading.css" />
<script src="https://rawgithub.com/ebrelsford/Leaflet.loading/master/src/Control.Loading.js"></script>
<script>
function addTileLayer(map) {
return L.tileLayer(
'http://kcwu.csie.org/~kcwu/tmp/osm/history-tile/2007-08-01/{z}/{x}/{y}.png', {
maxZoom: 13,
}).addTo(map);
}
function initMap() {
var map = L.map('map', {
center: new L.LatLng(24, 121),
zoom: 8,
minZoom: 5,
maxZoom: 13,
loadingControl: true
});
L.tileLayer('http://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 13,
}).addTo(map);
return map;
}
$(function() {
var map = initMap();
$('#button').click(function() {
addTileLayer(map);
return false;
});
});
</script>
</head>
<body>
<div style="height: 100%;">
<div style="width: 100%;">
<a href="#" id="button">Add layer</a>
</div>
<div id="map" style="height: 100%;"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment