geo/index.html at master · pgirard/geo · GitHub

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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery Geo</title>
  <meta name="description" content="jQuery Geo - A spatial mapping plugin for jQuery" />
  <meta name="author" content="Ryan Westphal" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  <style type="text/css">
    html { font:13px/1.231 sans-serif; *font-size:small; }

    body, h1 { margin: 0; padding: 0; }

    body, select, input, textarea
    {
      color: #444;
    }

    .geomap
    {
      background: #444;
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
    }

    .container
    {
      position: relative;
      margin: 32px auto;
      width: 80%;
    }

    .nav
    {
      float: right;
    }

    .header
    {
      margin: 32px 0 0 10%;
    }

    .header img
    {
      height: 64px;
      width: 64px;
      vertical-align: bottom;
    }

    .header h1
    {
      display: inline-block;
    }

    .header h1 .framework
    {
      color: #fff;
      font-size: 32px;
    }

    .header h1 .subtitle
    {
      color: #faa;
      display: block;
      font-size: 14px;
      font-style: italic;
      margin-left: 48px;
    }

    h2 { margin-bottom: 8px; }

    time
    {
      font-size: 8pt;
      font-style: italic;
      margin: 2px;
    }

    .main
    {
      background: #fff;
      border-radius: 8px;
      box-shadow: 2px 2px #555;
      margin-top: 128px;
      padding: 32px;
    }
  </style>
</head>
<body>
  <div class="geomap">
    <div class="header">
      <img src="apple-touch-icon.png" alt="" />
      <h1><span class="framework">jQuery</span><span class="subtitle">write less, map more</span></h1>
    </div>
  </div>
  <div class="container">
    <div class="main" role="main">
      <div class="nav">
        <a href="http://jquerygeo.com/1.0a3/" title="Documentation and demos">Documentation &amp; Demos</a>
        <a href="https://github.com/AppGeo/geo/" title="Source code on GitHub">GitHub Project</a>
      </div>
      <h2>jQuery Geo - an interactive mapping plugin</h2>
      <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>
      <p>This project is considered alpha only because it does not yet fully implement the feature set of our scheduled beta release. Alpha releases are stable and should not change much as we port technology from our internal library to the open source one.</p>

      <h2>Alpha 3 released!</h2>
      <time>2011-11-01</time>
      <h3>jQuery Geo 1.0 Alpha 3 is mostly about sketching!</h3>
      <ul>
        <li>new modes: drawPoint, drawLineString, and drawPolygon allow users to draw on your map</li>
        <li>new event: shape triggers anytime a user draws a feature</li>
        <li>new style option: drawStyle lets you change how the shapes look while being drawn</li>
      </ul>
      <h3>It's also about geometry functions!</h3>
      <ul>
        <li>$.geo's center, height/width, expandBy, scaleBy &amp; reaspect functions operate on bounding boxes</li>
        <li>$.geo's bbox, distance, contains &amp; centroid functions operate on geometries</li>
      </ul>
      <p>Many examples have more class and now link to jsFiddles to further explain what's going on!</p>
      <h3>And a tiny bit about size</h3>
      <p>jQuery Geo is now hosted on a CDN with gzip enabled bringing the entire library to your neighborhood at under 18k.</p>
      <h3>Breaking</h3>
      <p>There are some minor breaking changes to make the API more consistent.</p>
      <ul>
        <li>The getPixelSize function is now a read-only option named pixelSize: <pre><code>$( &quot;#map&quot; ).geomap( &quot;option&quot;, &quot;pixelSize&quot; );</code></pre></li>
        <li>The shapeStyle function is also now an option, e.g.: <pre><code>$( &quot;#map&quot; ).geomap( &quot;option&quot;, &quot;shapeStyle&quot;, { color: &quot;red&quot; } );</code></pre></li>
        <li>
          The boolean visible property on service objects is now the visibility property found in CSS and geomap styles and can be &quot;visible&quot; or &quot;hidden&quot;:
          <pre><code>$( &quot;#map&quot; ).geomap( { services: [ { id: &quot;roads&quot;, visibility: &quot;hidden&quot;, ... } ] } );</code></pre>
        </li>
      </ul>

      <h2>Download</h2>
      <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>
      <pre>&lt;div id=&quot;map&quot; style=&quot;height: 320px;&quot;&gt;&lt;/div&gt;
&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
&lt;script src="http://code.jquerygeo.com/jquery.geo-1.0a3.min.js"&gt;&lt;/script&gt;
&lt;script&gt;$(function() { $( &quot;#map&quot; ).geomap( ); });&lt;/script&gt;</pre>
      <h2>Edge</h2>
      <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>
      <a data-role="button" href="http://jquerygeo.com/test/" title="jQuery Geo test build">Test docs &amp; demos</a>
    </div>
  </div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <script type="text/javascript" src="http://code.jquerygeo.com/jquery.geo-1.0a3.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".nav").buttonset();
      $("a").filter("[data-role='button']").button();

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (p) {
          initMap([p.coords.longitude, p.coords.latitude]);
        }, function (error) {
          initMap();
        });
      } else {
        initMap();
      }

      function initMap(center) {
        map = $(".geomap").geomap({
          center: center || [-71.0597732, 42.3584308],
          zoom: 7
        });

        $( ".geomap .osm" ).geomap("opacity", .5);
      }
   });
  </script>
  <script type="text/javascript">
    var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
    (function (d, t) {
      var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
      g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g, s);
    } (document, 'script'));
  </script>
</body>
</html>