Maps

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

This page provides standard maps for use on Where You Live pages. To use a map:

Download the HTML code for the appropriate map. Modify the link destinations in both the state selection table and the image map. Use the code provided because it includes required accessibility features.

Use the correct map graphic file: if you have information for all areas of a map, don't download the map. Instead, use the image map code provided without modifying the <img> tag. It uses an absolute URL so that everyone uses the same map files, just as we all use the same EPA seal file.

File formats

Each map is available in PSD, PNG and GIF, and is accompanied by an HTML file with standard image map code. All files were created using Photoshop 7 (PSD) or Fireworks 4 (PNG). PSD and PNG are editable original files; GIF and HTML are created from PSD or PNG. They are editable in Fireworks or Photoshop.

Each map section below includes the relevant files and associated descriptions.

US map split into EPA regions

Features:

450 pixels wide x 340 pixels high

One image map area per EPA Region, so blind people don't hear a given Region read twice (e.g., Alaska and R10 are in the same image map region, despite not being next to each other); alt text is region name followed by the region's full state names in alphabetical order

The image map areas are in region number order, so they are heard in proper order through a screen reader

The PSD or PNG file has one layer per type of information; each Region has its own group within each layer:

image map areas

state names and name boxes (e.g., NJ, DE, etc.)

state shapes and boxes (e.g., AK, HI, etc.)

regional markers

grayed-out areas (to mark regions for which there is no information)

Use the PSD or PNG files only to create custom maps as needed (e.g., with grayed-out areas) in GIF format. Do not use PSD or PNG files on the Web site itself.

The HTML code includes all relevant links:

image map code, including alt text; set the href attribute for each image map area to the correct destination using relative URL

a form to let people choose their state; set the value attribute of each selection option to the correct destination using absolute URL

Download Files

Use the PSD or PNG file only to create custom maps (for example, with grayed-out areas) and save them in GIF format. Don't use PSD or PNG files on the Web site itself.

US split into regions: HTML Code | editable PSD file | editable PNG file (right click the link and select the save-as option from the resulting menu - when prompted, make sure the file name is us-states.psd or us-states.png (depending on the file type you use). Don't turn on the HQ "seal" layer unless you have a specific and clear need to link to HQ in general.

Download Files

Use the PSD or PNG file only to create custom maps (for
example, with grayed-out areas) and save them in GIF format.
Don't use PSD or PNG files on the Web site itself.

US split into states: HTML Code | editable PSD file | editable PNG file (right click the link and select the save-as option from the resulting menu - when prompted, make sure the file name is us-states.psd or us-states.png (depending on the file type you use). Don't turn on the HQ "seal" layer unless you have a specific and clear need to link to HQ in general.

Update to Puerto Rico shape

November 2009: The changes described here are already reflected in the links above.

If you are making a new map or map page, you can safely ignore this section, and just follow the directions above.

If you created a Web page that uses a standard map image file on /epafiles/ (according to the Web standard content requirement for maps), then you probably don't have to do anything. Your map should automatically reflect the correction.

If you posted a modified map image (e.g., with a grayed-out section), this section describes what you need to do.

Only the exact shape of Puerto Rico was changed on the editable files and Web GIF files. Therefore, to update a map on your Web page with Puerto Rico in it, you should need only to make or upload a corrected map image (GIF) with the same file name. Because no size, positioning, color, or label was changed, you should not have to add or adjust any links, hotspots, image maps, alt text, or other coding.

For your reference, the specific files with the Puerto Rico correction include: