docs/index.html at master · jQueryGeo/docs · 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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>jQuery Geo docs</title>
  <meta name="description" content="Documentation for jQuery Geo, a JavaScript geospatial mapping plugin">
  <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="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>

<body>

  <div id="index" class="container" data-theme="b">
    <div data-role="header">
      <h1><img src="images/$.geo-logo.png" alt="" />jQuery Geo docs</h1>
    </div>

    <!--div class="jumbotron">
      <h2>Test documentation</h2>
      <p>This is test/pre-release documentation and subject to change.</p>
      <p>If you wish to use the latest test build of jQuery Geo, link to http://test.jquerygeo.com/jquery.geo-1.0.0-test.js in your HTML file.</p>
      <p>Please report any issues to: <a href="https://github.com/jQueryGeo/geo/issues">https://github.com/jQueryGeo/geo/issues</a>
      <p>Thanks!</p>
    </div-->

    <ul data-role="content">
      <h2>welcome!</h2>

      <p>jQuery Geo is an open-source, geospatial mapping jQuery plugin developed with the intention of making spatial web mapping significantly simpler than it may initially seem. jQuery Geo is a custom engine and <b>not</b> a wrapper for other APIs, such as Google Maps.</p>

      <div class="list-group" data-inset="true">
        <a class="list-group-item" href="https://github.com/jQueryGeo/geo" rel="external">source code on GitHub</a>
        <a class="list-group-item" href="https://www.npmjs.com/package/jquery.geo" rel="external">package on npm</a>
      </div>

      <p>Please follow the project on Twitter for release notifications, links to new examples, and other geospatial stuff.</p>

      <div class="list-group" data-inset="true">
        <a class="list-group-item" href="https://twitter.com/geomappin" rel="external">geomappin on Twitter</a>
      </div>

      <p>Please read the following sections for more information and examples, and thank you for considering us! If you have any questions feel free to ask the lead developer on Twitter.</p>

      <div class="list-group" data-inset="true">
        <a class="list-group-item" href="https://twitter.com/ryanttb" rel="external">ryanttb on Twitter</a>
      </div>

      <h2>api docs</h2>

      <div class="list-group" data-inset="true">
        <a class="list-group-item" href="html/index.html"><h3>html</h3><p>Sample HTML to use while laying out your map page</p></a>
        <a class="list-group-item" href="geomap/index.html"><h3>geomap widget</h3><p>This jQuery widget puts interactive maps into your page</p></a>
          <a class="list-group-item" href="geo/index.html"><h3>geometry functions &amp; more!</h3><p>The $.geo namespace has functions for transforming GeoJSON objects</p></a>
      </div>

      <p>This project takes pride in having easy-to-use, up-to-date documentation. Before any code is committed, these docs are updated with any public API changes and sometimes internal design decisions. The side effect is that the documenation may be ahead of the code at times. Also, any undocumented features you find in the source should be ignored or asked about.</p>

      <h2>support</h2>

      <p>jQuery Geo supports the following devices and browsers and may work in other un-tested environments.</p>

      <ul>
        <li>Microsoft Internet Explorer &ndash; IE8 and up</li>
        <li>Microsoft Edge &ndash; latest</li>
        <li>Google Chrome &ndash; latest</li>
        <li>Mozilla Firefox &ndash; latest</li>
        <li>Apple Safari &ndash; latest</li>
        <li>Apple Mobile Safari &ndash; latest</li>
        <li>Google Chrome Android &ndash; latest (note: older non-Chrome Android browsers are not supported)</li>
      </ul>

      <h2 id="showcase">showcase</h2>

      <p>Checkout the showcase to see applications using jQuery Geo: <a href="http://jquerygeo.com/showcase/">http://jquerygeo.com/showcase/</a></p>

      <h2 id="examples">examples</h2>

      <p>Next, here are some code examples! Use these as a suppliment to reading the above documentation sections but, above all, have fun!</p>

      <p>All of these examples are done in JS Bin so you can easily view and play with all the JavaScript that makes them work.</p>

      <div class="list-group" data-inset=true>
        <a class="list-group-item" href="examples/iBICOno"><h3>a simple map</h3><p>one function call to create a map</p></a>
        <a class="list-group-item" href="examples/OqEFUtU" rel="external"><h3>a complicated map</h3><p>attempt to fit many features of jQuery Geo onto one page</p></a>
        <a class="list-group-item" href="examples/anusuy" rel="external">map popup with labels</a>
        <a class="list-group-item" href="examples/acapay" rel="external">map popup with highlight shape</a>
        <a class="list-group-item" href="examples/liven" rel="external">shape styles</a>
        <a class="list-group-item" href="examples/eromeg" rel="external">interactive inset map</a>
        <a class="list-group-item" href="examples/ejujas" rel="external">basemap switcher</a>
        <a class="list-group-item" href="examples/ecequf" rel="external">jQuery Geo logos</a>
        <a class="list-group-item" href="examples/zicam" rel="external">a trail drawn across four services</a>
        <a class="list-group-item" href="examples/osehuj" rel="external">USA states</a>
        <a class="list-group-item" href="examples/ojemed" rel="external">GPS tracking</a>
        <a class="list-group-item" href="examples/efixip" rel="external">Hurricane tracking</a>
        <a class="list-group-item" href="examples/alarah" rel="external">Olympic Volleyball GigaPan</a>
      </div>

      <h3 id="component-examples">component examples</h3>

      <p>This last set of examples attempts to test various components of jQuery Geo in an insolated way. They are the simplest examples.</p>

      <div class="list-group" data-inset="true">
        <a class="list-group-item" href="examples/voduq" rel="external">destroy</a>
        <a class="list-group-item" href="examples/OcuJikU" rel="external"><h3>refresh, false vs. refresh, true</h3><p>a note about dynamic tiles &amp; caching</p></a>
        <a class="list-group-item" href="examples/cuzuy" rel="external">opacity &amp; toggle</a>
        <a class="list-group-item" href="examples/cunof" rel="external">simple inset map</a>
        <a class="list-group-item" href="examples/OGUGaxO" rel="external">$.geo's bbox functions</a>
        <a class="list-group-item" href="examples/mosul" rel="external">shingled (dynamic) services</a>
        <a class="list-group-item" href="examples/tihof" rel="external">string service src</a>
        <a class="list-group-item" href="examples/lapiq" rel="external">alternate tilingScheme</a>
        <a class="list-group-item" href="examples/soxif" rel="external"><h3>visible tiles</h3><p>determining the visible tile range</p></a>
        <a class="list-group-item" href="examples/utuYaj" rel="external"><h3>lon, lat vs. x, y</h3><p>projecting &amp; $.geo.proj</p></a>
        <a class="list-group-item" href="examples/wawix" rel="external">events</a>
        <a class="list-group-item" href="examples/radif" rel="external">append</a>
        <!-- WA boat launch data is missing, we need to find new data to re-enable these examples -->
        <!-- a class="list-group-item" href="examples/ribah" rel="external">markers with CSS</a -->
        <!-- a class="list-group-item" href="examples/gopux" rel="external">markers with canvas</a -->
        <a class="list-group-item" href="examples/vuduv" rel="external">KML points</a>
        <a class="list-group-item" href="examples/savum" rel="external">find</a>
        <a class="list-group-item" href="examples/xohug" rel="external">remove &amp; empty</a>
        <a class="list-group-item" href="examples/segew" rel="external">draw modes</a>
        <a class="list-group-item" href="examples/vexim" rel="external">drag modes</a>
        <a class="list-group-item" href="examples/muzew" rel="external">measure modes</a>
        <a class="list-group-item" href="examples/zacal" rel="external">shapeStyle option</a>
        <a class="list-group-item" href="examples/zegix" rel="external">drawStyle option</a>
        <a class="list-group-item" href="examples/siweh" rel="external">label</a>
        <a class="list-group-item" href="examples/hiwoq" rel="external">geometry functions</a>
        <a class="list-group-item" href="examples/ATEMiZo" rel="external">deferred tiles</a>
      </div>

      <h2>internals</h2>

      <p>Lastly, short of looking through the source code you can read a bit about the internal design decisions we made in the following section.</p>

      <div class="list-group" data-inset=true>
        <a class="list-group-item" href="internals/index.html">internals</a>
      </div>

      <img src="images/bostonbuilt.png" alt="Boston Built badge"/>
    </div>
  </div> <!-- end of #container -->

  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="js/jquery.geo-1.1.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>