Dan Sadler

1
Creating and Optimizing Web Maps
Dan Sadler daniel.sadler_at_montgomerycountymd.gov Mo
ntgomery County Department of Information Systems
Telecommunications - GIS Team (DIST-GIS) Map
Gallery and todays presentation on the
Web http//www.montgomerycountymd.gov
2
Creating and Optimizing Web Maps (outline)

• Web graphics file formats especially GIF, JPG,
  and PDF
• Special cartographic considerations when using
  Web raster formats
• Describe how to use GIS software with graphics
  software to convert map layouts into attractive,
  legible, useful Web graphics
• Photoshop in action

3
File Formats
Vector formats
Raster formats
Heavy Formats Used for Printing

• EPS (not for Web)

• TIF (not for Web)

Compressed Formats Used on the Web

• GIF (drawings)
• JPG (photographs)
• PNG-8 and PNG24
• (format ahead of its time, presently inconsistent
  browser support)

• PDF (most universal vector format for Web, best
  print control)
• SWF
• SVG

(exciting formats, not yet as universal as PDF)
4
PDF Vector format

• Originally created as an attempt at the
  paperless office concept
• Adobe Acrobat allows PDFs to be created from any
  application
• Free Acrobat Reader allows PDF viewing and
  printing and comes with browser plug-in
• Many users are familiar with PDF format from
  downloading government forms (www.1040.com),
  online brochures, etc, and seeing links to free
  download site.
• Fonts can be embedded in the PDF document
• IMPORTANT FOR MAPS
• With PDF format, users are able to print many
  copies of the same document from any printer
  (paperless office?)

5
Raster Images for the Web Cartographic
Considerations

• Keep your GIS work digital dont print and
  scan!
• Web users will have different screen area
  settings (640x480, 800x600, 1024x768)
• recommend max width of standalone image 640
  pixels
• To avoid browser dither (pixels of different
  colors mixing to simulate a color outside the
  browsers palette), either
• create your map using 216-web-color palette OR
• - use an image editor with Web snap feature

6
Raster Images for the Web Cartographic
Considerations

• Browsers will display and print raster graphics
  at 72 dpi whether or not you save at a higher
  resolution
• Dont worry about print quality (72 dpi isnt
  great quality) provide vector format (PDF)
  instead for that purpose
• Keep it simple - Dont try to show too much
  detail on a raster Web image (use vector PDF if
  more detail is needed)
• (example of too much detail shown on next slide)

7
(No Transcript)
8
(No Transcript)
9
Detail is limited on a raster image

• Keep the map simple Display only what is
  reasonably legible on a single screen
• Rule of thumb a map that prints 8.5 x 11 and
  uses large text should convert nicely
• Boldface type helps bring out text

10
Adobe Photoshop Raster Image Editing Software

• Anti-aliasing feature improves legibility when
  converting from vector to raster
• Larger assortment of file formats and options
  (especially GIF format)
• Advanced Web image capabilities offered by
  ImageReady, a sister-program packaged with
  Photoshop

11
Image created without anti-aliasing
Exported as JPG (100 quality) directly from
ArcView
12
Image created with anti-aliasing
Exported as EPS from ArcView, then opened in
Photoshop
13
Zoomed in, no anti-aliasing
Zoomed in, anti-aliased
Anti-aliasing makes images that are made out of
pixels appear as though they are not made out of
pixels when viewed at full size. ArcView does not
support anti-aliasing when rendering your work.
14
Choice of Image Format

• Graphic formats used for printing (such as TIF)
  can be large enough to hold lots of information
  about an image, but Web formats must sacrifice
  some image information for the sake of file size
  to be small enough to download quickly
• GIF and JPG make different sacrifices for the
  sake of file size that make them appropriate for
  different types of graphics

15
GIF Graphic Interchange Format
Better choice for drawings, logos, graphics with
few colors

• Reduces number of available colors to 256 or
  fewer (Indexed color)
• Stores data efficiently for solid color areas of
  a graphic
• LZW compression UNISYS royalty makes software
  makers reluctant to support export to GIF
• Lossless

ArcView 3.x, ArcInfo 7.x, and ArcGIS 8.x do not
support export to GIF format
16
JPEG Joint Photographic Experts Group
Better choice for photographs, continuous tone
images

• Retains support for millions of colors, but
• Algorithms selectively discard image data based
  on what human eyes are least likely to notice
  missing from a photographic scene
• Creates a trade-off between quality and file size
• Lossy

17
(No Transcript)
18
Solid color areas on GIF remain solid
Spots or artifacts appear on JPG
19
Converting a Map created using GIS software to
GIF format
Step 1 Export the map in a vector format (EPS or
PDF)
Step 2 Open the map in Photoshop, adjust pixel
size, resolution, and anti-aliasing on the fly
Step 3 Save GIF with Photoshops Save for Web
function
20
(No Transcript)
21
Export as Vector (PDF format) from ArcGIS 8
22
Convert to vector graphic (EPS) from ArcInfo 7.x
prompt
NOTE Any fonts used to create a map in a UNIX
program will be substituted with a font on the PC
when the file is opened in Photoshop.
23
Converting a Map created using GIS software to
GIF Format
Step 1 Export the map in a vector format (EPS or
PDF)
Step 2 Open the map in Photoshop, adjust pixel
size, resolution, and anti-aliasing on the fly
Step 3 Save GIF with Photoshops Save for Web
function