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