<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
   title="US Census Bureau Demographics"
   height="150"
   description="This mapplet shows choropleth maps of various demographics from the 2000 US Census."
   author="Kaitlin Duck Sherwood"
   author_email="duckysherwood+censusMapplet@gmail.com"
   screenshot="http://maps.webfoot.com/mapplets/demographicsMappletScreenshot.png"
   thumbnail="http://maps.webfoot.com/mapplets/demographicsMappletThumb.png"
   title_url="http://maps.webfoot.com/"
   author_aboutme="I am a mature graduate student at UBC studying programmer productivity.  I make web apps, including map mashups, for fun."
   author_link="http://webfoot.com/ducky.home.html"
   author_quote="Family is a happy place where everyone works together to help each other achieve their goals.">

  <Require feature="sharedmap"/>
  <Require feature="settitle"/>
  <Require feature="dynamic-height"/>
  <Require feature="tabs"/>
</ModulePrefs>
<Content type="html"><![CDATA[


<div id="infoTab" style="display:none">
<p>
<a href="http://webfoot.com/ducky.home.html">Kaitlin Duck Sherwood</a>
<p>
This data is for the 2000 Census, from the U.S. Census Bureau.
<p>
Darker red means a higher value;
paler red / white means lower value. 
<p>
Scroll down to get to opacity controls.
<p>
Each area is one
census tract, designed to have roughly
3000 people each.
<p>
Different maps have different scales.
<p>
For more detailed information and
more precise control, see the non-mapplet version
at
<a href="http://maps.webfoot.com/">Webfoot Maps</a>.
</div>



  <!-- form name="demographicsForm" id="demographicsForm" style="position:absolute;top:40px;left:10px;width=150px" -->
  <form name="demographicsForm" id="demographicsForm">
  <div id="opacityButtons">
  <p>
  <input type="radio" name="opacity" value="0" onClick="setOpacity();" > Transparent<br>
  <input type="radio" name="opacity" value="0.2" onClick="setOpacity();" > 0.2<br>
  <input type="radio" name="opacity" value="0.4" onClick="setOpacity();" > 0.4<br>
  <input type="radio" name="opacity" value="0.6" onClick="setOpacity();" checked > 0.6<br>
  <input type="radio" name="opacity" value="0.8" onClick="setOpacity();" > 0.8<br>
  <input type="radio" name="opacity" value="1.0" onClick="setOpacity();" > Opaque<br>
  </div>



  <P>
  <div id="raceTab" style="display:none">
  <br>
  <input type="radio" name="mapButtons" value="clearOverlays();" 
  	onClick="map.clearOverlays();_IG_SetTitle('Choose a demographic');"> Clear all<br>
  <h3>Density</h3>
  <input type="radio" name="mapButtons" value="4,'A',0,10000,'Population Density'" 
  	onClick="setOverlay(4, 'A', 0, 10000,'Population Density');" checked> Density<br>
  <h3>Race</h3>
  <input type="radio" name="mapButtons" value="5, 'P', 0.3, 1, '% White'" 
  	onClick="setOverlay(5, 'P', 0.3, 1, '% White');"> % White <br>
  <input type="radio" name="mapButtons" value="6, 'P', 0, 0.7, "% Black'" 
  	onClick="setOverlay(6, 'P', 0, 0.7, '% Black');"> % Black <br>
  <input type="radio" name="mapButtons" value="12, 'P', 0.3, 1, '% Latino'" 
  	onClick="setOverlay(12, 'P', 0.3, 1, '% Latino');"> % Latino <br>
  <input type="radio" name="mapButtons" value="8, 'P', 0.3, 1, '% Asian'" 
  	onClick="setOverlay(8, 'P', 0.3, 1, '% Asian');"> % Asian <br>
  <input type="radio" name="mapButtons" value="9, 'P', 0.3, 1, '% Pacific Islander'" 
  	onClick="setOverlay(9, 'P', 0.3, 1, '% Pacific Islander');"> % Islander <br>
  <input type="radio" name="mapButtons" value="7, 'P', 0.3, 1, '% Native'" 
  	onClick="setOverlay(7, 'P', 0.3, 1, '% Native');"> % Native <br>
  </div>

  <div id="ageTab" style="display:none">
  <h3>Age</h3>
  <input type="radio" name="mapButtons" value="23, '1', 25, 60, 'Median Age'" 
  	onClick="setOverlay(23, '1', 25, 60, 'Median Age');"> Median Age 
  <p>
  <input type="radio" name="mapButtons" value="15, 'P', 0, .15, '% under 5'" 
  	onClick="setOverlay(15, 'P', 0, .15, '% under 5');"> % under 5 <br>
  <input type="radio" name="mapButtons" value="16, 'P', 0, .4, '% 5 to 17'" 
  	onClick="setOverlay(16, 'P', 0, .4, '% 5 to 17');"> % 5 to 17 <br>
  <input type="radio" name="mapButtons" value="17, 'P', 0, .2, '% 18 to 21'" 
  	onClick="setOverlay(17, 'P', 0, .2, '% 18 to 21');"> % 18 to 21 <br>
  <input type="radio" name="mapButtons" value="18, 'P', 0, .4, '% 22 to 29'" 
  	onClick="setOverlay(18, 'P', 0, .4, '% 22 to 29');"> % 22 to 29 <br>
  <input type="radio" name="mapButtons" value="19, 'P', 0, .4, '% 30 to 39'" 
  	onClick="setOverlay(19, 'P', 0, .4, '% 30 to 39');"> % 30 to 39 <br>
  <input type="radio" name="mapButtons" value="20, 'P', 0, .4, '% 40 to 49'" 
  	onClick="setOverlay(20, 'P', 0, .4, '% 40 to 49');"> % 40 to 49 <br>
  <input type="radio" name="mapButtons" value="21, 'P', 0, .4, '% 50 to 63'" 
  	onClick="setOverlay(21, 'P', 0, .4, '% 50 to 63');"> % 50 to 63 <br>
  <input type="radio" name="mapButtons" value="22, 'P', 0, .7, '% over 65'" 
  	onClick="setOverlay(22, 'P', 0, .7, '% over 65');"> % over 65<br>
  </div>
 
  <div id="houseTab" style="display:none">
  <h3>Housing Units</h3>
  <input type="radio" name="mapButtons" value="40, 'U', 0.2, 1.0, '% Owner Occupied'" 
  	onClick="setOverlay(40, 'U', 0.2, 1.0, '% Owner Occupied');"> % Owner Occupied <br>
  <input type="radio" name="mapButtons" value="41, 'U', 0.2, 1.0, '% Rental'" 
  	onClick="setOverlay(41, 'U', 0.2, 1.0, '% Rental');"> % Rental <br>
  <input type="radio" name="mapButtons" value="39, 'U', 0.2, 1.0, '% Vacant'" 
  	onClick="setOverlay(39, 'U', 0.2, 1.0, '% Vacant');"> % Vacant <br>
  <input type="radio" name="mapButtons" value="26, 'U', 0.2, 1.0, '% Occupied'" 
  	onClick="setOverlay(26, 'U', 0.2, 1.0, '% Occupied');"> % Occupied <br>
  <p>

  <h3>Household Size</h3>
  <input type="radio" name="mapButtons" value="27, '1', 1, 5, 'Household size'" 
  	onClick="setOverlay(27, '1', 1, 5, 'Household size');"> Household size<br>
  <input type="radio" name="mapButtons" value="28, 'H', 0.0, 0.5, '% of households consisting of a single man'" 
  	onClick="setOverlay(28, 'H', 0.0, 0.5, '% of households consisting of a single man');"> % One man <br>
  <input type="radio" name="mapButtons" value="29, 'H', 0.0, 0.5, '% of households consisting of a single woman'" 
  	onClick="setOverlay(29, 'H', 0.0, 0.5, '% of households consisting of a single woman');"> % One woman <br>

  <input type="radio" name="mapButtons" value="32, 'H', 0.0, 0.5, '% of households consisting of a single man with children'" 
  	onClick="setOverlay(32, 'H', 0.0, 0.5, '% of households consisting of a single man with children');"> % Single dads <br>

  <input type="radio" name="mapButtons" value="33, 'H', 0.0, 0.5, '% of households consisting of a single woman with children'"
  	onClick="setOverlay(33, 'H', 0.0, 0.5, '% of households consisting of a single woman with children');"> % Single moms <br>

  <input type="radio" name="mapButtons" value="30, 'H', 0.0, 0.5, '% of households consisting of a married couple with children'" 
  	onClick="setOverlay(30, 'H', 0.0, 0.5, '% of households consisting of a married couple with children');"> % Married w/kids<br>
  <input type="radio" name="mapButtons" value="31, 'H', 0.0, 0.5, '% of households consisting of a married couple without children woman'" 
  	onClick="setOverlay(31, 'H', 0.0, 0.5, '% of households consisting of a married couple without children');"> % Married w/o kids<br>
  </div>



  </form>


  <script type="text/javascript">


    var tabs = new _IG_Tabs(__MODULE_ID__, "Race"); 
    tabs.addTab("Race", "raceTab");
    tabs.addTab("Age", "ageTab");
    tabs.addTab("Housing", "houseTab");
    tabs.addTab("Info", "infoTab");
    var tileLayerOverlay;

    var map = new GMap2();
    map.setCenter(new GLatLng(37.69, -122.28), 9);

    // global variables, ick!
    var g_column = 4;
    var g_normalizer = "A";
    var g_min = 0;
    var g_max = 10000;
    var g_title = "Population Density";
    tileLayerOverlay = makeTileLayerOverlay(g_column, g_normalizer, g_min, g_max);
    map.addOverlay(tileLayerOverlay);
    _IG_SetTitle(g_title);
    _IG_AdjustIFrameHeight();
  

  // functions -------------------------------------------------------------

  function getOpacity()
  {
    for (var i=0; i < document.demographicsForm.opacity.length; i++)
    {
      if (document.demographicsForm.opacity[i].checked)
      {
        var opacityValue = document.demographicsForm.opacity[i].value;
        return opacityValue;
      }
    }
    return "ERROR!  SHOULD NOT GET HERE!";
  }


  function setOpacity() {
    tileLayerOverlay.getTileLayerAsync(function(tileLayer) {
      setOverlay(g_column, g_normalizer, g_min, g_max, g_title);
      });
  }

  function makeTileTemplateUrl(column, normalizer, min, max) {
     return "http://maps.webfoot.com/cgi-bin/censusMap?x={X}&y={Y}&zoom={Z}&column="+column+"&normalizer="+normalizer+"&min="+min+"&max="+max;
  }

  function makeTileLayer(column, normalizer, min, max) {
    var template = makeTileTemplateUrl(column,normalizer,min,max);
    var censusTileLayer = new GTileLayer(null, null, null, {
        tileUrlTemplate: template,
	isPng: true,
	opacity: getOpacity(),
	});
    return censusTileLayer;
    }

  function makeTileLayerOverlay(column, normalizer, min, max) {
    g_column = column;
    g_normalizer = normalizer;
    g_min = min;
    g_max = max;
    tileLayerOverlay = new GTileLayerOverlay(makeTileLayer(column, normalizer, min, max));
    return tileLayerOverlay;
  }

  function setOverlay(column, normalizer, min, max, title) {
    map.clearOverlays();
    g_title = title;
    var overlay = makeTileLayerOverlay(column, normalizer, min, max);
    _IG_SetTitle(title);
    map.addOverlay(overlay);
  }


  </script>
]]></Content>
</Module>
