leaflet-tilelayer-vector/TileLayer.Progress.js at dev · nrenner/leaflet-tilelayer-vector · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/*
 * Loading progress info layer for L.TileLayer.Vector
 */
L.TileLayer.Progress = L.TileLayer.Div.extend({
    _adding: false,

    /* key hash of vector tiles currently loading {String: true} */
    _loadingTiles: {},

    initialize: function (vectorLayer) {
        L.TileLayer.Div.prototype.initialize.call(this, vectorLayer);
    },

    onAdd: function (map) {
        this._adding = true;
        map.on('layerremove', this._onVectorLayerRemove, this);
        L.TileLayer.Div.prototype.onAdd.apply(this, arguments);
        this._adding = false;
    },

    onRemove: function (map) {
        L.TileLayer.Div.prototype.onRemove.apply(this, arguments);
        this._loadingTiles = {};
    },

    createTile: function (coords) {
         var tile = document.createElement('div'),
            key = this._tileCoordsToKey(coords),
            vectorTile;

        tile.style.backgroundColor = 'rgba(128, 128, 128, 0.3)';
        tile.style.border = '1px solid rgba(128, 128, 128, 0.8)';
        tile.style.boxSizing = 'border-box';
        tile.style.MozBoxSizing = 'border-box';

        L.DomUtil.addClass(tile, 'leaflet-tile-loaded');

        if (!this._loadingTiles[key]) {
            this._hide(tile);
        }

        // check for already loading tiles, because initial tileloadstart
        // events might have been missed when layer is added
        if (this._adding) {
            vectorTile = this.vectorLayer._tiles[key];
            if (vectorTile && vectorTile.loading) {
                this._show(tile);
            }
        }

        return tile;
    },

    _tileReady: function (err, tile) {
        // override to disable adding leaflet-tile-loaded class
    },

    _onVectorLayerRemove: function(evt) {
        if (evt.layer === this.vectorLayer) {
            this._hideAll();
        }
    },

    _hideAll: function() {
        for (var key in this._tiles) {
            var tile = this._tiles[key];
            this._hide(tile);
        }
    },

    onTileLoadStart: function(key) {
        var tile = this._tiles[key];
        if (tile) {
            this._show(tile);
        } else {
            this._loadingTiles[key] = true;
        }
    },

    onTileLoad: function(key) {
        var tile = this._tiles[key];
        this._hide(tile);
        delete this._loadingTiles[key];
    },

    onTileUnload: function(key) {
        this.onTileLoad(key);
    },

    onTileError: function(key) {
        var tile = this._tiles[key];
        if (tile) {
            tile.style.backgroundColor = 'rgba(128, 128, 128, 0.7)';
            tile.style.border = 'none';
        }
        delete this._loadingTiles[key];
    },

    _show: function(tile) {
        if (tile) {
            tile.classList.add('leaflet-tile-loaded');
        }
    },

    _hide: function(tile) {
        if (tile) {
            tile.classList.remove('leaflet-tile-loaded');
        }
    }
});