Example 10: Using high-resolution background maps during zooming

This example illustrates the use of the "high_res_basemap" parameter in a file_of_filenames to name alternate, higher resolution images to be used when the user zooms in past a (series of) specified zoom factors.

This technique can be used to provide higher resolution and more detailed GIS-type information as the user zooms in, but using a limited number of images without having to always be retrieving files from a server.

Typical implementations provide one or two high resolution "basemap" images which contain "background", and the same number of one of the overlays, usually containing roads and/or geo-political boundaries.

The configuration file looks like this:

file_of_filenames = fof10.txt zoom_scale = 2 controls = zoom controls_style = background-color:green; buttons_style=padding:5px;background:linear-gradient(white,blue);vertical-align:middle;margin-left:10px;font-family:arial;font-size:18px;padding:5px;border-radius:10px; zoom_style=width:120px; Note the zoom_scale parameter which sets the amount of zoom each time the user clicks.

The file_of_filenames is simple....

high_res_basemap=CHI-2.png, CHI-3.png high_res_zoom=2,4 CHI-1.png The high_res_basemape names the list of image files to swap in. If you use an overlay, the format is:
high_res_overlay = N, file1, file2, ...
where N is the associated overlay number.

The high_res_zoom parameter lists the resolution multipliers for each image. In this case, "2" means that the image CHI-2.png is 2x the size of the original image. The "4" means that the 2nd named image (CHI-3.png) is 4x the size and resolution of the original image. In all cases, the projections and geographic coverage must be identical for all images.

We suggest you zoom in on a spot along the lake shore, southeast of "Chicago" -- on the low-resolution image, it looks like a small island closer to Gary. (This is, Indiana Harbor...).


Go To Front Page
Next Example
This webapp Copyright© 2014- by Tom Whittaker