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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>USA States</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="A demo that pulls in USA state data from GeoCommons">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="css/style.css" />
  10   <style type="text/css">
  11     #map { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
  12   </style>
  13 </head>
  14 <body>
  15   <div>
  16     <div id="map">
  17     </div>
  18     <div class="info">
  19       <div class="links">
  20         <a href="../" class="docLink">&lt; docs</a>
  21         <a href="http://jsfiddle.net/ryanttb/sh8uH/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  22       </div>
  23       <h1>USA States</h1>
  24       <p class="not-mobile">This map reads USA state boundary data as a GeoJSON FeatureCollection and draws it on top of OpenStreetMap.</p>
  25       <p>Click a state to change its color!</p>
  26     </div>
  27   </div>
  28   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  29   <script src="js/iecors.js"></script>
  30   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  31   <script>
  32     $(function () {
  33       var map = $("#map").geomap({
  34         center: [-71.0595678, 42.3604823],
  35         zoom: 6,
  36         mode: "drawPoint",
  37         shape: function (e, geo) {
  38           var state = map.geomap("find", geo, 0);
  39           if (state.length > 0) {
  40             map.geomap("remove", state[0]);
  41
  42             var color = Math.round(0xffffff * Math.random()).toString(16);
  43
  44             map.geomap("append", state[0], {
  45               color: "#" + ( color.length == 5 ? "0" : "" ) + color
  46             });
  47           }
  48         }
  49       }),
  50       states = null;
  51
  52       $.ajax({
  53         url: "http://data.jquerygeo.com/usastates.json",
  54         dataType: "json",
  55         success: function (result) {
  56           states = result;
  57           map.geomap("append", states);
  58         },
  59         error: function (xhr) {
  60           alert(xhr.statusText);
  61         }
  62       });
  63     });
  64   </script>
  65 </body>
  66 </html>