Tutorial - Large Image

Large images can be displayed from a tile server.

Define some HTML with the divs for the map and an information box to show coordinates.

Define some CSS to position the coordinates in the top right of the window.

We wrap our code in async so we can use await. We could have use a then function instead.

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

Once we have the image information, pixelCoordinateParams is used to get some default parameters for the map and an osm tile layer. These could be modified if needed, such as to allow zooming in further. We create a map and layer with these parameters and the tile url.

We also bind the mousemove event to print pixel coordinates in the image space.