Show a spinner on the map using Spin.js
JavaScript HTML CSS Other
Latest commit 321db91 Nov 30, 2016 @SBats SBats Update Readme

README.md

Leaflet.Spin

Shows a nice spin cursor on the map. See online demo.

This plugin requires Spin.js.

Install

NPM

npm install leaflet-spin

Bower

bower install leaflet-spin

Manually

Download the latest release and include it in your app

Usage

This plugin can be loaded with AMD/CommonJS.

map.spin(true);  // on
...
map.spin(false);  // off

Spin.js options

You can control apparence of wheel by passing options on first spin() call.

map.spin(true, {lines: 13, length: 40});

More details on available options...

With AJAX / JQuery

map.spin(true);
$.ajax({url: 'http://server/api/'})
.done(function() {
  map.spin(false);
})
.error(function () {
  map.spin(false);
});

Using events:

var layer = L.geoJson(null).addTo(map);

layer.fire('data:loading');
$.getJSON('http://server/path.geojson', function (data) {
    layer.fire('data:loaded');
    layer.addData(data);
});

With Leaflet.AJAX

var layer = L.geoJson.ajax();
layer.addUrl('http://server/path.geojson');

Development

You can use example folder for testing.

npm run release   # minify js and copy leaflet.spin.min.js in example folder
npm run deploy    # deploy to gh-pages

Changelog

1.1.0

Update export and extend system

1.0.0

Update structure with official Leaflet plugin rules

0.1.1

Update bower dependencies

0.1.0

Initial version

Authors

Makina Corpus