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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5
   6   <title>Census</title>
   7   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   8
   9   <meta name="description" content="Displaying Census data">
  10   <meta name="author" content="Ryan Westphal">
  11   <link rel="stylesheet" type="text/css" href="css/style.css" />
  12   <style type="text/css">
  13     #map
  14     {
  15       position: fixed;
  16       bottom: 0;
  17       left: 0;
  18       right: 0;
  19       top: 0;
  20     }
  21     </style>
  22 </head>
  23 <body>
  24   <div id="map"></div>
  25   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  27   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  28   <script>
  29     $(function () {
  30
  31       $.ajaxTransport( function( options, originalOptions, jqXHR ) {
  32         var xdr;
  33
  34         return {
  35           send: function( _, completeCallback ) {
  36             xdr = new XDomainRequest();
  37             xdr.onload = function() {
  38               var responses = {
  39                 text: xdr.responseText
  40               };
  41
  42               // force status code to 200, XDomainRequest rejects all other successful status codes
  43               if (xdr.contentType.match(/\/json/)) {
  44                 options.dataTypes.push("json");
  45                 completeCallback(200, 'success', responses);
  46               } else {
  47                 completeCallback(200, 'success', responses);
  48                 // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
  49               }
  50             };
  51             xdr.onerror = xdr.ontimeout = function() {
  52               var responses = {
  53                 text: xdr.responseText
  54               };
  55               completeCallback(400, 'failed', responses);
  56             }
  57
  58             xdr.open(options.type, options.url);
  59             xdr.send(options.data);
  60           },
  61           abort: function() {
  62             if(xdr) {
  63               xdr.abort();
  64             }
  65           }
  66         };
  67       });
  68
  69
  70
  71       // create a map
  72       var map = $("#map").geomap({
  73         center: [-71.0595678, 42.3604823],
  74         zoom: 8,
  75         services: [
  76           {
  77             id: "GeoIQ-acetate",
  78             type: "tiled",
  79             src: function (view) {
  80               return "http://acetate.geoiq.com/tiles/acetate-base/"
  81                + view.zoom + "/"
  82                + view.tile.column + "/"
  83                + view.tile.row
  84                + ".png";
  85             },
  86             attr: "<p>GeoIQ Acetate layer</p>"
  87           },
  88           {
  89             id: "broadbandmap-income-demographics",
  90             type: "tiled",
  91             src: function (view) {
  92               return "http://www.broadbandmap.gov/StamenTiles/demographics/education/"
  93                + view.zoom + "/"
  94                + view.tile.column + "/"
  95                + view.tile.row
  96                + ".png";
  97             },
  98             attr: "<p>National Broadband Map income demographics</p>"
  99           }
 100         ]
 101 //        click: function(e, geo) {
 102 //          $.ajax({
 103 //            url: "http://www.broadbandmap.gov/broadbandmap/demographic/fall2010/coordinates",
 104 //            data: {
 105 //              longitude: geo.coordinates[0],
 106 //              latitude: geo.coordinates[1],
 107 //              format: "jsonp"
 108 //            },
 109 //            dataType: "jsonp",
 110 //            success: function(result) {
 111 //              //alert(result.Results.blockFips + ": " + result.Results.educationBachelorOrGreater);
 112 //            },
 113 //            error: function(xhr) {
 114 //              alert(xhr.statusText);
 115 //            }
 116 //          })
 117 //        }
 118       });
 119
 120       $.ajax({
 121         url: "http://data.jquerygeo.com/gz_2010_25_140_00_500k.geojson",
 122         dataType: "json",
 123         success: function(result) {
 124           map.geomap("append", result);
 125         },
 126         error: function(xhr) {
 127           alert(xhr.statusText);
 128         }
 129       });
 130     });
 131   </script>
 132
 133   <script>
 134     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 135     (function (d, t) {
 136       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 137       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 138       s.parentNode.insertBefore(g, s);
 139     } (document, 'script'));
 140   </script>
 141 </body>
 142 </html>