1. Map Curators’ Workshop 2009
From paper to screen:
Putting maps on the web
Christopher Fleet <c.fleet@nls.uk>
Klokan Petr Přidal <klokan@klokan.cz>
Edinburgh, 9-10th September, 2009
2. Main goal of this workshop:
• Present a complete workflow for:
“Bartholomew 1912 map of Edinburgh”
• From scanning, image publishing and
georeferencing up to the online map overlays
• Promote software you can use for free
• You should be able to reproduce this workflow
• Presented workflow is not the only one. There are
different ways how to achieve the same goal.
3. Workshop structure
1 From paper to computer
2 Web presentation
3 Georeferencing
4 Online publishing of maps
4. 1. From Paper to Computer
A. Image Capture : scanners and cameras
B. Digital Images
5. 1. From Paper to Computer
A. Image Capture : scanners and cameras
Overhead studio cameras
Sheet-feed scanners
Flatbed scanners
Sensors
20. 1. From Paper to Computer
B. Digital Images
Resolution
Pixel bit-depth
Colour
File formats
Software
21. Pixel bit depth - the number of values for any pixel
•1 bit - 2 values - Black or white
•8 bit - 256 shades (of grey or colour). Effectively, a palette of 256 colours
•24 bit RGB (256 levels for each red, green and blue channel) - approx 17 million
colours (2563)
Most archival/preservation colour imaging uses 24-bit colour. Higher bit levels
allow greater colour precision, but such precision may not justify exponentially
larger file sizes.
26. Resolution –
the spatial detail or number of pixels in an image
Optical (true) resolution is the inherent resolution of the
scanner based on the size of the imaging sensor and the
magnification of the optical system.
Interpolated resolution is a synthetic or calculated
resolution that artificially increases the original optical
captured resolution by image processing.
27. 1. From Paper to Computer
B. Digital Images
Resolution
Pixel bit-depth
Colour
File formats
Software
28. Additive colour –
Subtractive colour –
light based - scanners,
cameras, monitors print and paper based
35. 1. From Paper to Computer
B. Digital Images
Resolution
Pixel bit-depth
Colour
File formats
Software
36. File formats – masters, derivatives, and compression
Formats for preservation masters:
TIFF (Tagged Image File Format) - lossless
PNG (Portable Network Graphic) - lossless
JPEG2000 or JP2 (Joint Photographic Experts Group)
Formats for derivatives (display/distribution):
GIF (Graphics Interchange Format) - lossy
JPEG - lossy
TIFF with (Lempel-Ziv-Welch compression) -lossy
Wavelet-based compression:
JPEG2000 - can choose lossy or lossless versions
MrSID (Multi-resolution Seamless Image Database), DjVu or ECW (Enhanced
Compressed Wavelet - lossy
37. Calculating image sizes (of uncompressed TIFF images)
Use formula: (height x width x bit depth x dpi2) / 8 = size in Kb
eg. for a 24 x 36" map
in greyscale at 200 dpi - 24" x 36" x 8 x 2002 = 35 Mb
in colour at 200 dpi - 24" x 36" x 24 x 2002 = 103 Mb
in colour at 300 dpi - 24" x 36" x 24 x 3002 = 233 Mb
in colour at 400 dpi - 24" x 36" x 24 x 4002 = 415 Mb
Maps are often much larger! A 48 x 50” document scanned in colour at
400 dpi will generate a 1.1 Gb TIFF file.
38. 1. From Paper to Computer
B. Digital Images
Resolution
Pixel bit-depth
Colour
File formats
Software
45. Open source software for processing and
presentation of scanned images
Standard images
• Gimp (alternative to Adobe Photoshop)
ImageMagic and Irfanview (batch processing)
Stitching and correcting images
• Hugin, AutoStitch, Enblend (PanoTools)
Large images of over 10,000 pixels
• NIP2 and VIPS library
46. NIP2 and VIPS library
• Free software (GPL) for Windows/Mac/Linux
• Processing of images with unlimited size
• Support for High Dynamic Range images
• Correct colour handling with ICC profiles
• A Graphical User Interface “Excel for images” changeable steps
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58. ICC Profile
• LProf
– Creation ICC profiles for scaners, monitors and printers
– OpenSource: http://lprof.sf.net/
• VIPS
– Can create an ICC profile as well
– Conversion of different ICCs
59. Workshop structure
1 From paper to computer
2 Web presentation
3 Georeferencing
4 Online publishing of maps
61. High resolution imagery on the web
• Image size is too big for the traditional display in
the web browser - to keep the details we need to
provide the image in parts - cutting into tiles
• Technique of the “pyramid” provide
zooming and panning
• The viewer software assemble the
tiles and allows experience of
browsing over a seamless image
62. Viewers
• Different technology, look & feel, license and
authors, but the same principle
– JavaScript: OpenLayers, MooViewer, PanoJS,
SeaDragonJS, ...
– Flash: Zoomify, OpenZoom, Closer, ...
– iPhone: Microsoft SeaDragon (DeepZoom), ...
– 3D: Google Earth, ...
• For one image source more viewers
65. Pregenerated tiles
• The easiest, fastest and most efficient way how to
publish high-resolution images on the web
• A desktop application cut your master image into
the tiles (hundreds of small pictures) in advance
• You just have to copy the result to the web, no
extra server configuration - “it just runs”
• Formats: Zoomify, SeaDragon (DeepZoom),
OpenZoom, ... - differences in the name of the
tiles files: “z-x-y.jpg”, “x_y_z.jpg”, ...
• [disadvantage: thousands of small files]
66. • Really simple to use, almost no technical
knowledge for publishing the high
resolution images to the Internet
• You generate tiles and copy them on your
server, no further configuration is needed
• Original: http://www.zoomify.com/
• Existing open-source implementation for
tiling software as well as viewers
67. Dynamically generated tiles
• On your server is a program, which generates the
tiles from your images in the moment of visit
• You can keep just one copy of the image - serve
from the masters (“open archive”)
• Easily support for more viewers
• Dynamic color corrections
• Formats: JPEG2000, MrSID, ECW, pyr. TIFF
• [disadvantage: you need to install software on the
server, can be slow (scalability)]
68. Dynamically generated tiles 2
• Software: image server
– Commercial: LizardTech, Aware, XLImage, ...
– Open-source for JPEG2000: IIPImage, Djatoka
• Usually need of special formats: JPEG2000, MrSID,
ECW, pyramid TIFF
• You need your own server, you need IT knowledge
to set it up. Usage is quite simple: add new .jp2 to
a relevant directory
69. ImageServer: IIPImage
• Fast image server, OpenSource GPL: for free
• Color Correct (ICC profile, L a*b* space)
• SourceForge: http://iipimage.sf.net/
• Displays TIFF images (stored on the server)
• Zoomify-compatible (we supported dev)
• Support for JPEG2000 (we supported dev)
70. Open-Source and JPEG2000
• Software: image server
– Commercial: LizardTech, Aware, XLImage, ...
– Open-source for JPEG2000: IIPImage, Djatoka
• Usually need of special formats: JPEG2000, MrSID,
ECW, pyramid TIFF
• You need your own server, you need IT knowledge
to set it up. Usage is quite simple
• http://help.oldmapsonline.org/jpeg2000/
71. DEMO
Zoomify Express
Described step-by-step at:
http://help.oldmapsonline.org/publish/
72. 2. Web Presentation (recapitulation)
• Publishing of large images on the web: always tiles!
• Pan & Zoom viewers are assembling the tiles again
• Pregenerated (zoomify, deep zoom..)
– Viewers: Zoomify, OpenZoom, OpenLayers, PanoJS,... Google
Earth ... Mobile phone ... ?
– Hosting on the web: no configuration. Upload only.
– Advanced hosting: Amazon S3, Google App Engine, CDN
– DEMO: http://help.oldmapsonline.org/publish/
– DEMO: Zoomify Express “www.zoomify.com”
– DEMO: Firefox “S3Fox” and Amazon S3
• Dynamic delivery (image servers):
– From JPEG2000, TIFF, MrSID, ECW, jpeg files
– Software on the server: LizardTech, Aware, ...
– Open-Source: IIPImage (JPEG2000, TIFF), Djatoka
73. Workshop structure
1 From paper to computer
2 Web presentation
3 Georeferencing
4 Online publishing of maps
74. Why geo-reference early maps?
1. Provides new ways of integrating early maps with other
information
2. Provides new ways of understanding the content of early maps
3. Provides a better means of accessing early maps
75. 1 Geo-referencing to integrate tithe map
information within historical GIS
Alastair Pearson ‘Digitizing and analyzing historical maps to provide new
perspectives on the development of the agricultural landscape of England and
Wales’ e-Perimetron
(www.e-perimetron.org/Vol_1_3/Vol1_3.htm)
76. 1 Integrating early maps with
height information
Michael F. Davie & Mitia Frumin, ‘Late 18th century Russian
Navy maps and the first 3D visualization of the walled city of
Beirut’ e-Perimetron
(www.e-perimetron.org/Vol_2_2/Vol2_2.htm)
77.
78.
79.
80.
81.
82. 2 Geo-referencing for
understanding the content of
early portolan charts
JA Gaspar
‘The Myth of the Square Chart’ e-Perimetron
(/www.e-perimetron.org/Vol_2_2/Vol2_2.htm)
83. 2. Geo-referencing for using in digital
transparency techniques and animation
Miltiadis Daniil ‘Comparing by digital
transparency the differences
between two almost identical 17th
century maps of North Aegean Sea’
e-Perimetron
(www.e-perimetron.org/Vol_1_4/)
84. Principles of geo-referencing
Fitting old map to present day real-world location
1. Open early map as image.
2. Add or specify Control Points or Link Points of known locations to image
3. Transform image to the new position based on these control points
(software eg. ESRI ArcMap, MetaCarta Rectifier, Microsoft MapCruncher)
Need to be clear about the coordinate system, particularly of the
destination image:
• Within the UK, the British National Grid is often easiest to use, and
allows integration with Ordnance Survey gazetteers and mapping
• Internationally, a conversion to the Global Mercator projection on a
spherical approximation of the Earth is widely used for overlays in
Google Maps and Earth, Microsoft Virtual Earth, Yahoo Maps, etc.
Need to be clear about the transformation method from the original to the
destination images
104. Workshop structure
1 From paper to computer
2 Web presentation
3 Georeferencing
4 Online publishing of maps
105. Dynamic vs. pregenerated tiles
• Traditional dynamic publishing: MapServer,
GeoServer, ArcIMS - standard: OGC WMS
• Advantages: possibility to change map projections
on the fly, interoperability with all GIS tools,
broadly accepted standard
• Disadvantages: SLOW (not well scalable), not as
user-friendly for web visitors, lower quality output
(because of the limited rendering time)
• New approach: tiles
106. A Brief Look Behind
Google Maps...
• User-friendly interface. Fast! FAST!
• Maps are rendered in advance in a batch,
during update of geodata (different approach
then with dynamic WMS servers)
• The map is cut into tiles, user receives just
tiles for extent he is looking at. All tiles has
fixed predefined geographic boundaries.
• Pre-rendered tiles stored in Google BigTable
database. Redundancy. Load-balancing.
108. PROJECTION AND COORDINATE
SYSTEM OF GOOGLE MAPS
• Lat/Long WGS84 datum coordinates always displayed
to users. Popular from GPS devices, strictly used in the
KML format.
• Map rasters are projected by a global Mercator
projection: “Spherical Mercator”. EPSG:900913 /
EPSG:3785 (meters)
• Conformal, cylindrical. Cropped to square (maximal
latitude ~ 85.05 degrees)
• Simplified calculation: WGS84 ellipsoid is handled as
sphere in all calculation!
109. CONVERSION OF COORDINATES FOR GOOGLE MAPS
(GLOBALMAPTILES.PY MODULE)
GEODETIC COORDINATES SPHERICAL MERCATOR PYRAMID COORDINATES TILE INDEX
LATITUDE LONGITUDE METERS XYZ PIXELS / ZOOM XYZ TILE / ZOOM
WGS 84 (EPSG:4326) EPSG:3785 / EPSG:900913 WEB VIEWERS TILE MAP SERVICE
110. TILE ADDRESSING
• Google XYZ: origin (x,y)=(0,0) in top-left corner
• OSGEO Tile Map Service (TMS) XYZ: origin (x,y)=(0,0)
in bottom-left corner of extent
• Microsoft QuadTree: by quadrants “12022”
• WMS-C (WMS requests for predefined tile extents -
cache) / OGC Cashed WMS (extension for tile query)
• OGC Web Map Tile Service (WMTS) - draft