Export to Web Tiles Tutorial – Avenza Systems

The Export Web Tiles feature generates image tiles that can be used for online map purposes. An HTML file is created with the web tiles which consists of a web map with the tiles already in place. Use the Web Tile Export Options dialog box to adjust tile options.

1.In Adobe Photoshop, open boston-east.tif from the Tutorial Data folder.

2.On the Geographic Imager panel, click the Export Web Tiles button.

Before an image can be exported to web tiles, it must be in the WGS 84/Pseudo-Mercator coordinate system. The Export Web Tiles feature will conveniently and temporarily transform the image from Massachusetts Mainland Zone to WGS 84/Pseudo-Mercator so that it is compatible.

3.Click Transform the image and proceed with the export.

webtiles_message

4.On the Export Document to Web Tiles dialog box, choose OpenStreetMap from the Map Provider drop-down list.

5.In the Dataset name box, rename it to Boston.

6.For the Folder, click Browse and create a folder called WebTiles in the Tutorial Data folder.

webtiles_destinationsettings

7.On the Zoom Level tab, choose a Maximum zoom of Level 16 and click the Set maximum zoom option.

webtiles_zoomlevels

A total of 34 web tiles will be created. The Maximum zoom level has a map scale of 1:9,028. The Minimum zoom is Level 1 which has a map scale of 1:295,829,355.45.

8.Click the Options tab. Choose PNG from the Image format drop-down and change the Compression to 0.

webtiles_optionstab

The Compression value of 0 will ensure a high image quality.

9.In the Post Export tab, click the Open destination folder option to enable it.

10. Click the Advanced button. Choose a World export reference file, then click OK.

webtiles_worldreference

Creating a reference file is not required, but may be useful if the web tiles were to be used elsewhere.

11. Click Export to begin the export process.

information Note that some providers (like Bing and Google Maps) require you to register for an API key before export.

After the web tile export completes, the WebTiles export folder opens.

webtiles_files

In the export folder, several new folders were created (1 to 16). These folders hold the PNG images that make up the web tiles and represent the 16 zoom levels you specified. Also included in the folders are TFW world reference files associated with each tile image.

12. Double-click Boston.html to open it in a web browser.

information Note that some web browsers may not allow viewing of local files.

webtiles_complete

The Boston.html file contains the web map that includes all the tiles exported from Geographic Imager.