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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>geometry function examples</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="Examples of geometry functions">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       position: fixed;
  15       left: 0;
  16       top: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20     .calc
  21     {
  22       display: inline-block;
  23       vertical-align: top;
  24     }
  25     td
  26     {
  27       max-width: 96px;
  28       overflow: hidden;
  29       text-overflow: ellipsis;
  30     }
  31     .red { color: #c00; }
  32     .green { color: #0c0; }
  33     .blue { color: #00c; }
  34   </style>
  35 </head>
  36 <body>
  37   <div>
  38     <div id="map">
  39     </div>
  40     <div class="info">
  41       <div class="links">
  42         <a href="../" class="docLink">&lt; docs</a>
  43         <a href="http://jsfiddle.net/ryanttb/yv58r/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  44       </div>
  45       <h1>
  46         geometry functions</h1>
  47       <p>This example appends a few Points, LineStrings, and Polygons. It then calculates some relationships and info about the shapes using the geometry functions in the $.geo namespace.</p>
  48       <div class="calc">
  49         <table>
  50           <tr>
  51             <td></td>
  52             <th>distance</th>
  53           </tr>
  54           <tr>
  55             <th><span class="red">pt</span>, <span class="red">pt</span></th>
  56             <td class="rpt-2-rpt-distance"></td>
  57           </tr>
  58           <tr>
  59             <th><span class="red">pt</span>, <span class="red">line</span></th>
  60             <td class="rpt-2-line-distance"></td>
  61           </tr>
  62           <tr>
  63             <th><span class="red">pt</span>, <span class="red">poly</span></th>
  64             <td class="rpt-2-poly-distance"></td>
  65           </tr>
  66           <tr>
  67             <th><span class="red">line</span>, <span class="red">pt</span></th>
  68             <td class="line-2-rpt-distance"></td>
  69           </tr>
  70           <tr>
  71             <th><span class="red">line</span>, <span class="red">line</span></th>
  72             <td class="line-2-line-distance"></td>
  73           </tr>
  74           <tr>
  75             <th><span class="red">line</span>, <span class="red">poly</span></th>
  76             <td class="line-2-poly-distance"></td>
  77           </tr>
  78           <tr>
  79             <th><span class="red">poly</span>, <span class="red">pt</span></th>
  80             <td class="poly-2-rpt-distance"></td>
  81           </tr>
  82           <tr>
  83             <th><span class="red">poly</span>, <span class="red">line</span></th>
  84             <td class="poly-2-line-distance"></td>
  85           </tr>
  86           <tr>
  87             <th><span class="red">poly</span>, <span class="red">poly</span></th>
  88             <td class="poly-2-poly-distance"></td>
  89           </tr>
  90         </table>
  91       </div>
  92       <div class="calc">
  93         <table>
  94           <tr>
  95             <td></td>
  96             <th>contains</th>
  97           </tr>
  98           <tr>
  99             <th><span class="red">pt</span>, <span class="red">pt</span></th>
 100             <td class="rpt-2-rpt-contains"></td>
 101           </tr>
 102           <tr>
 103             <th><span class="red">pt</span>, <span class="red">line</span></th>
 104             <td class="rpt-2-line-contains"></td>
 105           </tr>
 106           <tr>
 107             <th><span class="red">pt</span>, <span class="red">poly</span></th>
 108             <td class="rpt-2-poly-contains"></td>
 109           </tr>
 110           <tr>
 111             <th><span class="red">line</span>, <span class="red">pt</span></th>
 112             <td class="line-2-rpt-contains"></td>
 113           </tr>
 114           <tr>
 115             <th><span class="red">line</span>, <span class="red">line</span></th>
 116             <td class="line-2-line-contains"></td>
 117           </tr>
 118           <tr>
 119             <th><span class="red">line</span>, <span class="red">poly</span></th>
 120             <td class="line-2-poly-contains"></td>
 121           </tr>
 122           <tr>
 123             <th><span class="red">poly</span>, <span class="red">pt</span></th>
 124             <td class="poly-2-rpt-contains"></td>
 125           </tr>
 126           <tr>
 127             <th><span class="red">poly</span>, <span class="red">line</span></th>
 128             <td class="poly-2-line-contains"></td>
 129           </tr>
 130           <tr>
 131             <th><span class="red">poly</span>, <span class="red">poly</span></th>
 132             <td class="poly-2-poly-contains"></td>
 133           </tr>
 134         </table>
 135       </div>
 136       <div class="calc">
 137         <table>
 138           <tr>
 139             <td></td>
 140             <th>contains</th>
 141           </tr>
 142           <tr>
 143             <th><span class="red">poly</span>, <span class="green">pt</span></th>
 144             <td class="poly-2-gpt-contains"></td>
 145           </tr>
 146           <tr>
 147             <th><span class="red">poly</span>, <span class="green">line</span></th>
 148             <td class="poly-2-gline-contains"></td>
 149           </tr>
 150           <tr>
 151             <th><span class="red">poly</span>, <span class="green">poly</span></th>
 152             <td class="poly-2-gpoly-contains"></td>
 153           </tr>
 154           <tr>
 155             <th><span class="red">poly</span>, <span class="blue">poly</span></th>
 156             <td class="poly-2-bpoly-contains"></td>
 157           </tr>
 158         </table>
 159       </div>
 160       <div class="calc">
 161         <table>
 162           <tr>
 163             <td></td>
 164             <th>centroid</th>
 165           </tr>
 166           <tr>
 167             <th><span class="red">pt</span></th>
 168             <td class="rpt-centroid"></td>
 169           </tr>
 170           <tr>
 171             <th><span class="red">line</span></th>
 172             <td class="rline-centroid"></td>
 173           </tr>
 174           <tr>
 175             <th><span class="red">poly</span></th>
 176             <td class="rpoly-centroid"></td>
 177           </tr>
 178           <tr>
 179             <th><span class="green">poly</span></th>
 180             <td class="gpoly-centroid"></td>
 181           </tr>
 182           <tr>
 183             <th><span class="blue">poly</span></th>
 184             <td class="bpoly-centroid"></td>
 185           </tr>
 186         </table>
 187       </div>
 188     </div>
 189   </div>
 190   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 191   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
 192   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
 193   <script>
 194     $(function () {
 195       // create a map
 196       var map = $("#map").geomap({
 197         center: [-71.0595678, 42.3604823],
 198         zoom: 8
 199       });
 200
 201       // append a red Point
 202       var pt = {
 203         type: "Point",
 204         coordinates: [-71, 42]
 205       };
 206       map.geomap("append", pt);
 207
 208       // append a red LineString
 209       var line = {
 210         type: "LineString",
 211         coordinates: [
 212           [-71.5, 42],
 213           [-72, 41.5]
 214         ]
 215       };
 216       map.geomap("append", line);
 217
 218       // append a red Polygon
 219       var poly = {
 220         type: "Polygon",
 221         coordinates: [[
 222           [-72.5, 41.7],
 223           [-72.3, 41.3],
 224           [-72.7, 41.3],
 225           [-72.5, 41.7]
 226         ]]
 227       };
 228       map.geomap("append", poly);
 229
 230       // distance calculations between all red shapes
 231       $(".rpt-2-rpt-distance").text($.geo.distance(pt, pt));
 232       $(".rpt-2-line-distance").text($.geo.distance(pt, line));
 233       $(".rpt-2-poly-distance").text($.geo.distance(pt, poly));
 234
 235       $(".line-2-rpt-distance").text($.geo.distance(line, pt));
 236       $(".line-2-line-distance").text($.geo.distance(line, line));
 237       $(".line-2-poly-distance").text($.geo.distance(line, poly));
 238
 239       $(".poly-2-rpt-distance").text($.geo.distance(poly, pt));
 240       $(".poly-2-line-distance").text($.geo.distance(poly, line));
 241       $(".poly-2-poly-distance").text($.geo.distance(poly, poly));
 242
 243       // contains relationships between all red shapes
 244       $(".rpt-2-rpt-contains").text($.geo.contains(pt, pt));
 245       $(".rpt-2-line-contains").text($.geo.contains(pt, line));
 246       $(".rpt-2-poly-contains").text($.geo.contains(pt, poly));
 247
 248       $(".line-2-rpt-contains").text($.geo.contains(line, pt));
 249       $(".line-2-line-contains").text($.geo.contains(line, line));
 250       $(".line-2-poly-contains").text($.geo.contains(line, poly));
 251
 252       $(".poly-2-rpt-contains").text($.geo.contains(poly, pt));
 253       $(".poly-2-line-contains").text($.geo.contains(poly, line));
 254       $(".poly-2-poly-contains").text($.geo.contains(poly, poly));
 255
 256       // append a green Point inside the red Polygon
 257       var gpt = {
 258         type: "Point",
 259         coordinates: [-72.5, 41.6]
 260       };
 261       map.geomap("append", gpt, { color: "green" });
 262
 263       // append a green LineString inside the red Polygon
 264       var gline = {
 265         type: "LineString",
 266         coordinates: [
 267           [-72.55, 41.5],
 268           [-72.45, 41.5]
 269         ]
 270       };
 271       map.geomap("append", gline, { color: "green", strokeWidth: "3px" });
 272
 273       // append a green Polygon completely inside the red Polygon
 274       var gpoly = {
 275         type: "Polygon",
 276         coordinates: [[
 277           [-72.55, 41.45],
 278           [-72.5, 41.35],
 279           [-72.65, 41.35],
 280           [-72.55, 41.45]
 281         ]]
 282       };
 283       map.geomap("append", gpoly, { color: "green", strokeWidth: "3px" });
 284
 285       // contains relationships between the red polygon & some green shapes
 286       // these all return true because the red polygon completely contains all of them
 287       $(".poly-2-gpt-contains").text($.geo.contains(poly, gpt));
 288       $(".poly-2-gline-contains").text($.geo.contains(poly, gline));
 289       $(".poly-2-gpoly-contains").text($.geo.contains(poly, gpoly));
 290
 291       // append a blue Polygon partially inside the red Polygon
 292       var bpoly = {
 293         type: "Polygon",
 294         coordinates: [[
 295           [-72.35, 41.45],
 296           [-72.25, 41.35],
 297           [-72.45, 41.35],
 298           [-72.35, 41.45]
 299         ]]
 300       };
 301       map.geomap("append", bpoly, { color: "blue", strokeWidth: "3px" });
 302
 303       // contains relationships between the red polygon the blue polygon
 304       // this returns false because the red polygon does not completely contain the blue one
 305       $(".poly-2-bpoly-contains").text($.geo.contains(poly, bpoly));
 306
 307       // centroid calculations for all red shapes and the green and blue polygons
 308       $(".rpt-centroid").text($.geo.centroid(pt).coordinates.join(", "));
 309       $(".rline-centroid").text($.geo.centroid(line).coordinates.join(", "));
 310       $(".rpoly-centroid").text($.geo.centroid(poly).coordinates.join(", "));
 311       $(".gpoly-centroid").text($.geo.centroid(gpoly).coordinates.join(", "));
 312       $(".bpoly-centroid").text($.geo.centroid(bpoly).coordinates.join(", "));
 313
 314     });
 315   </script>
 316
 317   <script>
 318     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 319     (function (d, t) {
 320       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 321       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 322       s.parentNode.insertBefore(g, s);
 323     } (document, 'script'));
 324   </script>
 325 </body>
 326 </html>