Commit 106867d2 authored by Iván Sánchez Ortega's avatar Iván Sánchez Ortega

Initial commit

parents
"THE BEER-WARE LICENSE":
<ivan@sanchezortega.es> wrote this file. As long as you retain this notice you
can do whatever you want with this stuff. If we meet some day, and you think
this stuff is worth it, you can buy me a beer in return.
// Adds a fade-out animation to grid layers when they're removed from the map
(function(){
var gridProto = L.GridLayer.prototype;
var onRemoveProto = gridProto.onRemove;
var onAddProto = gridProto.onAdd;
var fadeDuration = 200;
L.GridLayer.include({
onAdd: function(map) {
if (this._fadeOutTime) {
var now = performance.now() || (+new Date());
L.Util.cancelAnimFrame(this._fadeOutFrame);
this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now;
L.Util.requestAnimFrame(this._fadeIn, this)
} else {
onAddProto.call(this, map);
}
},
onRemove: function(map) {
if (this._fadeOutTime) {
// We're removing this *again* quickly after removing and re-adding
var now = performance.now() || (+new Date());
this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now;
}
this._fadeOutTime = (performance.now() || (+new Date())) + fadeDuration * 2;
this._fadeOutMap = this._map;
L.Util.requestAnimFrame(this._fadeOut, this)
},
_fadeOut: function(){
if (!this._fadeOutTime || !this._container) { return; }
var now = performance.now() || (+new Date());
var opacity = Math.min((this._fadeOutTime - now) / fadeDuration, 1);
// console.log('fadeout:', opacity);
if (opacity < 0) {
this._fadeOutTime = false;
onRemoveProto.call(this, this._fadeOutMap);
return;
}
L.DomUtil.setOpacity(this._container, opacity * this.options.opacity);
this._fadeOutFrame = L.Util.requestAnimFrame(this._fadeOut, this);
},
// Only runs when the gridlayer is quickly re-added while it's being faded out
_fadeIn: function _fadeIn(){
if (!this._fadeOutTime || !this._container) { return; }
var now = performance.now() || (+new Date());
var opacity = (now - this._fadeOutTime) / fadeDuration;
// console.log('fadein:', opacity);
if (opacity > 1) {
this._fadeOutTime = false;
return;
}
L.DomUtil.setOpacity(this._container, opacity * this.options.opacity);
L.Util.requestAnimFrame(this._fadeIn, this);
}
});
})();
# Leaflet.Marker.SlideTo
A plugin for [LeafletJS](http://www.leafletjs.com) to fade out grid layers when removed.
Tested with Leaflet 1.0.0-rc3. Do not expect this to work in Leaflet 0.7.x.
See the [demo](http://ivansanchez.gitlab.io/Leaflet.GridLayer.FadeOut/demo.html).
### API
This Leaflet plugin is completely transparent, and adds no extra methods or options.
To use it, simply make sure that you have some gridlayers / tilelayers that are removed from the map. This can be done by using a layers control with several base layers.
### Installation through `npm`
```
npm install leaflet.gridlayer.fadeout
```
### Usage through unpkg
```
<script src='https://unpkg.com/leaflet.gridlayer.fadeout@0.1.0/Leaflet.GridLayer.FadeOut.js'></script>
```
### Legalese
"THE BEER-WARE LICENSE":
<ivan@sanchezortega.es> wrote this file. As long as you retain this notice you
can do whatever you want with this stuff. If we meet some day, and you think
this stuff is worth it, you can buy me a beer in return.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet.GridLayer.FadeOut</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-providers@1.1.15/leaflet-providers.js"></script>
<script type="text/javascript" src="Leaflet.GridLayer.FadeOut.js"></script>
<style>
#map {
width: 100vw;
height: 100vh;
}
body {margin:0;}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var layers = {};
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) {
layers[provider + '.' + variant] = L.tileLayer.provider(provider + '.' + variant);
}
} else {
layers[provider] = L.tileLayer.provider(provider);
}
}
var map = L.map('map').fitWorld();
L.control.layers(layers, {}, {collapsed: false}).addTo(map);
layers[ Object.keys(layers)[0] ].addTo(map);
</script>
</body>
</html>
{
"name": "leaflet.gridlayer.fadeout",
"version": "0.1.0",
"description": "A plugin for LeafletJS to to fade out grid layers when removed.",
"main": "Leaflet.GridLayer.FadeOut.js",
"repository": {
"type": "git",
"url": "https://gitlab.com/IvanSanchez/Leaflet.GridLayer.FadeOut.git"
},
"keywords": [
"leaflet",
"animation"
],
"author": "Iván Sánchez Ortega <ivan@sanchezortega.es>",
"license": "Beerware"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment