/leaflet_marker_fade_in_and_out.html

## leaflet_marker_fade_in_and_out.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Marker Fade</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
 <![endif]-->
</head>

<body>
<h1>Fadein/Fadeout markers</h1>
<div>
   <div id="map" style="width:400px; height:400px;"></div>
</div> <!-- /container -->
<div>
    <button id="add">Add</button>
    <button id="remove">Remove</button>
</div>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>

<script>
    var fadeInMarker = L.Marker.extend({
        onAdd: function() {
            this.setOpacity(0);
            L.Marker.prototype.onAdd.apply(this, arguments);
            if (!this._runningFadeIn) {
                this.fade(0, 1, null);
            }
        },
        fade: function(from, to, callback) {
            var interval = 25,
                msDone = 0,
                ms = 1000,
                id = setInterval(frame, interval),
                currentOpacity = from,
                that = this;

            function frame() {
                that._runningFadeIn = true;
                that.setOpacity(currentOpacity);
                msDone += interval;
                currentOpacity = from + (to - from) * msDone/ms;
                if (msDone >= ms) { // check finish condition
                    clearInterval(id);
                    that.setOpacity(to);
                    that._runningFadeIn = false;
                    if (callback) { callback.call(that._map, that); }
                }
            }
        }
    });

    $(document).ready(function() {
        var map,
            cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
            cloudmadeAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
            marker = null,
            center = [55.879181,-4.290292],
            latlng = L.latLng(center);

        map = new L.Map('map').setView(center, 16).addLayer(cloudmade);
        map.removeLayer = function(layer) {
            if (layer instanceof fadeInMarker) {
                layer.fade(1, 0, L.Map.prototype.removeLayer);
            } else {
                L.Map.prototype.removeLayer.apply(this, arguments);
            }
        }

        function addMarker() {
            if (!marker) {
                marker = new fadeInMarker(latlng, {});
                map.addLayer(marker);
                return marker;
            }
        }

        $("#add").click(function() {
            if (!marker) {
                marker = addMarker();
            }
        });

        $("#remove").click(function() {
            if (marker) {
                map.removeLayer(marker);
                marker = null;
            }
        });
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Marker Fade</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
	<![endif]-->
	</head>

	<body>
	<h1>Fadein/Fadeout markers</h1>
	<div>
	<div id="map" style="width:400px; height:400px;"></div>
	</div> <!-- /container -->
	<div>
	<button id="add">Add</button>
	<button id="remove">Remove</button>
	</div>

	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>

	<script>
	var fadeInMarker = L.Marker.extend({
	onAdd: function() {
	this.setOpacity(0);
	L.Marker.prototype.onAdd.apply(this, arguments);
	if (!this._runningFadeIn) {
	this.fade(0, 1, null);
	}
	},
	fade: function(from, to, callback) {
	var interval = 25,
	msDone = 0,
	ms = 1000,
	id = setInterval(frame, interval),
	currentOpacity = from,
	that = this;

	function frame() {
	that._runningFadeIn = true;
	that.setOpacity(currentOpacity);
	msDone += interval;
	currentOpacity = from + (to - from) * msDone/ms;
	if (msDone >= ms) { // check finish condition
	clearInterval(id);
	that.setOpacity(to);
	that._runningFadeIn = false;
	if (callback) { callback.call(that._map, that); }
	}
	}
	}
	});

	$(document).ready(function() {
	var map,
	cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
	cloudmadeAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
	cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
	marker = null,
	center = [55.879181,-4.290292],
	latlng = L.latLng(center);

	map = new L.Map('map').setView(center, 16).addLayer(cloudmade);
	map.removeLayer = function(layer) {
	if (layer instanceof fadeInMarker) {
	layer.fade(1, 0, L.Map.prototype.removeLayer);
	} else {
	L.Map.prototype.removeLayer.apply(this, arguments);
	}
	}

	function addMarker() {
	if (!marker) {
	marker = new fadeInMarker(latlng, {});
	map.addLayer(marker);
	return marker;
	}
	}

	$("#add").click(function() {
	if (!marker) {
	marker = addMarker();
	}
	});

	$("#remove").click(function() {
	if (marker) {
	map.removeLayer(marker);
	marker = null;
	}
	});
	});
	</script>
	</body>
	</html>