index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Leaflet.Spin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.Spin/1.1.0/leaflet.spin.min.js" charset="utf-8"></script>
<style type='text/css'>
#map {
position: absolute;
top:0;
left: 0;
right: 0;
bottom:0;
}
#btn-spin {
position: absolute;
left: 200px;
z-index: 10;
font-size: 1.5em;
z-index: 3000;
}
.help {
font-size: 1.5em;
position: absolute;
top:0;
left: 0;
right: 0;
height: 30px;
z-index: 10;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
margin: 0px;
text-align: center;
z-index: 3000;
}
.help a.sources {
float: left;
margin-left: 50px;
color: white;
}
.help a.logo {
float: right;
}
.help a.logo img {
height: 30px;
}
</style>
</head>
<body>
<p class="help">Leaflet + Spin.js
<a class="sources" href="//github.com/makinacorpus/Leaflet.Spin/">Sources</a>
<a class="logo" href="//makina-corpus.com"><img src="//depot.makina-corpus.org/public/logo.gif"/></a>
</p>
<div id="map"></div>
<button id="btn-spin">Spin Top-Left !</button>
<script type='text/javascript'>
window.onload = function () {
var campus={type:"Feature",properties:{popupContent:"This is the Auraria West Campus",style:{weight:2,color:"#999",opacity:1,fillColor:"#B0DE5C",fillOpacity:.8}},geometry:{type:"MultiPolygon",coordinates:[[[[-105.00432014465332,39.74732195489861],[-105.00715255737305,39.7462000683517],[-105.00921249389647,39.74468219277038],[-105.01067161560059,39.74362625960105],[-105.01195907592773,39.74290029616054],[-105.00989913940431,39.74078835902781],[-105.00758171081543,39.74059036160317],[-105.00346183776855,39.74059036160317],[-105.00097274780272,39.74059036160317],[-105.00062942504881,39.74072235994946],[-105.00020027160645,39.74191033368865],[-105.0007152557373,39.74276830198601],[-105.00097274780272,39.74369225589818],[-105.00097274780272,39.74461619742136],[-105.00123023986816,39.74534214278395],[-105.00183105468751,39.74613407445653],[-105.00432014465332,39.74732195489861]],[[-105.00361204147337,39.74354376414072],[-105.00301122665405,39.74278480127163],[-105.00221729278564,39.74316428375108],[-105.00283956527711,39.74390674342741],[-105.00361204147337,39.74354376414072]]],[[[-105.00942707061768,39.73989736613708],[-105.00942707061768,39.73910536278566],[-105.00685214996338,39.73923736397631],[-105.00384807586671,39.73910536278566],[-105.00174522399902,39.73903936209552],[-105.00041484832764,39.73910536278566],[-105.00041484832764,39.73979836621592],[-105.00535011291504,39.73986436617916],[-105.00942707061768,39.73989736613708]]]]}};
var map = L.map('map').setView([39.74, -105], 14);
L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var layer = L.geoJson().addTo(map);
map.spin(true);
setTimeout(function () {
layer.addData(campus);
map.spin(false);
}, 3000);
document.getElementById('btn-spin').onclick = function () {
map.spin(false);
map.spin(true, {top: 80, left: 50});
setTimeout(function() {map.spin(false);}, 3000);
};
};
</script>
</body>
</html>