4 <title>geomap find test</title>
5 <link rel="stylesheet" type="text/css" href="css/style.css" />
8 <a href="../" class="docLink">< docs</a>
9 <h1>geomap find test</h1>
10 <div class="geomap" style="width: 640px; height: 480px;"></div>
12 <h2>Click the geometry!</h2>
14 <button id="findAll" type="button">find( "*" )</button>
16 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
17 <script src="../jquery.geo-test.min.js"></script>
20 var geomap = $(".geomap").geomap({
21 center: [-71.05, 42.35],
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
27 cursors: { find: "crosshair" },
28 click: function (e, geo) {
30 result = geomap.geomap("find", geo, 8);
32 $.each(result, function () {
33 outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
36 $(".output ul").html(outputHtml);
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]]] }
50 for (var geomKey in geoms) {
51 geomap.geomap("append", geoms[geomKey]);
54 $( "#findAll" ).click( function() {
56 result = geomap.geomap( "find", "*" );
58 $.each(result, function () {
59 outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
62 $(".output ul").html(outputHtml);