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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!DOCTYPE html>
<html>
<head>
<title>append to service test</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta name="description" content="An example of append to service">
<meta name="author" content="Ryan Westphal">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#map
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>
<div id="map">
</div>
<div class="info">
<div class="links">
<a href="../" class="docLink">< docs</a>
<a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
</div>
<h1>append to service</h1>
<p>This page is similar to the regular append example but tests appending shapes to a specific service instead of the map itself. The result, however, should look exactly the same.</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
<script>
$(function () {
// create a map
var map = $( "#map" ).geomap( {
center: [-75, 40],
zoom: 5
} ),
service = map.find( ".osm" );
// create a geometry collection having a
// Point, LineString and Polygon
var gcol = {
type: "GeometryCollection",
geometries: [
{
type: "Point",
coordinates: [-71, 42]
},
{
type: "LineString",
coordinates: [
[-71, 42],
[-75, 39.5]
]
},
{
type: "Polygon",
coordinates: [[
[-75, 39.7],
[-74.8, 39.3],
[-75.2, 39.3],
[-75, 39.7]
]]
}
]
};
// append the entire collection as a single geometry
// do not refresh the service yet
service.geomap("append", gcol, { strokeWidth: "8px", color: "#dedede" }, false);
// append the point
// I'm refreshing the service just as an example
// since true is the default, this is the same as not passing it
// we normally would pass false because there's more append calls below
service.geomap("append", gcol.geometries[0], true);
// append the LineString
// don't refresh the service yet,
// this is the correct way when there's more drawing to do
service.geomap("append", gcol.geometries[1], false);
// append the Polygon with a blue style
// refresh will default to true and the service will redraw
// even if we passed false to all append calls above
service.geomap("append", gcol.geometries[2], { color: "#00d" });
});
</script>
</body>
</html>
|
