Tutorial - Multiple Frame Large Image

When switching between tile sets, using two layers can result in a smooth transition. This is demonstrated with a multiple frame large image.

Define some HTML with the divs for the map and controls.

Step 1
Active
Inactive

Define some CSS to position the controls at the top of the window.

Step 2
Active
Inactive

Create a map with two tile layers and switch between them when changing the frame control.

Fetch information about the image from a server. This includes the image's size in pixels, the tile size, and the number of frames.

We create two layers and swap between them when the frame control is changed.

Step 3
Active
Inactive

As a contrasting example, if only one layer is used the image will blink when the frame is changed.

Step 3-B
Active
Inactive