Leaflet onAdd Test

by aidankirrane

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<div id="map"></div>

CSS

#map { height: 300px; }

JavaScript

//SET UP MAP
var baseURL = 'http://{s}.tiles.mapbox.com/v3/bozdoz.map-z05i4vdt/{z}/{x}/{y}.png',
	base = L.tileLayer(baseURL),
    baseMaps = {
		"Minimal" : base,
	},
	overlayMaps = {
	},
	map = L.map('map', {
		layers: [base],
	}).setView([54.9682, -112.675], 5);
L.control.layers(baseMaps, overlayMaps, {position : 'topleft'}).addTo(map);
L.control.scale().addTo(map);

// BEGIN TEST
L.TileLayer.withOnAdd = L.TileLayer.Canvas.extend({
	initialize: function (options, data) {
        this.drawTile = function (tile, tilePoint, zoom) {
            var ctx = {
                canvas: tile,
                tilePoint: tilePoint,
                zoom: zoom
            };
            console.log('With onAdd: ',ctx); // DOES NOT FIRE
        };
    },
    onAdd: function(map){
        this.map = map;   
        map.on('moveend',this._log, this);
    },
    _log: function(){
        console.log('moved map'); //FIRES
    },
});

L.TileLayer.withoutOnAdd = L.TileLayer.Canvas.extend({
	initialize: function (options, data) {
        this.drawTile = function (tile, tilePoint, zoom) {
            var ctx = {
                canvas: tile,
                tilePoint: tilePoint,
                zoom: zoom
            };
            console.log('Without onAdd: ',ctx); //FIRES FOR EACH TILE
        };
    },
});

var withit = new L.TileLayer.withOnAdd();
var withoutit = new L.TileLayer.withoutOnAdd();

            map.addLayer(withit);
            map.addLayer(withoutit);