Justice Map

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='http://www.justicemap.org/index.php?giIframe=1'> </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='http://www.justicemap.org/index.php?giIframe=1&gsAddress=Philadelphia+PA&gsLayer=income&' > </iframe>

Percent Asian in West Philadelphia - Small Map and Zoomed In
<iframe width='400' height='400' src='http://www.justicemap.org/index.php?giIframe=1&gsLayer=asian&gfLon=-75.2&gfLat=39.9&giZoom=14' > </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.

gsLayer - the map layer - options include: asian, black, hispanic, indian, multi, nonwhite, other, white, income, income_poor, income_rich, income_change, density, dotmap (the racial dotmap - not available even in our advanced mode), and popmap.
gfLon / gfLat - if you include both parameters then you set the map center
giZoom - set the zoom level
gsAddress - geocodes the address and sets the map center and zoom level based on the address. This over-rides gfLat and gfLon. You need to use the + sign to separate words in the address.
gsSize - basic census geographical unit for showing the data. For race this can be: county, tract, bg, or blocks (plural is important). For income this can be: county or tract.
gfClick_lat, gfClick_lon - if you include both parameters the map fetches the demographic data for this point and displays it when the map loads.
gsIntersect - intersection type that is used for several geographical algorithms including finding the demographics for x miles from a point, and comparing the demographics for x1, x2, x3 miles from a point. This can be set to centroid (default), intersect, or contains.
gfRadius - when the user clicks on the map to get the demographics, if the radius/distance is specified - then it includes all of the polygons within x miles of the click and depends upon the intersection type (gsIntersect).
giAdvanced - 1 shows the advanced map page.
gfOpacity - Sets the opacity of the map tile layers. Default is 0.75. This can range from 0 (completely tranparent) to 1 (completely opaque).
gsCompare - if set to 'on' this turns the Compare demographics feature on.
iIframe - this is designed for using the map in an iframe. When set to 1 it minimizes the space used by map controls.
gfDistance_0, gfDistance_1, gfDistance_2 - additional radiuses for the compare demographics feature. Do not add too many or it will run very slow.
gsAuto - 1 turns on Automatic Demographics
gsGeo - sets the resolution - can be county, tract, bg, or block - so long as that resolution is supported at the the zoom level you are viewing.

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: http://www.justicemap.org/tile/[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: http://demographics.coopercenter.org/DotMap/tiles4/(zoom)/(coord.x)/(coord.y).png;
Population Density Map: http://demographics.coopercenter.org/DotMap/tiles5/(zoom)/(coord.x)/(coord.y).png;

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.

Format: www.maptile.org/tile/kml/[layer]/[state-id]/0[county-id]_[tract-id].kmz
Ex. www.maptile.org/tile/kml/white/56/043_000302.kmz

For income we created a kml file for each county with census tract resolution.
Format: www.maptile.org/tile/kml/[layer]/[state-id]/0[county-id].kmz
Ex. www.maptile.org/tile/kml/income/56/045.kmz

For density we created a kml file for each tract with block resolution.
Format: www.maptile.org/tile/kml/[layer]/[state-id]/0[county-id]_[tract-id].kmz
Ex. www.maptile.org/tile/kml/density/56/043_000302.kmz

You can also use our GetKml API to fetch an array of kml filenames that you need.
www.spatialjusticetest.org/get-kml-shape.php

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

Example: http://www.spatialjusticetest.org/get-kml-shape.php?fLat1=40.02&fLon1=-95.02&fLat2=40&fLon2=-95&sLayer=white

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

Our Demographics API
You can get race and income data for an area with our API by using:
http://www.spatialjusticetest.org/api5.php (2010 census)

API Parameters

fLat: latitude (required)
fLon: longitude (required)
sGeo: county, tract, bg, or block (County is default)
fRadius: distance from a point in miles. Use this to get demographics for a point and a radius.
sIntersect: intersection type for use with radius or comparison mode. Values: 'contains' (fully contains), 'centroid' (contains the centroid), or 'intersect'.
sCompare: 'on' to use the comparison mode.
iZoom: zoom level - affects the comparison mode. Highly recommended if you are using comparison mode.
aCompare: an array of radiuses to add to comparison mode. You will get the default radiuses as well as these additional ones. Will slow it down.
iPolygon: '1' to get the geoJSON outline for the polygon outline for the lat/lon.
iPolygon_compare: '1' to get the geoJSON outline for the polygons in comparison mode. Can be slow.

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:
http://www.spatialjusticetest.org/api.php?fLat=39&fLon=-115

A point - census tract:
http://www.spatialjusticetest.org/api.php?fLat=39&fLon=-115&sGeo=tract

A point, census tracts, 25 mile radius:
http://www.spatialjusticetest.org/api.php?fLat=39&fLon=-115&sGeo=tract&fRadius=25

A point, blocks, comparison mode:
http://www.spatialjusticetest.org/api.php?fLat=39&fLon=-115&sGeo=block&sCompare=on&iZoom=10

A point, radius, intersection=contains
http://www.spatialjusticetest.org/api.php?fLat=39&fLon=-115&sGeo=tract&fRadius=25&sIntersect=contains
(returns nothing because there aren't any census tracts fully contained within a 25 mile radius)