libs/js/jquery-geo-1.0a4/docs/examples/voting.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Voting districts example</title>
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of voting districts">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       background: #fff;
  15       position: fixed;
  16       left: 0;
  17       top: 0;
  18       right: 0;
  19       bottom: 0;
  20     }
  21
  22     #sliders
  23     {
  24       margin-top: 32px;
  25     }
  26     .slider
  27     {
  28       margin: 8px;
  29     }
  30
  31     h1, #demographic { display: inline-block; }
  32
  33     #demographic img { margin-left: 8px; }
  34
  35     tr { display: inline-block; }
  36
  37     td:first-child { font-weight: bold }
  38   </style>
  39 </head>
  40 <body>
  41   <div>
  42     <div id="map">
  43     </div>
  44     <div class="info">
  45       <div class="links">
  46         <a href="../" class="docLink">&lt; docs</a>
  47         <a href="http://jsfiddle.net/ryanttb/DkqDX/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  48       </div>
  49       <div id="sliders">
  50         <fieldset>
  51           <legend>basemap transparency</legend>
  52           <div id="sliderBasemap"></div>
  53         </fieldset>
  54         <fieldset>
  55           <legend>demographic color</legend>
  56           <div>
  57             <label>red</label> <div id="sliderR" class="slider"></div>
  58             <label>green</label> <div id="sliderG" class="slider"></div>
  59             <label>blue</label> <div id="sliderB" class="slider"></div>
  60             <label>transparency</label> <div id="sliderA" class="slider"></div>
  61           </div>
  62         </fieldset>
  63       </div>
  64       <h1>Voting Districts by %</h1>
  65       <div id="demographic">
  66         <input type="radio" id="optWhite" name="demographic" value="1" checked /><label for="optWhite">White</label>
  67         <input type="radio" id="optBlack" name="demographic" value="2" /><label for="optBlack">Black</label>
  68         <input type="radio" id="optAsian" name="demographic" value="3" /><label for="optAsian">Asian</label>
  69         <input type="radio" id="optHispanic" name="demographic" value="4" /><label for="optHispanic">Hispanic</label>
  70         <img alt="" src="img/ajax-loader.gif" title="Loading 2011 MA voting district data" />
  71       </div>
  72       <h2 data-text="Name"></h2>
  73       <div data-html="Description">
  74         <p>Once the data has loaded (which may take a while, even on broadband connections), you can dynamically change the demographic display color. You can also click a voting district to zoom in and see details.</p>
  75       </div>
  76     </div>
  77   </div>
  78   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  79   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  80   <script src="js/iecors.js"></script>
  81   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  82   <script>
  83     $( function () {
  84       // create a map
  85       var data, // GeoJSON data of voting districts
  86           selection, // reference to current selection highlight
  87           map = $( "#map" ).geomap( {
  88             center: [ -71.0595678, 42.3604823 ],
  89             zoom: 8,
  90             click: function( e, geo ) {
  91               // remove any previous selection graphic
  92               if ( selection ) {
  93                 map.geomap( "remove", selection );
  94               }
  95
  96               // find a voting district at the clicked location
  97               var district = map.geomap( "find", geo, 1 );
  98
  99               if ( district.length > 0 ) {
 100                 // make a copy of the feature for selection highlight
 101                 selection = $.extend( true, { }, district[ 0 ] );
 102
 103                 // display some info about the voting district
 104                 $( "[data-text='Name']" ).text( selection.properties.Name );
 105                 var $descTable = $( selection.properties.Description );
 106                 $descTable.find( "tr:eq(5)" ).remove( );
 107                 $descTable.find( "tr:eq(4) td:first-child" ).text( "Hispanic Origin" );
 108                 $( "[data-html='Description']" ).empty().append( $descTable ).show();
 109
 110                 // set the map's bbox to the bbox of the feature
 111                 // but scale the bbox by 2x first to zoom out a little
 112                 map.geomap( "option", "bbox", $.geo.scaleBy( $.geo.bbox( selection ), 2 ) );
 113
 114                 // append the selection highlight shape with a thick red border
 115                 map.geomap( "append", selection, { opacity: 1, fillOpacity: 0, color: "red", strokeWidth: "4px" } );
 116               }
 117             }
 118           } );
 119
 120       // set an initial shapeStyle for the demographic display, all white, no border
 121       map.geomap( "option", "shapeStyle", { strokeWidth: "0px", opacity: 1, color: "#fff" } );
 122
 123       // jQuery UI for pretty sliders
 124
 125       $( "#sliderBasemap" ).slider( {
 126         value: 100,
 127         slide: function ( e, ui ) {
 128           // when the basemap slider slides,
 129           // set the new opacity on the osm layer
 130           // you can target specific layers with jQuery selector syntax
 131           // the default service object has a css class of osm
 132           $( "#map .osm" ).geomap( "opacity", ui.value / 100 );
 133         }
 134       } );
 135
 136       $( ".slider" ).slider( {
 137         value: 100,
 138         change: function( e, ui ) {
 139           // when any demographic slider changes, get all the values
 140           var red = $( "#sliderR" ).slider( "option", "value" ),
 141               green = $( "#sliderG" ).slider( "option", "value" ),
 142               blue = $( "#sliderB" ).slider( "option", "value" ),
 143               alpha = $( "#sliderA" ).slider( "option", "value" );
 144
 145           // set the shapeStyle to the new color and global opacity
 146           // since each individual shape only overrides fillOpacity,
 147           // this single call will modify all shapes without having to re-append them
 148           map.geomap( "option", "shapeStyle", {
 149             color: "rgb( " + Math.floor( 255 * red / 100 )  + ", " + Math.floor( 255 * green / 100 ) + ", " + Math.floor( 255 * blue / 100 ) + " )",
 150             opacity: alpha / 100
 151           } , false );
 152         }
 153       } );
 154
 155       // jQuery UI for pretty radio buttons
 156       $( "#demographic" ).buttonset( );
 157
 158       $( "#demographic input" ).click( function( ) {
 159         // when a demographic radio button changes,
 160         // generate new demographic shapes from the existing data
 161         showData( data, $(this).val() );
 162       } );
 163
 164       // download the voting district shapes and demographics
 165       $.ajax( {
 166         url: "http://data.jquerygeo.com/ma-voting-districts.geojson",
 167         dataType: "json",
 168         success: function( result ) {
 169           // save a copy
 170           data = result;
 171           // generate new demographic shapes based on whichever input is checked
 172           showData( data, $( "#demographic input:checked" ).val( ) );
 173
 174           $( "#demographic img" ).remove();
 175         },
 176         error: function( xhr ) {
 177           // uh oh
 178           alert( xhr.statusText );
 179         }
 180       } );
 181
 182       function showData( data, demoIndex ) {
 183         // clear any existing demographic shapes
 184         map.geomap( "empty" );
 185
 186         if ( data && data.type == "FeatureCollection" ) {
 187           $.each( data.features, function( ) {
 188             // for each voting district, extract the requested demographic row, demoIndex
 189             // and compare it to the total population row, 0
 190             var infoTable = $( this.properties.Description ),
 191                 pop = parseInt( infoTable.find( "tr:eq(0) td:eq(1)" ).text() ),
 192                 demo = parseInt( infoTable.find( "tr:eq(" + demoIndex + ") td:eq(1)" ).text() ),
 193                 pct = demo / pop;
 194
 195                 // append a shape for the voting district,
 196                 // its fillOpacity is set to the demographic's relationship to total population
 197                 // for performance, don't refresh while adding these, that ending false
 198                 map.geomap( "append", this, { fillOpacity: 1 - pct } , false );
 199           } );
 200
 201           if ( selection ) {
 202             // if there's an existing selection highlight shape,
 203             // append it with a thick red border
 204             map.geomap( "append", selection, { opacity: 1, fillOpacity: 0, color: "red", strokeWidth: "4px" }, false );
 205           }
 206
 207           // refresh the map after appending all the new shapes
 208           map.geomap( "refresh" );
 209         }
 210       }
 211     } );
 212   </script>
 213
 214   <script>
 215     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 216     (function (d, t) {
 217       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 218       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 219       s.parentNode.insertBefore(g, s);
 220     } (document, 'script'));
 221   </script>
 222 </body>
 223 </html>
 224