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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>services | geomap</title>
<meta name="description" content="geomap services option">
<meta name="author" content="Ryan Westphal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css?v=2">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>
<body>
<div id="services" data-role="page">
<div data-role="header" data-theme="f">
<h1>services</h1>
</div>
<div data-role="content">
<table>
<tr>
<th>type</th>
<td>Array</td>
</tr>
<tr>
<th>default</th>
</tr>
<tr>
<td colspan=2><code><pre>[ {
"class": "osm",
type: "tiled",
src: function( view ) {
return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "&copy; OpenStreetMap &amp; contributors, CC-BY-SA"
} ]</pre></code></td>
</tr>
<tr>
<th>init</th>
</tr>
<tr>
<td colspan=2><pre><code>$( <i>selector</i> ).geomap( { services: [ {
"class": "osm",
type: "tiled",
src: function( view ) {
return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "&copy; OpenStreetMap &amp; contributors, CC-BY-SA",
style: {
visibility: "visible",
opacity: 1.0
}
} ] } );</code></pre></td>
</tr>
<tr>
<th>get</th>
<td><pre><code>var services = $( <i>selector</i> ).geomap( "option", "services" );</code></pre></td>
</tr>
<tr>
<th>set</th>
</tr>
<tr>
<td colspan=2><pre><code>$( <i>selector</i> ).geomap( "option", "services", [ {
id: "mapquest-open",
"class": "basemap",
type: "tiled",
src: function( view ) {
return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'></p>"
} ] );</code></pre></td>
</tr>
</table>
<p>The services option is an array of service objects. The service objects are JavaScript objects that control how the geomap widget displays map images.</p>
<p>By default, geomap will display OpenStreetMap tiles. You can change all services at once by setting this option with an entirely new array of service objects. You can set a specific part of of a specific service by getting the current array, modifying, adding, or deleting one of the service objects and then re-setting the services option with the modified array.</p>
<pre><code><span class="comment">// get the current services array</span>
var services = map.geomap( "option", "services" );
<span class="comment">// add a service</span>
services.push( {
id: "Ortho_MapQuest",
type: "tiled",
src: function (view) {
return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest<a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'><p>"
} );
<span class="comment">// re-set the services option</span>
map.geomap( "option", "services", services );</code></pre>
<h2>service object</h2>
<p>A service object has six properties, two of which are required. The id and class properties are optional but at least one is recommended so you can target specific services with the toggle and opacity methods.</p>
<h3>id</h3>
<p>Each service can have an id that distinguishes it from other service objects in the array. The id is a string and must be follow the HTML element id naming conditions. If present, the id must be unique across all services in all maps as well as unique from any other HTML element on the page. The default service object of a geomap widget does not have an id.</p>
<h3>class</h3>
<p>Each service can have a class as well. The class is a string and must be follow the CSS class naming conditions. You can consider this as the class of images the service will supply and usually name it after the service, such as osm, mass-gis, etc. The default service object of a geomap widget has the class: osm.</p>
<p>All services also get the class geo-service whether you supply a class to the service object or not. Therefore, the default service is both .osm (as part of its service object) and .geo-service (as added by the widget).</p>
<p>Unfortunately, class is a reserved word in JavaScript. When you specify class in your service object, you must quote the word class. This is exactly how it's done in jQuery itself when applying attributes to an element based on an object. To quote the jQuery API:</p>
<blockquote>The name "class" must be quoted since it is a JavaScript reserved word, and "className" cannot be used since it is not the correct attribute name.</blockquote>
<h3>type</h3>
<p>A service object has a type property which is either "tiled" or "shingled". Tiled servies will get one image request per tile needed to fill a given view when the map refreshes. The tile request's bbox will only be the size of the given tile. Shingled services will get only one image request each time the map refreshes and the bbox will be the extent of the whole map view.</p>
<h3>src</h3>
<p>The src property of a service object can be one of the following three options:</p>
<ul>
<li>a function that accepts an object specifying information about the current image request which <b>returns a URL to an image</b> or null to indicate that no image is available or required</li>
<li>a function that accepts an object specifying information about the current image request which <b>returns a jQuery Promise object</b> and, later, calls either resolve passing a URL to an image or reject to indicate that no image is available</li>
<li>a template string that the geomap widget can use to build a URL itself</li>
</ul>
<p>For tiled services, the image is placed at the tile location specified. For shingled services, the image will fill the whole map view.</p>
<p>If the browser's request of the image results in a 404 status the map will not show that tile or image.</p>
<p>When src is a function, the argument to that function has the following properties:</p>
<table>
<tr>
<th>bbox (Array)</th><td>A <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> of the current tile or image in map units. The map unit type (projected or geodetic) depends on how you last set the bbox or center options on the geomap widget.</td>
</tr>
<tr>
<th>width (Number)</th><td>The width of the tile or image in pixels.</td>
</tr>
<tr>
<th>height (Number)</th><td>The height of the tile or image in pixels.</td>
</tr>
<tr>
<th>zoom (Number)</th><td>The current zoom level of the map during this request.</td>
</tr>
<tr>
<th>tile (Object)</th><td>If the service is tiled, this object has column and row properties specifying the location of the tile of this request in the current zoom, otherwise it is null.</td>
</tr>
<tr>
<th>index (Number)</th><td>A whole number which is usually incremented between requests that you can use to cycle image URLs to different index, e.g., if there are four servers hosting the same tile images named tile0, tile1, tile2 and tile3 you can target them in your src function with the string: "tile" + (view.index % 4).</td>
</tr>
</table>
<p>You can use the properties of this argument to build and return a URL (or initiate an AJAX request and return a Promise).</p>
<p>For more infomration about returning a jQuery Promise, please read the section on <a href="http://api.jquery.com/category/deferred-object/" rel="external">Deferred Objects</a> in the jQuery API documentation. It might useful to know that, as of jQuery 1.5, the <a href="http://api.jquery.com/jQuery.ajax/" rel="external">$.ajax method</a> returns a Promise object. If your ajax call returns a URL to an image, your src function can look something like this:</p>
<pre><code>src: function ( view ) { return $.ajax( { ... } ); }</code></pre>
<p>When src is a string, those same properties can be used in the template by surrounding each property with: {{=propertyName}}.</p>
<p>The default value for src is a function because it is slightly faster than rendering a template. However, as an example, we can rewrite the default src function as a template string:</p>
<pre><code>src: "http://tile.openstreetmap.org/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png"</code></pre>
<p>A couple advantages of using a string are that it is more concise and, unlike a function, can be stored as JSON.</p>
<p>You do not have to have template parameters in the string, so if you want a static map image, you can set src to a static URL.</p>
<h3>attr</h3>
<p>The attr property is optional. It stands for attribution and is a way to give credit to the source of your map imagery. It defaults to an empty string if not specified in a service object. When present, the map widget displays the HTML provided on the bottom-left corner of the map when the service is visible. Users can click links but cannot interact with all other text or images.</p>
<h3>style</h3>
<p>The style property is optional. It contains presentation options for the service.</p>
<p>The visibility property defaults to "visible". It determines whether or not the map will show images from this service while refreshing. You can change the visibility of a service either by changing the visibility property of the service object to "visible" or "hidden" and then setting geomap's services option or by using the toggle method of the geomap widget. The latter is recommended because it is a lot faster and does not cause services to be recreated.</p>
<p>The opacity defaults to 1.0. It determines how transparent a service is when it is visible. Valid values are floating point numbers between 0 and 1 inclusive. Services with an opacity of 0 will not show on the map even if visible is true. You can change the opacity of a service either by changing the opacity property of the service object and then setting geomap's services option or by using the opacity method of the geomap widget. The latter is recommended because it is a lot faster and does not cause services to be recreated.</p>
</div>
</div> <!-- end of #container -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
<script src="../js/script.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</body>
</html>
|
