-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
277 lines (232 loc) · 12.7 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Potluckmap by g0v</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Potluckmap</h1>
<h2 class="project-tagline">create an osm map that can be collaboratively built by collecting url's of remote geojson/gpx/csv pages, each of which can be independently edited.</h2>
<a href="https://github.com/g0v/potluckmap" class="btn">View on GitHub</a>
<a href="https://github.com/g0v/potluckmap/zipball/gh-pages" class="btn">Download .zip</a>
<a href="https://github.com/g0v/potluckmap/tarball/gh-pages" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="potluckmap-bring-your-data-to-the-collaborative-map" class="anchor" href="#potluckmap-bring-your-data-to-the-collaborative-map" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Potluckmap: Bring Your Data to the Collaborative Map</h1>
<h2>
<a id="what-can-potluckmap-do-for-you" class="anchor" href="#what-can-potluckmap-do-for-you" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>What Can Potluckmap Do for You?</h2>
<p>Potluckmap displays your (perhaps along with others')
geographic data in OpenStreetMap.
It is written in javascript and has
several interesting features:
<p align="center"><img src="potluckmap.jpg"
alt="screenshot of potluckmap" /></p>
<ol>
<li>You can specify several data sources and
it displays all of them on a single map.
<li>The data sources can be provided in some of the
many formats supported by
<a href="https://github.com/mapbox/leaflet-omnivore">leaflet-omnivore</a>,
including .geojson, .gpx, .csv .
Additionally, potluckmap also accepts
the output of OverpassTurbo requests.
<li>Each data source can be instructed to refresh itself
at fixed time intervals. That is, you can have dynamic,
periodically updated data sources.
<li>Each marker can be rotated at a different angle
as specified by a simple mathematical expression
involving some field from the data.
<li>Potluckmap does not need a server.
It is written in javascript,
and can be run locally in any browser that supports
<a href="https://github.com/ckhung/javascriptCanReadLocalFiles">
reading local files</a>.
Thus all data sources of your project can be local,
and you can run potluckmap offline -- partially or completely
depending on whether you have a local tile server.
</ol>
<p>(1) and (2) makes it suitable for collaboration among different
geographic data providers such as different government departments.
Each party can focus on simply producing/updating
its own geographic data, simply presented in textual format.
The idea is to separate map data from presentation,
analogous to the idea of "separation of content from presentation"
in word processing or web publishing (html + css).</p>
<p>(3) and (4) makes it suitable for displaying moving vehicles
such as buses, cars, and bikes. City governments all over
the planet would save a lot of map-coding efforts
if they simply publish live bus information in one of
the above-mentioned text formats.
Developers can cooperate on a single bus map app.
Or more likely, there will be many compatible competing apps,
each serving all cities at once.
Each traveller can choose her/his favourite
and use just that one app across all cities across the globe.
If you know of more such public dynamic data sources,
please leave a comment at <a href=
"https://github.com/g0v/potluckmap/issues/2">#2</a>.</p>
<p>Privacy-conscious users and users who need to use maps offline
will find (5) particularly appealing.</p>
<h2>
<a id="trying-out-potluckmap-online-without-installing-it" class="anchor" href="#trying-out-potluckmap-online-without-installing-it" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Demo</h2>
<p>The following is an iframe that includes the demo map.
To see how easy it is to change the data sources,
please visit <a href="m/cyut-bus/">the cyut-bus demo page</a>.
A few more off-site examples are
<a href="https://frdm.cyut.edu.tw/~ckhung/saas/potluckmap/m/cyut-bus/">
real-time bus locations originating from CYUT</a>,
<a href="https://frdm.cyut.edu.tw/~ckhung/saas/potluckmap/m/tw-univ/">
some universities of TW</a>, and <a href=
"https://frdm.cyut.edu.tw/~ckhung/saas/potluckmap/m/big-conv/">
biggest convenience stores of TW</a>.
<p class="center"><iframe src="m/cyut-bus/"
width="98%" height="600"></iframe></p>
<h2>
<a id="trying-out-potluckmap-online-without-installing-it" class="anchor" href="#trying-out-potluckmap-online-without-installing-it" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Trying Out Potluckmap Online Without Installing It</h2>
<p>Head over to <a href=
"http://g0v.github.io/potluckmap/m/cyut-bus/">
the demo page</a> and begin playing with it
by replacing any url in the "sources" table with your data url.
See a later section on how to save and restore your configuration.
<h2>
<a id="installing-potluckmap" class="anchor" href="#installing-potluckmap" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installing Potluckmap</h2>
<p>Just download potluckmap and open potluckmap.html in firefox.</p>
<p>Chrome or chromium users who want to use local data sources
have two options. Either install a local web server and
access potluckmap.html through the web server,
or start the browser from the command line:
<code>chromium-browser --allow-file-access-from-files</code>.
Please see <a href="https://github.com/ckhung/javascriptCanReadLocalFiles">javascriptCanReadLocalFiles</a> for details.</p>
<p>It is possible to share one copy of the codes among
several web pages each of which needs its own map.
Just append "?config=xyz.json" to the html page's url
and potluckmap.js will use xyz.json as the configuration file.
<p>If you want to run potluckmap offline, you need to have
a local tile server.
<h2>
<a id="basic-setup" class="anchor" href="#basic-setup" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Basic Setup</h2>
<p>Potluckmap does not have a fancy user interface (yet).
You have to edit its configuration file config.json manually.
[2016/11/09: <em>configuration file format changed!</em>
The new config file now only contains a small structure
that corrospends to the "startval" portion of the old config file.]
You can edit the following fields
in the configuration file:</p>
<ol>
<li>"title": the title of your map.</li>
<li>"sources": the data sources of your map.</li>
<li>"views": a list of frequently used views as defined
by their names, zoom levels, and geographic coordinates.</li>
</ol>
<p>More details in later sections.</p>
<h2>
<a id="using-potluckmap" class="anchor" href="#using-potluckmap" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Using Potluckmap</h2>
<p>In the bottom left corner there are a few menu buttons.</p>
<p>The "pushpin" menu button include options for you to:</p>
<ol>
<li>[some place name] switch to a predefined view</li>
<li>[remember here] replace the current view with
what you are looking at right now</li>
</ol>
<p>The "reload" menu button include options for you to:
<ol>
<li>[reload all] reload all data sources
<li>[reload changed] reload those data sources
that have been manually changed in the configuration area
<li>[rebuild menu] rebuild the pushpin menu after you
manually add entries to, delete entries from,
or change the names of the views list in the configuration area.
</ol>
<h2>
<a id="saving-and-restoring-your-configuration" class="anchor" href="#saving-and-restoring-your-configuration" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Saving and Restoring Your Configuration</h2>
<p>Below the map is the configuration area.
Potluckmap uses <a href="https://github.com/jdorn/json-editor">json-editor</a>
as a lazy programmer's user interface --
options that don't yet have a normal UI can be changed here.
For example, you can add views, delete views,
change the view name here.
However, changes may not go into effect immediately.
That's why there are menu items like [reload changed]
and [rebuild menu] in the map UI.</p>
<p>After you have configured your sources and views,
you may want to save it.
Press the [Edit JSON] button, copy the content,
and (using a text editor) save it as your new config.json file.
(Note: the [save] button does not save anything to the disk.
It only confirms your manual editing within this session.)
Potluckmap will then use your new configuration the next time it is run.</p>
<p>If you are visiting <a href=
"http://g0v.github.io/potluckmap/m/cyut-bus/">
the demo page</a>, then of course it is always
the demo map that gets displayed upon opening the page.
You can still ask it to display your own map
as long as your data files have a public url.
Simply press the [Edit JSON] button, and paste
your config.json file into the edit window.
Then choose "reload all" from the map.
<p>Beware that the configuration file may undergo
changes as potluckmap is being actively developed.
Your old configuration file may not always work with
a newer version.
<h2>
<a id="more-details-about-the-configuration-options" class="anchor" href="#more-details-about-the-configuration-options" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>More Details About the Configuration Options</h2>
<h3>Sources</h3>
<p>You can specify the <code>format</code> and the <code>url</code> of each data source.
Leaving the format field empty instructs potluckmap to
choose the format parser according to the file name extension of the url.
<p>Features of type "Point" are styled using the these fields
<code>shap</code>, <code>glyph_set</code>, <code>glyph</code>,
and optionally <code>facing</code>.
The available set of <code>shape</code>s can be previewed at <a href=
"https://github.com/g0v/potluckmap/blob/gh-pages/lib/icons.png">
icons.png</a> .
Leaving the <code>glyph_set</code> empty,
you can type any short text in the <code>glyph</code> field
as the label for markers.
Alternatively, choosing glyphicon as the <code>glyph_set</code>,
you can type the name of one of the <a href=
"http://getbootstrap.com/components/">
bootstrap glyphicons</a> in the <code>glyph</code> field.
Additionally, the <code>facing</code> field may contain
a valid mathematical expression containing one or more
numerical fields from the source data file.
In this case, the icon is rotated by this amount of angle (in degrees).
<p>Features of type "LineString" are styled
using the <code>style</code> field. See <a href="https://frdm.cyut.edu.tw/~ckhung/saas/potluckmap/m/cyut-bus/">
cyut bus</a> for example.
The json editor for "style" is hidden by default.
To enable user editing, change <code>"hidden": true</code>
to <code>"hidden": false</code> in the entry
corresponding to "style" in schema.json .
(But it looks awkward.)
<p>The <code>refresh</code> field is the number of seconds
for automatically refreshing this source.
However, it must be greater than or equal to 20.
<p>See <a href=
"https://github.com/ckhung/Leaflet.Icon.Glyph">
Leaflet.Icon.Glyph</a> for more details about <code>shape</code>
and <code>glyph</code>.
<h3>Tile Provider</h3>
<p>This option employs the <a href=
"https://github.com/leaflet-extras/leaflet-providers">
leaflet-providers</a> project.
Visit <a href="https://leaflet-extras.github.io/leaflet-providers/preview/">
their demo</a> to see what each tile provider looks like.
<!-- h2>
<a id="known-bugs-and-to-do-list" class="anchor" href="#known-bugs-and-to-do-list" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Known Bugs and To Do List</h2 -->
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/g0v/potluckmap">Potluckmap</a> is sponsored by Taiwan's Ministry of Science and Technology, project ID MOST-104-2221-E-492-013 and MOST-105-2221-E-492-025, and maintained by <a href="https://github.com/g0v">g0v</a>.
[<a href="index.zh_TW.html">中文版</a>]
</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>