Your SlideShare is downloading. ×
0
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
From paper to screen:  Putting maps on the web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

From paper to screen: Putting maps on the web

11,428

Published on

Map Curators' Workshop 2009, The British Cartographic Society, Edinburgh 9-10th September 2009

Map Curators' Workshop 2009, The British Cartographic Society, Edinburgh 9-10th September 2009

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,428
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
137
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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
  6. METIS Digital Reproduction System (Rome) Double A0 size
  7. Icam Atlas camera used in Kent Tithe Map project
  8. Lumiere Jumboscan – 30,000 x 18,000 pixels, 5 x 2 metre scan area
  9. Colortrac 24120 – 24” x 36” flatbed scanner
  10. 1. From Paper to Computer B. Digital Images Resolution Pixel bit-depth Colour File formats Software
  11. Representation of an object in Raster and Vector formats Raster – cell based Vector – point, line and area based
  12. Resolution – the spatial detail or number of pixels in an image…
  13. Cornell University Quality Index For 1-bit bitonal scanning:   x-height QI=3.6 QI=5 QI=8 (smallest dimension that needs to be captured) 0.5 mm 554 dpi 769 dpi 1231dpi 1.0 mm 277 dpi 385 dpi 615 dpi 1.5 mm 185 dpi 256 dpi 410 dpi 2.0 mm 138 dpi 192 dpi 308 dpi
  14. Cornell University Quality Index For 8-bit greyscale/colour scanning   x-height QI=3.6 QI=5 QI=8 (smallest dimension that needs to be captured) 0.5 mm 277 dpi 385 dpi 615 dpi 1.0 mm 138 dpi 192 dpi 308 dpi 1.5 mm 92 dpi 128 dpi 205 dpi 2.0 mm 69 dpi 96 dpi 154 dpi
  15. 400 dpi 300 dpi 200 dpi
  16. 1. From Paper to Computer B. Digital Images Resolution Pixel bit-depth Colour File formats Software
  17. 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.
  18. 8-bit indexed colour Recording 256 values for every pixel from a look-up table
  19. 24-bit RGB colour recording 3 channels of 256 values for red, green and blue for every pixel
  20. 8-bit indexed colour Recording 64 values for every pixel from a look-up table
  21. Converting to bitonal using threshold
  22. 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.
  23. 1. From Paper to Computer B. Digital Images Resolution Pixel bit-depth Colour File formats Software
  24. Additive colour – Subtractive colour – light based - scanners, cameras, monitors print and paper based
  25. Device-dependent Colour Transformations T T T T T T T T T T T T T T = each a different device-to-device transform
  26. Device-independent Colour Transformation T T T Standard T Colour Space T T T T = each a device-to-standard colour space transform
  27. ICC Workflow Source profile Destination profile PCS Colour Transform Source device colour data Destination device colour data
  28. Generating an output or printer profile
  29. Generating an input or capture profile
  30. 1. From Paper to Computer B. Digital Images Resolution Pixel bit-depth Colour File formats Software
  31. 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
  32. 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.
  33. 1. From Paper to Computer B. Digital Images Resolution Pixel bit-depth Colour File formats Software
  34. Photoshop… rotating the image
  35. Photoshop – rotated and aligned image
  36. Photoshop – altering image size
  37. Photoshop – cropping an image
  38. Photoshop – altering colour bit depth
  39. Photoshop – saving image in various formats
  40. 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
  41. 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
  42. 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
  43. Workshop structure 1 From paper to computer 2 Web presentation 3 Georeferencing 4 Online publishing of maps
  44. 400 DPI 9606 x 7322 px 202 MB uncompressed TIFF ~107 MB JPEG2000 (lossless) 15 MB JPEG 85% ~ 8 MB JPEG2000 (loosy)
  45. 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
  46. 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
  47. ZOOMIFY, MOOVIEWER, OPENZOOM TILES PREGENERATED OR SERVED BY IIPIMAGE
  48. 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]
  49. • 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
  50. 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)]
  51. 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
  52. 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)
  53. 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/
  54. DEMO Zoomify Express Described step-by-step at: http://help.oldmapsonline.org/publish/
  55. 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
  56. Workshop structure 1 From paper to computer 2 Web presentation 3 Georeferencing 4 Online publishing of maps
  57. 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
  58. 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)
  59. 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)
  60. 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)
  61. 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/)
  62. 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
  63. Open Bartholomew 1912 Edinburgh map to be geo- referenced in ArcMap
  64. Georeferencing toolbar Geo-referencing toolbar
  65. Add first control point to Bartholomew map…
  66. In Table of Contents, zoom to target geo-referenced Edinburghshire 1860s map
  67. The Edinburghshire 1860s geo-referenced map
  68. Destination control point on the Edinburghshire geo-referenced target map
  69. Bartholomew map after first control point added
  70. Adding second control point to Bartholomew map…
  71. …and positioning its destination point on the target
  72. Third control point in bottom left of Bartholomew map
  73. Adjusting transparency of Bartholomew map to view alignment and accuracy of geo-referencing
  74. Editable link table of control points and transformation choices for geo-referencing
  75. Specifying the coordinate system
  76. Clearing black edges through nodata pixel
  77. Clearing black edges through a nodata pixel value
  78. The black edges taken away
  79. Saving the geo-referenced Bartholomew map
  80. Exporting the geo-referenced Bartholomew map
  81. DEMO Online Georeferencing Tool (under development) http://www.georeferencer.org/
  82. Workshop structure 1 From paper to computer 2 Web presentation 3 Georeferencing 4 Online publishing of maps
  83. 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
  84. 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.
  85. FIXED ZOOM LEVELS
  86. 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!
  87. 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
  88. 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
  89. HOW CAN I PUBLISH MY OWN MAPS THE SAME WAY?
  90. TILES ARE SAVED (CACHED) FROM EXISTING DYNAMIC WMS SERVER • Open Source Projects: • TileCache.org (Python) • GeoWebCache.org (Java Servlet) WMS WMS WMS Client Server WMS Tile Cache Web Tiles Client (tiles) (TMS, WMS-C)
  91. TILES ARE PRE-RENDERED DIRECTLY • Raster input: • GDAL2Tiles (my GSoC) & MapTiler GUI • MSR MapCruncher • Features (vectors) • Mapnik, GMapCreator Tiles Tiles as static TMS (TMS or others) WMS Proxy WMS Web WMS files (MapServer) Client (tiles) Client
  92. MAPTILER (GDAL2TILES) • Generates image tiles (PNG files) from a raster maps (GeoTIFF, JPEG2000, MrSID, ECW, Erdas HFA, BSB, ...) • It uses existing geometadata (WKT, EPSG, World Files) and supports huge rasters (unlimited filesize) • Simple web viewer (OpenLayers, Google Maps API) • KML SuperOverlay Metadata (Google Earth, indexing) • Tile Map Service (TMS) compatibility • Raster warping to Spherical Mercator.
  93. DEMO MapTiler Described step-by-step at: http://help.oldmapsonline.org/publish/
  94. Recapitulation • http://help.oldmapsonline.org/publish/ • Image publishing: tiles: Zoomify, ... • Alternative: IIPImage (direct from jp2,tif) or commercial tools • Several pan&zoom viewers • Georeferencing: GIS tools • Under development: Georeferencer.org • Map publishing: tiles: MapTiler (beta) • Alternative: MapServer, GeoServer and TileCache, GeoWebCache or commercial ESRI ArcIMS. • Standard: OGC WMS, tiles: TMS & OGC WMTS

×