forked from Odyno/jquery-position-picker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (181 loc) · 11.9 KB
/
index.html
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Latitude and Longitude Picker jQuery plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" href="css/ol2/theme/default/style.css" type="text/css"/>
<!-- Dependencies: JQuery and OpenLayer API should be loaded first -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/OpenLayers.js"></script>
<!-- CSS and JS for our code -->
<link href="css/jquery-position-picker.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-position-picker.debug.js"></script>
</head>
<body>
<form>
<h1>Latitude and Longitude picker</h1>
<p>A jQuery plugin that creates a location picker on your webpage with a simple input form.
It uses <b>OpenLayer</b> as map view and uses <b>Google Geocoding API</b> services to look for the address and elevation of selected point.
All actions trigger a signals to hock the activity. Works on touchscreen. Easy to customize markup and CSS.</p>
<p>This is a demo page; the newest live demo will always be <a
href="http://www.staniscia.net/repository/lat-lon-picker/index.html">here</a>.
For the code, install instructions and to see how amazingly free it is, <a
href="https://github.com/Odyno/jquery-position-picker">go to Github</a>.
Also, you might find other interesting things on my blog at <a href="http://www.staniscia.net/">www.staniscia.net</a>.
</p>
<H2>The simplest form</H2>
<p>
When you click to set the position
<ul>
<li>After every position change you'll have the fresh latitude, longitude and zoom values in the hidden
fields.
</li>
<li>The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.
</li>
</ul>
</p>
<H3>Code</H3>
<pre class="prettyprint lang-html ">
<fieldset class="gllpLatlonPicker">
<div class="gllpMap"></div>
<br/>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
<input type="hidden" class="gllpLocationName"/>
</fieldset>
</pre>
<H3>Results</H3>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap"></div>
<br/>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
<input type="hidden" class="gllpLocationName"/>
</fieldset>
<H2>Simple form with a OpenLayer search field and default values</H2>
<p>
Click on the map to set the position, search for cities, countries or landmark names.
<ul>
<li>If the search has results, the first element will appear on the map (with the default zoom value 11)
</li>
<li>You can set default latitude, longitude and zoom values in the hidden fields</li>
<li>If you don't give an ID to the map, the script generates one; feel free to use custom ID's though</li>
</ul>
</p>
<H3>Code</H3>
<pre class="prettyprint lang-html">
<fieldset class="gllpLatlonPicker">
<input type="text" class="gllpSearchField" size="45">
<input type="button" class="gllpSearchButton" value="Search"/>
<div class="gllpMap"></div>
<input type="hidden" class="gllpLatitude" value="60"/>
<input type="hidden" class="gllpLongitude" value="30"/>
<input type="hidden" class="gllpZoom" value="10"/>
</fieldset>
</pre>
<H3>Results</H3>
<fieldset class="gllpLatlonPicker">
<input type="text" class="gllpSearchField" size="45"><input type="button" class="gllpSearchButton"
value="Search"/>
<div class="gllpMap"></div>
<input type="hidden" class="gllpLatitude" value="60"/>
<input type="hidden" class="gllpLongitude" value="30"/>
<input type="hidden" class="gllpZoom" value="10"/>
</fieldset>
<H2>Reverse lookup: retrieves the location name and elevation once it's picked</H2>
<p>
Click on the map to set the position.
<ul>
<li>After the position change you'll have the location name in the gllpLocationName field.</li>
<li>If there is no value, the field will be emptied.</li>
<li>The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as
attribute.
</li>
<li>The "location_name_changed" event will be fired after we received the name of the selected location.
</li>
<li>The "elevation_changed" event will be fired after we received the elevation value.</li>
</ul>
</p>
<H3>Code</H3>
<pre class="prettyprint lang-html">
<fieldset class="gllpLatlonPicker">
<div class="gllpMap"></div><br>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
<hr>
Name of Position: <input type="text" class="gllpLocationName" size=42/><br/>
Elevation: <input type="text" class="gllpElevation" size=12/>m
</fieldset>
</pre>
<H3>Results</H3>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap"></div><br>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
<hr>
Name of Position: <input type="text" class="gllpLocationName" size=42/><br/>
Elevation: <input type="text" class="gllpElevation" size=12/>m
</fieldset>
<H2>Editable and selectable Latitude/Longitude values</H2>
<p>
Move the marker, click on the map, search, or set new values to interact.
<ul>
<li>You can set your own latitude, longitude and zoom values. The map shows your data after pressing the
update button.
</li>
<li>You can still hide the Zoom field (or any other fields)</li>
</ul>
</p>
<H3>Code</H3>
<pre class="prettyprint lang-html">
<fieldset class="gllpLatlonPicker">
<div class="gllpMap"></div>
<hr>
Search: <input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="GO!"><br/>
<hr>
Latitude: <input type="text" class="gllpLatitude" value="20"/><br/>
Longitude: <input type="text" class="gllpLongitude" value="20"/><br/>
Zoom: <input type="text" class="gllpZoom" value="3"/>
<input type="button" class="gllpUpdateButton" value="Update Map" size="200px">
<hr>
Name of Position: <input type="text" class="gllpLocationName" size=42/><br/>
Elevation: <input type="text" class="gllpElevation" size=12/>m
</fieldset>
</pre>
<H3>Results</H3>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap"></div>
<hr>
Search: <input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="GO!"><br/>
<hr>
Latitude: <input type="text" class="gllpLatitude" value="20"/><br/>
Longitude: <input type="text" class="gllpLongitude" value="20"/><br/>
Zoom: <input type="text" class="gllpZoom" value="3"/>
<input type="button" class="gllpUpdateButton" value="Update Map" size="200px">
<hr>
Name of Position: <input type="text" class="gllpLocationName" size=42/><br/>
Elevation: <input type="text" class="gllpElevation" size=12/>m
</fieldset>
<H2>Created By</H2>
<p>
<a href="http://www.staniscia.net" target="_blank">Alessandro Staniscia</a><br/>
Sito: <a href="http://www.staniscia.net" target="_blank">www.staniscia.net</a><br/>
linkedin: <a href="http://it.linkedin.com/in/stanisciaalessandro/" target="_blank">http://it.linkedin.com/in/stanisciaalessandro/</a><br/>
Twitter: <a href="https://twitter.com/alexstani" target="_blank">@alexstani</a><br/>
Code: <a href="https://github.com/Odyno/jquery-position-picker" target="_blank">The Code</a><br/>
Demo: <a href="http://www.staniscia.net/repository/lat-lon-picker/index.html" target="_blank">Demo</a><br/>
</p>
<p style="border: 1px solid red; background-color: #ffb174; margin: 10px 0; padding: 30px;">This project is forked from wonderful project of <a href="http://www.wimagguc.com/">Richard Dancsi</a> (<a
href="https://github.com/wimagguc/jquery-latitude-longitude-picker-gmaps">code</a>)</p>
</form>
<a href="https://github.com/Odyno/jquery-position-picker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</body>
</html>