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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>geomap find test</title>
   5   <link rel="stylesheet" type="text/css" href="css/style.css" />
   6 </head>
   7 <body>
   8     <a href="../" class="docLink">&lt; docs</a>
   9   <h1>geomap find test</h1>
  10   <div class="geomap" style="width: 640px; height: 480px;"></div>
  11   <div class="output">
  12     <h2>Click the geometry!</h2>
  13     <ul></ul>
  14     <button id="findAll" type="button">find( &quot;*&quot; )</button>
  15   </div>
  16   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  17   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  18   <script>
  19     $(function () {
  20       var geomap = $(".geomap").geomap({
  21         center: [-71.05, 42.35],
  22         zoom: 13,
  23         // because of the geomap widget's custom modes,
  24         // we can set mode to whatever is appropriate for the situation
  25         // here, we set it to find and give the find mode a crosshair cursor
  26         mode: "find",
  27         cursors: { find: "crosshair" },
  28         click: function (e, geo) {
  29           var outputHtml = "",
  30               result = geomap.geomap("find", geo, 8);
  31
  32           $.each(result, function () {
  33             outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
  34           });
  35
  36           $(".output ul").html(outputHtml);
  37         }
  38       });
  39
  40       var geoms = {
  41         one: { type: "Point", coordinates: [-71.05, 42.35] },
  42         two: { type: "Point", coordinates: [-71.045, 42.355] },
  43         three: { type: "Point", coordinates: [-71.055, 42.345] },
  44         four: { type: "Point", coordinates: [-71.055, 42.355] },
  45         five: { type: "Point", coordinates: [-71.045, 42.345] },
  46         six: { type: "LineString", coordinates: [[-71.055, 42.355], [-71.045, 42.355]] },
  47         seven: { type: "Polygon", coordinates: [[[-71.06, 42.3425], [-71.06, 42.3475], [-71.04, 42.3475], [-71.04, 42.3425], [-71.06, 42.3425]]] }
  48       };
  49
  50       for (var geomKey in geoms) {
  51         geomap.geomap("append", geoms[geomKey]);
  52       }
  53
  54       $( "#findAll" ).click( function() {
  55         var outputHtml = "",
  56             result = geomap.geomap( "find", "*" );
  57
  58         $.each(result, function () {
  59           outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
  60         });
  61
  62         $(".output ul").html(outputHtml);
  63       } );
  64     });
  65   </script>
  66 </body>
  67 </html>