How it Works

This is a basic overview of code and action flow in MM, for reference and to learn it myself.

Flow starts at a map: MM.Map. Any action that changes the map state calls map.getRedraw(), which proxies calls to map.draw().

Since 1.0.0, map.draw() is very compact - it only thinks about resizing the map if the page has resized, setting this.coordinate - the 'map state' - and dispatching .draw() functions to all layers.

When layers load tiles, they call draw() on themselves, but for the time being, let's focus on when draw() is due to the map asking.

Each layer looks at the reference coordinate, this.map.coordinate. They find all of the coordinates they need for tiles that fit inside of the map dimensions, and then check to see which tiles or elements that correspond to that coordinate they have, and which they've had for a while and might need to dispose of.

They then make sure that zoom levels other than the current one are hidden, and that they aren't actively requesting tiles that aren't visible.

They then issue requests for new tiles from their requestManager - the central place for dealing with image loading and events. These requests will come back through the layer's getTileComplete() function when they complete.

Finally, each layer calls checkCache(), which clears old and invisible tiles from the cache. The cache is managed by .recentTiles and .recentTilesById, which contain the same data but are necessary to treat tiles as both lists and hashes.

The cache has two limits: the number of tiles on screen, and the max cache size. So very large screens will require a larger cache size than the standard - which is 64 tiles.