Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

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:

  1. 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.
  2. 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.

If you lack information for certain map areas, download the PSD or PNG file and create your own maps with grayed-out areas.

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 (PSD) or Fireworks (PNG). PSD and PNG are editable original files; GIF and HTML are created from PSD or PNG.

See below for information about each map type.

Top of Page

 

US map split into EPA regions

Features:

  • sample map showing USA map organized by EPA regionsUpdated 10/2012 to include "Pacific Islands" -read more
  • 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 (PNG only)
    • 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

Instructions for map areas for which there is no information available

Questions? Call or write Jeffrey Levy (levy.jeffrey@epa.gov; 202-564-9727).

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.

Top of Page

 

US map split into states

Features:

  • sample map showing USA map split into US states, territories, or "Indian Tribes"Updated 10/2012 to include "Pacific Islands" and "Indian Tribes" -read more
  • 450 pixels wide x 340 pixels high
  • One image map area per state, so blind people don't hear multi-part states read twice (e.g., AK, HI, and MI); alt text is full state name
  • The image map areas are in alphabetical order by state name (NOT by postal abbreviation), so they are heard in proper order through a screen reader
  • The PSD or PNG file has one layer per type of information:
    • image map areas (PNG only)
    • state names & name boxes (e.g., NJ, DE, etc.)
    • state shapes & boxes (e.g., AK, HI, etc.)
    • grayed-out areas (to mark states 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

Instructions for map areas for which there is no information available

Questions? Call or write Jeffrey Levy (levy.jeffrey@epa.gov; 202-564-9727).

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 need to link to HQ or national-level info.

Top of Page

 

Regional maps split into states

Features:

  • Updated R9 map 10/2012 to include "Pacific Islands" -read more
  • 131 pixels wide, height appropriate to region
  • Each state has one image map area; alt text includes that linked state's name
  • The image map areas are in alphabetical order by state, so they are heard in proper order through a screen reader
  • The PSD or PNG file for each region has one layer per type of information:
    • image map areas (PNG only)
    • state names, shapes, & name boxes (e.g., NJ, DE, etc.)
    • grayed-out areas (to mark states 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 the image map with alt text; set the href attribute for each image map area to the correct destination using relative URL

Instructions for map areas for which there is no information available

Questions? Call or write Jeffrey Levy (levy.jeffrey@epa.gov; 202-564-9727).

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.

(right click the PSD pr PNG graphic link and select the save-as option from the resulting menu—when prompted, make sure the file name ends with .psd or .png, as appropriate)

Top of Page

 

Creating maps when there is no information for certain areas

When there is no content for a particular state or region, create a new map with that area grayed out:

  1. On this page (don't view the PSD or PNG file using the browser), right-click on the PSD or PNG link and choose to save the file.
  2. In Macromedia Fireworks or Adobe Photshop, open the PSD or PNG file.
  3. Check that the layer called "grayed out" is on.
  4. Within the "grayed out" layer, turn on the relevant shapes for areas with no information:
    1. US map split into regions: each region has a grayed-out area
    2. US map split into states, regional maps: each state has a grayed-out area
  5. Remove the image map area code for the grayed-out areas:
    1. Exporting only a GIF file: edit the exising HTML image map
    2. Exporting both GIF and HTML: turn off the relevant areas in the Web layer before exporting
  6. Export the new GIF file using the settings included in the file. If you are using Fireworks to produce HTML code in addition to the GIF file, choose that setting in the export dialogue box.
  7. Pacific Islands update: The US map split into states or the Region 9 graphic files also includes the option to divide the Pacific Islands into specific islands of Guam, American Samoa, Trust Territories, and Northern Marianas, but this should be done ONLY when needed to represent program information for each island. Otherwise, use onlythe "Pacific Islands" box. The states HTML pull-down does NOT include form "select" "options" for each Pacific Island, so these must be added in step with the map.

For help using the PSD or PNG files, or if you don't have Photoshop or Fireworks but need maps with grayed-out areas, contact Jeffrey Levy (levy.jeffrey@epa.gov; 202-564-9727).

Top of Page

 

Nonstandard maps

It will sometimes be appropriate to create maps that aren't full size or are otherwise different from the norm. For example, a small map might be needed.

In these cases, contact Jeffrey Levy (levy.jeffrey@epa.gov; 202-564-9727) about your requirements.

Note that the PSD or PNG files' layers make creating usable maps easier. For example, state names and regional icons will be illegible on a small map and can easily be turned off.

Top of Page

 

Update to Pacific Island Territories and Tribes

October 2012: The changes described here are already reflected in the instructions above. If you are making a new map or map page, you can ignore this section and just follow the directions above on this page.

If you are updating existing pages, you will probably need to update both your graphics and HTML code. The changes include:

  • EPA Regions map: a clickable area "Pacific Islands" replaces the four separate, clickable areas of "Guam," "Trust Territories," "American Samoa," and "Nothern Mariana Islands." The State of Hawaii was and will remain separate.
  • States map: a clickable area "Indian Tribes" is added.
  • Region 9 map: a clickable arean "Pacific Islands" is added.
  • pull-down state menu code: "Pacific Islands" replaces the four separate island names.

Additional notes:

  • The "usemap" coordinate set also changed for each of these three maps. Obtain the updated codes above. However the outer width and height dimensions of each map graphic did not change, so you should not have to adjust the overall layout of your page to use these updates.
  • screenshot of before and after showing overlapping pixelsThe internal positioning of the entire regional map was adjusted slightly (by no more than 2 or 3 pixels) to make its state outlines register with (match the placement of) the outlines on the states map.

Contact Jeff Morin (morin.jeff@epa.gov, 202 564-6553) if you have questions.

Top of Page

 

Update to Puerto Rico shape

Region 2 map showing the corrected shape of Pureto Rico:

November 2009: The change was to correct the shape of Puerto Rico island. There was no change to the graphic outer width or height, or to the "usemap" clickable coordinates. The changes described here are already reflected in the links above.

If you are making a new map or map page, you can 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:

Contact Jeff Morin (morin.jeff@epa.gov, 202 564-6553) if you have questions.

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.