Leaflet.functionaltilelayer Deferred Example

by ismyrnow

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://ismyrnow.github.com/Leaflet.functionaltilelayer/src/leaflet.functionaltilelayer.js"></script>
<div id="map" style="position:absolute;width:80%;height:50%;"></div>

JavaScript

var funcLayer = new L.TileLayer.Functional(function (view) {
    var deferred = new jQuery.Deferred();
    $.ajax({
        url: 'http://jsfiddle.net/echo/jsonp/',
        data: { url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{y}/{x}.jpg' },
        dataType: 'jsonp',
        success: function(response) {
            // Resolve the defered to return the URL
            var url = response.url
                .replace('{z}', view.zoom)
                .replace('{x}', view.tile.row)
                .replace('{y}', view.tile.column)
                .replace('{s}', view.subdomain);
            deferred.resolve(url);
        }
    });
    return deferred;
}, {
    subdomains: '1234'
});

var map = new L.Map('map', {
    center: new L.LatLng(42.35, -71.05),
    zoom: 15,
    layers: [funcLayer]
});