Include the Map in Your Website
The easiest way to include the map is by using an iframe and including that in your webpage html. If the map is smaller or equal to 641 pixels wide, the demographic data and legend is hidden (so there is enough room for the map data).

Basic Example
<iframe width='800' height='450' src=''> </iframe>

Income in Philadelphia
You can customize the map with additional parameters. For instance you might want to show a map of your community and pick a layer.
<iframe width='1000' height='600' src='' > </iframe>

Percent Asian in West Philadelphia - Small Map and Zoomed In
<iframe width='400' height='400' src='' > </iframe>

Iframe URL Parameters
You create a link to a custom version of the map by using the following parameters in the URL. All of these parameters are optional.

Including the Map Tile Layers with Javascript
The most powerful method to use our layers is to modify your map's javascript.

You can use Google Maps API, Microsoft Virtual Earth, Yahoo Maps, Bing and any other service that handles tile layers with the typical Google Mercator projection (EPSG:900913 or EPSG:3857).

The map tile layers work for counties (zoom 0-9), census tracts (0-12, and 13 for income), blockgroups (0-13), and blocks (4-14). For deeper zoom levels you can use our KML layers.

Our race layer names: plural (plurality), asian, black, hispanic, indian, multi, nonwhite, other, white.
Our race sizes: county, bg, tract, block.

Our income layer names: income, income_rich, income_poor, income_change
Our income sizes: county, tract.

We also have a density layer, which is available at the tract and block level.

In Google Maps, you can implement your own Image Map Type
JusticeMap format:[size]/[layer-name]/(zoom)/(coord.x)/(coord.y).png;

Map Tile Layers from the Cooper Center, University of Virginia (up to zoom level 13)
Racial Dot Map:;
Population Density Map:;

Javascript Examples - Using the Map Tile Layers
Black layer with census tracts (You can change the size and layer values)

This reduces the number of errors by limiting the tile requests to areas that actually have tiles. This logic treats the US as a rectangle - so there are still some request errors.
Income layer with counties and tile fetching logic

White layer with blocks

KML Layers
For deeper zoom levels we use shapefiles to save space and tile generation time. For race we created a kml file for each census tract in the US with block level resolution. We use the state-id, tract-id, and county-id from the Census Bureau.


For income we created a kml file for each county with census tract resolution.

For density we created a kml file for each tract with block resolution.

You can also use our GetKml API to fetch an array of kml filenames that you need.

fLat1, fLon1 (Northeast corner)
fLat2, fLon2 (Southwest corner)
sLayer - layer name


And then you can add the kml files to the map using javascript:
var kmllayer = new google.maps.KmlLayer(sUrl, {preserveViewport: true, suppressInfoWindows:true});

Our Demographics API
You can get race and income data for an area with our API by using: (2010 census)

API Parameters

The data that is returned (in JSON) includes 'percent race' for 7 racial groups, median household income and error (95% confidence interval for income), density (per square mile), and population. If you have comparison mode turned on, then you will get an array of these values for each distance from the point (with the array key being in millimeters. 1 mile = 1609344 millimeters).

Demographic Examples

A point:

A point - census tract:

A point, census tracts, 25 mile radius:

A point, blocks, comparison mode:

A point, radius, intersection=contains
(returns nothing because there aren't any census tracts fully contained within a 25 mile radius)