Export 0.2.1
[platform/framework/web/web-ui-fw.git] / libs / js / jquery-geo-1.0b2 / index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4   <meta charset="utf-8" />
5   <title>jQuery Geo - JavaScript mapping API</title>
6   <meta name="description" content="jQuery Geo - a JavaScript mapping and spatial API as a jQuery plugin" />
7   <meta name="author" content="Ryan Westphal" />
8   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css" />
10   <style type="text/css">
11     html { font:13px/1.231 sans-serif; }
12     
13     body, h1 { margin: 0; padding: 0; }
14     
15     body, select, input, textarea
16     {
17       color: #444;
18     }
19
20     pre
21     {
22       white-space: pre-wrap;
23       white-space: pre-line;
24     }
25     
26     .geomap
27     {
28       background: #444;
29       bottom: 0;
30       left: 0;
31       position: fixed;
32       right: 0;
33       top: 0;
34     }
35     
36     .container
37     {
38       position: relative;
39       margin: 32px auto;
40       width: 80%;
41     }
42     
43     .project-links
44     {
45       float: right;
46     }
47     
48     .header
49     {
50       margin: 32px 0 0 10%;
51     }
52     
53     .header img
54     {
55       height: 64px;
56       width: 64px;
57       vertical-align: bottom;
58     }
59     
60     .header h1
61     {
62       display: inline-block;
63     }
64     
65     .header h1 .framework
66     {
67       color: #fff;
68       font-size: 32px;
69     }
70     
71     .header h1 .subtitle
72     {
73       color: #faa;
74       display: block;
75       font-size: 14px;
76       font-style: italic;
77       margin-left: 48px;
78     }
79     
80     h2
81     {
82       clear: both;
83       margin-bottom: 8px;
84     }
85
86     time
87     {
88       font-size: 8pt;
89       font-style: italic;
90       margin: 2px;
91     }
92
93     .main
94     {
95       background: #fff;
96       border-radius: 8px;
97       box-shadow: 2px 2px #555;
98       margin-top: 128px;
99       padding: 32px;
100     }
101
102     .thanks
103     {
104       list-style-type: none;
105     }
106
107     .thanks li
108     {
109       display: inline-block;
110       margin: 1em;
111     }
112
113     #jQueryLogo
114     {
115       background: #39414A;
116       border-radius: 8px;
117       padding: .5em;
118     }
119
120   </style>
121 </head>
122 <body>
123   <div class="geomap">
124     <div class="header">
125       <img src="apple-touch-icon.png" alt="" />
126       <h1><span class="framework">jQuery Geo</span><span class="subtitle">write less, map more</span></h1>
127     </div>
128   </div>
129   <div class="container">
130     <div class="main" role="main">
131
132       <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
133       
134       <g:plusone></g:plusone>
135
136       <div class="nav project-links">
137         <a href="http://jquerygeo.com/1.0b1/" title="Documentation and demos">Docs &amp; Demos</a>
138         <a href="https://github.com/AppGeo/geo/" title="Source code on GitHub">GitHub</a>
139       </div>
140
141       <h2>jQuery Geo - a JavaScript mapping API</h2>
142
143       <p>jQuery Geo, an open-source geospatial mapping project from Applied Geographics, provides a streamlined JavaScript API for a large percentage of your online mapping needs. Whether you just want to display a map on a wep page as quickly as possible or you are a more advanced GIS user, jQuery Geo can help!</p>
144       
145       <p>You can check back here or follow <a href="https://twitter.com/jQueryGeo">@jQueryGeo</a> on Twitter for release announcements. Also, head over to the lead developer's Twitter account, <a href="https://twitter.com/ryanttb">@ryanttb</a>, for development info, links, or to ask questions.</p>
146
147       <h2>Download</h2>
148
149       <p>Using jQuery Geo requires adding one element, including one script (apart from jQuery itself) and calling one function. The following copy-and-paste snippet will help you get started.</p>
150       <pre>&lt;div id=&quot;map&quot; style=&quot;height: 320px;&quot;&gt;&lt;/div&gt;
151 &lt;script src=&quot;http://code.jquery.com/jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
152 &lt;script src=&quot;http://code.jquerygeo.com/jquery.geo-1.0b1.min.js&quot;&gt;&lt;/script&gt;
153 &lt;script&gt;$(function() { $( &quot;#map&quot; ).geomap( ); });&lt;/script&gt;</pre>
154
155       <p>code.jquerygeo.com is on the CloudFlare Content Delivery Network (CDN) so our minified, gzipped library will get to your client as fast as possible!</p>
156
157       <h2>Beta 1 released!</h2>
158       <time>2012-07-30</time>
159
160       <p>Over 120 commits and five months after the release of alpha 4, jQuery Geo is now feature complete with what we planned for version 1.0!</p>
161
162       <p>The highlights are mentioned here and you can follow the link at the end to read more details.</p>
163
164       <h3>New interaction engine</h3>
165
166       <p>User interaction is a big part of an interactive map widget, obviously!, and in beta 1 we have optimized panning, zooming, and how they work together. Your maps should feel more responsive overall.</p>
167
168       <h3>Wicked fast mobile</h3>
169
170       <p>Using CSS3 features on modern mobile devices brings tremendous speed improvements to iOS and Android.</p>
171
172       <h3>New default map</h3>
173
174       <p>Probably the most noticable change, jQuery Geo is still using OpenStreetMap data by default but in the form of tiles rendered by <a href="http://open.mapquest.com/" target="_blank">mapquest open</a>. It's your same open data but the servers are faster and the cartography is nicer.</p>
175
176       <h3>New build environment</h3>
177
178       <p>jQuery Geo now builds with <a href="https://github.com/cowboy/grunt" target="_blank">grunt</a> from Ben Alman making it 100% lint free, smaller, and supporting the next generation of the jQuery Plugins website.</p>
179
180       <h3>Drag modes</h3>
181
182       <p>There is a whole new mode style called drag. Previously, draw modes such as drawPoint and drawPolygon, allow the user to perform individual clicks or taps to create shapes. New modes have been added that trigger shape events on a single motion: dragBox and dragCircle. They disable map panning and allow quick digitization of rectangles and circles, great for spatial queries and selecting! They both send GeoJSON Polygon objects as the geo argument to your shape event handler.</p>
183
184       <h3>Load events</h3>
185
186       <p>Two new events, loadstart and loadend, allow you to display indicators or give feedback to users while map tiles or other images are downloading.</p>
187
188       <h3>Forcing refresh</h3>
189
190       <p>Sometimes you have time-dependent, continuously updated data and images coming from a map server. New arguments to refresh allow you to get updated images even if the map's viewport (and thus, image URLs) hasn't changed. You can also refresh only specific services that you know will have changed, leaving other more static images in place.</p>
191
192       <h3>Zoom level constraints</h3>
193
194       <p>Whether you have a tiled or non-tiled (all shingled) map, you can now limit how far in and/or out a user can zoom with the new zoomMax and zoomMin options.</p>
195
196       <h3>Breaking</h3>
197
198       <p>There is one, small breaking change in how all template strings are processed. This is due to a change (and finalization in the API) to jsRender, which jQuery Geo uses for a service's src template strings and measureLabels template strings. In short, use {{:variable}} where you used to use {{=variable}}. You can read more about this change on Boris Moore's blog post: <a href="http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html" target="_blank">http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html</a>.</p>
199
200       <h3>Enjoy!</h3>
201
202       <p>Thanks for checking out jQuery Geo! We hope you find it useful and will keep you updated as we press on to a 1.0 release!</p>
203
204       <p><a href="index-full.html">Click here to checkout the full changelog</a></p>
205
206       <h2>Edge</h2>
207       <p>The links above will always point to the latest stable release. However, you can test the most recently committed docs, code &amp; demos by heading over to the test release.</p>
208       <a data-role="button" href="http://jquerygeo.com/test/" title="jQuery Geo test build">Test docs &amp; demos</a>
209
210       <h2>Thanks!</h2>
211
212       <ul class="thanks">
213         <li>
214           <!-- AppGeo -->
215           <a href="http://www.appgeo.com"><img width="180" height="48" title="Applied Geographics" alt="" src="data:image/png;base64,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" /></a>
216         </li>
217
218         <li>
219           <!-- jQuery -->
220           <a href="http://jquery.com"><img id="jQueryLogo" title="jQuery" alt="" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /></a>
221         </li>
222
223         <li>
224           <!-- html5 -->
225           <img title="HTML5" alt="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_64.png" />
226         </li>
227
228         <li>
229           <!-- (mt) -->
230           <a href="http://mediatemple.net"><img title="Media Temple" alt="" src="http://mediatemple.net/_images/partnerlogos/mt-120x60-dk.png" /></a>
231         </li>
232
233         <li>
234           <!-- CloudFlare -->
235           <a href="http://www.cloudflare.com"><img title="CloudFlare" alt="" src="https://www.cloudflare.com/media/images/web-badges/cf-web-badges-a-gray-on.png" /></a>
236         </li>
237       </ul>
238
239       
240     </div>
241   </div>
242   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
243   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
244   <script type="text/javascript" src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
245   <script type="text/javascript">
246     $(function () {
247       var map;
248
249       $(".nav").buttonset();
250       $("a").filter("[data-role='button']").button();
251
252       if (navigator.geolocation) {
253         navigator.geolocation.getCurrentPosition(function (p) {
254           initMap([p.coords.longitude, p.coords.latitude]);
255         }, function (error) {
256           initMap();
257         });
258       } else {
259         initMap();
260       }
261
262       function initMap(center) {
263         map = $(".geomap").geomap({
264           center: center || [-71.0597732, 42.3584308],
265           zoom: 7
266         });
267
268         $( ".osm" ).geomap("opacity", .5);
269       }
270    });
271   </script>
272
273   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
274
275   <script type="text/javascript">
276     (function() {
277       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
278       po.src = 'https://apis.google.com/js/plusone.js';
279       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
280     })();
281   </script>
282
283   <script type="text/javascript">
284     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
285     (function (d, t) {
286       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
287       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
288       s.parentNode.insertBefore(g, s);
289     } (document, 'script'));
290   </script>
291 </body>
292 </html>