4 <title>geometry function examples</title>
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.21/themes/blitzer/jquery-ui.css" />
10 <link rel="stylesheet" type="text/css" href="css/style.css" />
11 <style type="text/css">
22 display: inline-block;
29 text-overflow: ellipsis;
32 .green { color: #0c0; }
33 .blue { color: #00c; }
42 <a href="../" class="docLink">< docs</a>
43 <a href="http://jsfiddle.net/ryanttb/yv58r/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
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. The red box is the bbox of all red shapes.</p>
55 <th><span class="red">pt</span>, <span class="red">pt</span></th>
56 <td class="rpt-2-rpt-distance"></td>
59 <th><span class="red">pt</span>, <span class="red">line</span></th>
60 <td class="rpt-2-line-distance"></td>
63 <th><span class="red">pt</span>, <span class="red">poly</span></th>
64 <td class="rpt-2-poly-distance"></td>
67 <th><span class="red">line</span>, <span class="red">pt</span></th>
68 <td class="line-2-rpt-distance"></td>
71 <th><span class="red">line</span>, <span class="red">line</span></th>
72 <td class="line-2-line-distance"></td>
75 <th><span class="red">line</span>, <span class="red">poly</span></th>
76 <td class="line-2-poly-distance"></td>
79 <th><span class="red">poly</span>, <span class="red">pt</span></th>
80 <td class="poly-2-rpt-distance"></td>
83 <th><span class="red">poly</span>, <span class="red">line</span></th>
84 <td class="poly-2-line-distance"></td>
87 <th><span class="red">poly</span>, <span class="red">poly</span></th>
88 <td class="poly-2-poly-distance"></td>
99 <th><span class="red">pt</span>, <span class="red">pt</span></th>
100 <td class="rpt-2-rpt-contains"></td>
103 <th><span class="red">pt</span>, <span class="red">line</span></th>
104 <td class="rpt-2-line-contains"></td>
107 <th><span class="red">pt</span>, <span class="red">poly</span></th>
108 <td class="rpt-2-poly-contains"></td>
111 <th><span class="red">line</span>, <span class="red">pt</span></th>
112 <td class="line-2-rpt-contains"></td>
115 <th><span class="red">line</span>, <span class="red">line</span></th>
116 <td class="line-2-line-contains"></td>
119 <th><span class="red">line</span>, <span class="red">poly</span></th>
120 <td class="line-2-poly-contains"></td>
123 <th><span class="red">poly</span>, <span class="red">pt</span></th>
124 <td class="poly-2-rpt-contains"></td>
127 <th><span class="red">poly</span>, <span class="red">line</span></th>
128 <td class="poly-2-line-contains"></td>
131 <th><span class="red">poly</span>, <span class="red">poly</span></th>
132 <td class="poly-2-poly-contains"></td>
143 <th><span class="red">poly</span>, <span class="green">pt</span></th>
144 <td class="poly-2-gpt-contains"></td>
147 <th><span class="red">poly</span>, <span class="green">line</span></th>
148 <td class="poly-2-gline-contains"></td>
151 <th><span class="red">poly</span>, <span class="green">poly</span></th>
152 <td class="poly-2-gpoly-contains"></td>
155 <th><span class="red">poly</span>, <span class="blue">poly</span></th>
156 <td class="poly-2-bpoly-contains"></td>
167 <th><span class="red">pt</span></th>
168 <td class="rpt-centroid"></td>
171 <th><span class="red">line</span></th>
172 <td class="rline-centroid"></td>
175 <th><span class="red">poly</span></th>
176 <td class="rpoly-centroid"></td>
179 <th><span class="green">poly</span></th>
180 <td class="gpoly-centroid"></td>
183 <th><span class="blue">poly</span></th>
184 <td class="bpoly-centroid"></td>
190 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
191 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
192 <script src="../jquery.geo-test.min.js"></script>
196 var map = $("#map").geomap({
197 center: [-71.0595678, 42.3604823],
201 // bbox of all red shapes
204 // append a red Point
207 coordinates: [-71, 42]
209 map.geomap("append", pt);
211 // use the point's coordinate as our initial bbox (will be converted to bbox)
212 redBbox = $.geo.include( redBbox, pt.coordinates );
214 // append a red LineString
222 map.geomap("append", line);
224 // include the line's bbox
225 redBbox = $.geo.include( redBbox, $.geo.bbox( line ) );
227 // append a red Polygon
237 map.geomap("append", poly);
239 // include the polygon's bbox
240 redBbox = $.geo.include( redBbox, $.geo.bbox( poly ) );
242 // draw the bbox of red shapes
243 map.geomap( "append", $.geo.polygonize( redBbox ), {
248 // distance calculations between all red shapes
249 $(".rpt-2-rpt-distance").text($.geo.distance(pt, pt));
250 $(".rpt-2-line-distance").text($.geo.distance(pt, line));
251 $(".rpt-2-poly-distance").text($.geo.distance(pt, poly));
253 $(".line-2-rpt-distance").text($.geo.distance(line, pt));
254 $(".line-2-line-distance").text($.geo.distance(line, line));
255 $(".line-2-poly-distance").text($.geo.distance(line, poly));
257 $(".poly-2-rpt-distance").text($.geo.distance(poly, pt));
258 $(".poly-2-line-distance").text($.geo.distance(poly, line));
259 $(".poly-2-poly-distance").text($.geo.distance(poly, poly));
261 // contains relationships between all red shapes
262 $(".rpt-2-rpt-contains").text($.geo.contains(pt, pt));
263 $(".rpt-2-line-contains").text($.geo.contains(pt, line));
264 $(".rpt-2-poly-contains").text($.geo.contains(pt, poly));
266 $(".line-2-rpt-contains").text($.geo.contains(line, pt));
267 $(".line-2-line-contains").text($.geo.contains(line, line));
268 $(".line-2-poly-contains").text($.geo.contains(line, poly));
270 $(".poly-2-rpt-contains").text($.geo.contains(poly, pt));
271 $(".poly-2-line-contains").text($.geo.contains(poly, line));
272 $(".poly-2-poly-contains").text($.geo.contains(poly, poly));
274 // append a green Point inside the red Polygon
277 coordinates: [-72.5, 41.6]
279 map.geomap("append", gpt, { color: "green" });
281 // append a green LineString inside the red Polygon
289 map.geomap("append", gline, { color: "green", strokeWidth: "3px" });
291 // append a green Polygon completely inside the red Polygon
301 map.geomap("append", gpoly, { color: "green", strokeWidth: "3px" });
303 // contains relationships between the red polygon & some green shapes
304 // these all return true because the red polygon completely contains all of them
305 $(".poly-2-gpt-contains").text($.geo.contains(poly, gpt));
306 $(".poly-2-gline-contains").text($.geo.contains(poly, gline));
307 $(".poly-2-gpoly-contains").text($.geo.contains(poly, gpoly));
309 // append a blue Polygon partially inside the red Polygon
319 map.geomap("append", bpoly, { color: "blue", strokeWidth: "3px" });
321 // contains relationships between the red polygon the blue polygon
322 // this returns false because the red polygon does not completely contain the blue one
323 $(".poly-2-bpoly-contains").text($.geo.contains(poly, bpoly));
325 // centroid calculations for all red shapes and the green and blue polygons
326 $(".rpt-centroid").text($.geo.centroid(pt).coordinates.join(", "));
327 $(".rline-centroid").text($.geo.centroid(line).coordinates.join(", "));
328 $(".rpoly-centroid").text($.geo.centroid(poly).coordinates.join(", "));
329 $(".gpoly-centroid").text($.geo.centroid(gpoly).coordinates.join(", "));
330 $(".bpoly-centroid").text($.geo.centroid(bpoly).coordinates.join(", "));
336 var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
338 var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
339 g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
340 s.parentNode.insertBefore(g, s);
341 } (document, 'script'));