OSMatrix— visualizing spatio-temporal characteristics of OpenStreetMap
43 |initializing...
44 |
49 |
50 |
51 |
52 |
99 |
100 |
101 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
67 |
68 |
61 |
65 |
66 |
69 |
70 |
71 |
98 |
72 |
95 |
96 |
97 | Choose Layer
73 | 94 |
102 |
145 |
146 |
103 |
121 |
122 |
104 |
105 | 
110 |
119 |
120 | About OSMatrix
106 |OSMatrix is a web-based application to visualize characteristics of OpenStreetMap, which are usually not displayed in cartographic representations of the data. The characteristics include information on the topicality of data, user contributions and the presence (or absence) of certain feature types.
107 | 108 |OSMatrix is based on an idea of Alexander Zipf has been brought to life by Lukas Loos and Oliver Roick at GIScience Research Group at Heidelberg University.
109 |
110 | Publications
111 |-
112 |
- Roick, O.; Loos, L.; Zipf, A. (2012): A Technical Framework for Visualizing Spatio-temporal Quality Metrics of Volunteered Geographic Information. Geoinformatik 2012, Braunschweig, March 2012. 113 |
- Roick, O.; Hagenauer, J.; Zipf, A. (2011): OSMatrix - Grid based analysis and visualization of OpenStreetMap. State of the Map EU. Wien, July 2011. 114 |
Want to help?
117 |Help us improve OSMatrix by reporting issues on Github or get in touch with us via e-mail
118 |
123 |
134 |
135 |
124 |
129 |
130 |
131 |
132 |
133 | Feature info
125 | 126 |Click on the map to get information on the temporal evolution of the selected characteristic in the area of interest.
127 | 128 |129 |
130 |
136 |
144 |
137 |
142 |
143 | Legend
138 | 139 | 140 | 141 |
147 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
--------------------------------------------------------------------------------
/js/control.js:
--------------------------------------------------------------------------------
1 | var Controller = (function (w) {
2 | 'use strict';
3 |
4 | var $ = w.jQuery,
5 | ui = w.Ui,
6 | perma = w.Permalink,
7 | geolocator = w.Geolocator,
8 | geocoder = w.Geocoder,
9 | osmatrix = w.OSMatrix,
10 | Map = w.Map,
11 | HIGHLIGHT_COLORS = ['#E41A1C', '#377EB8', '#4DAF4A', '#984EA3', '#FF7F00', '#FFFF33', '#A65628'],
12 | map;
13 |
14 | /* *********************************************************************
15 | * GEOLOCATION
16 | * *********************************************************************/
17 |
18 | /**
19 | * [handleGeolocateSuccess description]
20 | * @param {[type]} position [description]
21 | * @return {[type]} [description]
22 | */
23 | function handleGeolocateSuccess(position) {
24 | map.moveTo([position.coords.latitude, position.coords.longitude]);
25 | ui.stopGeolocation();
26 | }
27 |
28 | /**
29 | * [handleGeolocateError description]
30 | * @param {[type]} error [description]
31 | * @return {[type]} [description]
32 | */
33 | function handleGeolocateError(error) {
34 | switch (error.code) {
35 | case error.UNKNOWN_ERROR:
36 | ui.stopGeolocation('The location acquisition process failed');
37 | break;
38 | case error.PERMISSION_DENIED:
39 | ui.deactivateGeolocation();
40 | break;
41 | case error.POSITION_UNAVAILABLE:
42 | ui.stopGeolocation('The position of the device could not be determined. One or more of the location providers used in the location acquisition process reported an internal error that caused the process to fail entirely.');
43 | break;
44 | case error.TIMEOUT:
45 | ui.stopGeolocation('The location acquisition timed out');
46 | break;
47 | }
48 | }
49 |
50 | /**
51 | * [handleGeolocateNoSupport description]
52 | */
53 | function handleGeolocateNoSupport() {
54 | ui.deactivateGeolocation('Geolocation API is not supported by your browser.');
55 | }
56 |
57 | /* *********************************************************************
58 | * GEOCODER
59 | * *********************************************************************/
60 |
61 | function handleGeocodeResults(results) {
62 | ui.updateGeocodeResultList(w.document.URL, results);
63 | }
64 |
65 | function handleGeolocationRequest() {
66 | geolocator.locate(handleGeolocateSuccess, handleGeolocateError, handleGeolocateNoSupport);
67 | }
68 |
69 | function handleGeocodeRequest(address) {
70 | geocoder.find(address, handleGeocodeResults);
71 | }
72 |
73 | function handleGeocodeLink(link) {
74 | var permaLinkState = perma.parse(link);
75 | map.moveTo([permaLinkState.lat, permaLinkState.lng]);
76 | }
77 |
78 | /* *********************************************************************
79 | * MAP
80 | * *********************************************************************/
81 |
82 | function handleLayerUpdate(layerInfo) {
83 | osmatrix.getLegend(layerInfo.mode, layerInfo.layer, handleLegend);
84 | map.updateMatrixLayer(layerInfo, osmatrix.getLayerUrl(layerInfo.mode, layerInfo.layer, layerInfo.times));
85 | ui.updateFeatureInfo();
86 | }
87 |
88 | function handleMapLoadStart() {
89 | ui.setLayerLoadingState(true);
90 | }
91 |
92 | function handleMapLoadEnd() {
93 | ui.setLayerLoadingState(false);
94 | }
95 |
96 | function handleMapChanged(mapState) {
97 | perma.update(mapState.mode, mapState.layer, mapState.times, mapState.zoom, mapState.lon, mapState.lat);
98 | }
99 |
100 | function handleUserMapClick(latlng) {
101 | ui.setFeatureInfoLoadingState(true);
102 | var layer = perma.parse(w.document.URL).layer;
103 | osmatrix.getFeatureInfoFromPoint(layer, latlng, handleFeatureInfoResult);
104 | }
105 |
106 | /* *********************************************************************
107 | * OSMATRIX CONTROLLER
108 | * *********************************************************************/
109 |
110 | function handleMatrixCapabilities(capabilities) {
111 | ui.initializeLayerSwitcher(capabilities);
112 | initializeTheMap();
113 | }
114 |
115 | function handleLegend(results) {
116 | ui.updateLegend(results);
117 | }
118 |
119 | function initializeTheMatrix() {
120 | osmatrix.getCapabilities(handleMatrixCapabilities);
121 | }
122 |
123 | /**
124 | * [setInitialMapLocation description]
125 | */
126 | function initializeTheMap() {
127 | var permaLink = perma.parse(w.document.URL);
128 | if (permaLink) {map.moveTo([permaLink.lat, permaLink.lng], permaLink.zoom); } else {handleGeolocationRequest(); }
129 |
130 | ui.setLayerSwitcherToMode(permaLink);
131 | }
132 |
133 | function handleFeatureInfoResult(result) {
134 | map.updateFeatureInfoLayer(result, HIGHLIGHT_COLORS);
135 | ui.updateFeatureInfo(result, HIGHLIGHT_COLORS);
136 | }
137 |
138 |
139 | /**
140 | * [initialize description]
141 | */
142 | function initialize() {
143 | map = new Map('map');
144 |
145 | map.register('layer:loadStart', handleMapLoadStart);
146 | map.register('layer:loadEnd', handleMapLoadEnd);
147 | map.register('map:changed', handleMapChanged);
148 | map.register('user:click', handleUserMapClick);
149 |
150 | ui.register('ui:geolocationRequest', handleGeolocationRequest);
151 | ui.register('ui:geocodeRequest', handleGeocodeRequest);
152 | ui.register('ui:geocodeLinkClick', handleGeocodeLink);
153 | ui.register('ui:layerUpdate', handleLayerUpdate);
154 |
155 | initializeTheMatrix();
156 | }
157 |
158 |
159 | function Controller() {}
160 | Controller.prototype.initialize = initialize;
161 | return new Controller();
162 | }(window));
163 |
164 | window.onload = Controller.initialize;
--------------------------------------------------------------------------------
/js/event.js:
--------------------------------------------------------------------------------
1 | var EventEmitter = (function () {
2 | "use strict";
3 |
4 | /**
5 | * Constructor
6 | */
7 | function eventEmitter() {
8 | /**
9 | * Registered events and their callbacks
10 | * @type {Object}
11 | */
12 | this.events = {};
13 | }
14 |
15 | /**
16 | * Registers a callback function to a given event.
17 | * @param {String} ev The event identifier.
18 | * @param {Function} callback The callback function.
19 | */
20 | function register(ev, callback) {
21 | if (!this.events[ev]) {this.events[ev] = []; }
22 | this.events[ev].push(callback);
23 | }
24 |
25 | /**
26 | * Emits an event by calling all registered callback functions
27 | * @param {String} ev The event identifier
28 | * @param {Object} eventObj An optional object giving information on the state of the event
29 | */
30 | function emit(ev, eventObj) {
31 | if (this.events[ev]) {
32 | for (var i = 0, len = this.events[ev].length; i < len; i++) {
33 | this.events[ev][i](eventObj);
34 | }
35 | }
36 | }
37 |
38 | eventEmitter.prototype.register = register;
39 | eventEmitter.prototype.emit = emit;
40 |
41 | return eventEmitter;
42 | })();
--------------------------------------------------------------------------------
/js/geocoder.js:
--------------------------------------------------------------------------------
1 | var Geocoder = (function (window) {
2 | "use strict";
3 |
4 | var $ = window.jQuery,
5 | NOMINATIM_URL = 'http://nominatim.openstreetmap.org/search?format=json&polygon=0&addressdetails=1&viewbox=5.52,55.26,15.18,47.27&bounded=1';
6 |
7 | /**
8 | * Constructor
9 | */
10 | function Geocoder() {
11 | }
12 |
13 | /**
14 | * Sends the request to Nominatim and calls the callback function.
15 | * @param {String} address Address to be geocoded
16 | * @param {Function} callback Callback which is called after the results are returned from Nominatim
17 | */
18 | function find(address, callback) {
19 | $.getJSON(
20 | //'/cgi-bin/proxy.cgi?url=' + encodeURIComponent(NOMINATIM_URL + '&q=' + address.replace(/\s+/g, '+')),
21 | NOMINATIM_URL+ '&q=' + address.replace(/\s+/g, '+'),
22 | null,
23 | callback
24 | );
25 | }
26 |
27 | Geocoder.prototype.find = find;
28 |
29 | return new Geocoder();
30 | }(window));
--------------------------------------------------------------------------------
/js/geolocator.js:
--------------------------------------------------------------------------------
1 | var Geolocator = (function (w) {
2 | "use strict";
3 |
4 | /**
5 | * Constructor
6 | */
7 | function Geolocator() {
8 |
9 | }
10 |
11 | function locate(locationSuccess, locationError, locationNotSupported) {
12 | if (w.navigator.geolocation) {w.navigator.geolocation.getCurrentPosition(locationSuccess, locationError); } else {locationNotSupported(); }
13 | }
14 |
15 | Geolocator.prototype.locate = locate;
16 |
17 | return new Geolocator();
18 | }(window));
--------------------------------------------------------------------------------
/js/lib/leaflet-0.5.1.css:
--------------------------------------------------------------------------------
1 | /* required styles */
2 |
3 | .leaflet-map-pane,
4 | .leaflet-tile,
5 | .leaflet-marker-icon,
6 | .leaflet-marker-shadow,
7 | .leaflet-tile-pane,
8 | .leaflet-overlay-pane,
9 | .leaflet-shadow-pane,
10 | .leaflet-marker-pane,
11 | .leaflet-popup-pane,
12 | .leaflet-overlay-pane svg,
13 | .leaflet-zoom-box,
14 | .leaflet-image-layer,
15 | .leaflet-layer {
16 | position: absolute;
17 | left: 0;
18 | top: 0;
19 | }
20 | .leaflet-container {
21 | overflow: hidden;
22 | -ms-touch-action: none;
23 | }
24 | .leaflet-tile,
25 | .leaflet-marker-icon,
26 | .leaflet-marker-shadow {
27 | -webkit-user-select: none;
28 | -moz-user-select: none;
29 | user-select: none;
30 | }
31 | .leaflet-marker-icon,
32 | .leaflet-marker-shadow {
33 | display: block;
34 | }
35 | /* map is broken in FF if you have max-width: 100% on tiles */
36 | .leaflet-container img {
37 | max-width: none !important;
38 | }
39 | /* stupid Android 2 doesn't understand "max-width: none" properly */
40 | .leaflet-container img.leaflet-image-layer {
41 | max-width: 15000px !important;
42 | }
43 | .leaflet-tile {
44 | filter: inherit;
45 | visibility: hidden;
46 | }
47 | .leaflet-tile-loaded {
48 | visibility: inherit;
49 | }
50 | .leaflet-zoom-box {
51 | width: 0;
52 | height: 0;
53 | }
54 |
55 | .leaflet-tile-pane { z-index: 2; }
56 | .leaflet-objects-pane { z-index: 3; }
57 | .leaflet-overlay-pane { z-index: 4; }
58 | .leaflet-shadow-pane { z-index: 5; }
59 | .leaflet-marker-pane { z-index: 6; }
60 | .leaflet-popup-pane { z-index: 7; }
61 |
62 |
63 | /* control positioning */
64 |
65 | .leaflet-control {
66 | position: relative;
67 | z-index: 7;
68 | pointer-events: auto;
69 | }
70 | .leaflet-top,
71 | .leaflet-bottom {
72 | position: absolute;
73 | z-index: 1000;
74 | pointer-events: none;
75 | }
76 | .leaflet-top {
77 | top: 0;
78 | }
79 | .leaflet-right {
80 | right: 0;
81 | }
82 | .leaflet-bottom {
83 | bottom: 0;
84 | }
85 | .leaflet-left {
86 | left: 0;
87 | }
88 | .leaflet-control {
89 | float: left;
90 | clear: both;
91 | }
92 | .leaflet-right .leaflet-control {
93 | float: right;
94 | }
95 | .leaflet-top .leaflet-control {
96 | margin-top: 10px;
97 | }
98 | .leaflet-bottom .leaflet-control {
99 | margin-bottom: 10px;
100 | }
101 | .leaflet-left .leaflet-control {
102 | margin-left: 10px;
103 | }
104 | .leaflet-right .leaflet-control {
105 | margin-right: 10px;
106 | }
107 |
108 |
109 | /* zoom and fade animations */
110 |
111 | .leaflet-fade-anim .leaflet-tile,
112 | .leaflet-fade-anim .leaflet-popup {
113 | opacity: 0;
114 | -webkit-transition: opacity 0.2s linear;
115 | -moz-transition: opacity 0.2s linear;
116 | -o-transition: opacity 0.2s linear;
117 | transition: opacity 0.2s linear;
118 | }
119 | .leaflet-fade-anim .leaflet-tile-loaded,
120 | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
121 | opacity: 1;
122 | }
123 |
124 | .leaflet-zoom-anim .leaflet-zoom-animated {
125 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
126 | -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
127 | -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
128 | transition: transform 0.25s cubic-bezier(0,0,0.25,1);
129 | }
130 | .leaflet-zoom-anim .leaflet-tile,
131 | .leaflet-pan-anim .leaflet-tile,
132 | .leaflet-touching .leaflet-zoom-animated {
133 | -webkit-transition: none;
134 | -moz-transition: none;
135 | -o-transition: none;
136 | transition: none;
137 | }
138 |
139 | .leaflet-zoom-anim .leaflet-zoom-hide {
140 | visibility: hidden;
141 | }
142 |
143 |
144 | /* cursors */
145 |
146 | .leaflet-clickable {
147 | cursor: pointer;
148 | }
149 | .leaflet-container {
150 | cursor: -webkit-grab;
151 | cursor: -moz-grab;
152 | }
153 | .leaflet-popup-pane,
154 | .leaflet-control {
155 | cursor: auto;
156 | }
157 | .leaflet-dragging,
158 | .leaflet-dragging .leaflet-clickable,
159 | .leaflet-dragging .leaflet-container {
160 | cursor: move;
161 | cursor: -webkit-grabbing;
162 | cursor: -moz-grabbing;
163 | }
164 |
165 |
166 | /* visual tweaks */
167 |
168 | .leaflet-container {
169 | background: #ddd;
170 | outline: 0;
171 | }
172 | .leaflet-container a {
173 | color: #0078A8;
174 | }
175 | .leaflet-container a.leaflet-active {
176 | outline: 2px solid orange;
177 | }
178 | .leaflet-zoom-box {
179 | border: 2px dotted #05f;
180 | background: white;
181 | opacity: 0.5;
182 | }
183 |
184 |
185 | /* general typography */
186 | .leaflet-container {
187 | font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
188 | }
189 |
190 |
191 | /* general toolbar styles */
192 |
193 | .leaflet-bar {
194 | box-shadow: 0 0 8px rgba(0,0,0,0.4);
195 | border: 1px solid #888;
196 | -webkit-border-radius: 5px;
197 | border-radius: 5px;
198 | }
199 | .leaflet-bar-part {
200 | background-color: rgba(255, 255, 255, 0.8);
201 | border-bottom: 1px solid #aaa;
202 | }
203 | .leaflet-bar-part-top {
204 | -webkit-border-radius: 4px 4px 0 0;
205 | border-radius: 4px 4px 0 0;
206 | }
207 | .leaflet-bar-part-bottom {
208 | -webkit-border-radius: 0 0 4px 4px;
209 | border-radius: 0 0 4px 4px;
210 | border-bottom: none;
211 | }
212 |
213 | .leaflet-touch .leaflet-bar {
214 | -webkit-border-radius: 10px;
215 | border-radius: 10px;
216 | }
217 | .leaflet-touch .leaflet-bar-part {
218 | border-bottom: 4px solid rgba(0,0,0,0.3);
219 | }
220 | .leaflet-touch .leaflet-bar-part-top {
221 | -webkit-border-radius: 7px 7px 0 0;
222 | border-radius: 7px 7px 0 0;
223 | }
224 | .leaflet-touch .leaflet-bar-part-bottom {
225 | -webkit-border-radius: 0 0 7px 7px;
226 | border-radius: 0 0 7px 7px;
227 | border-bottom: none;
228 | }
229 |
230 |
231 | /* zoom control */
232 |
233 | .leaflet-container .leaflet-control-zoom {
234 | margin-left: 13px;
235 | margin-top: 12px;
236 | }
237 | .leaflet-control-zoom a {
238 | width: 22px;
239 | height: 22px;
240 | text-align: center;
241 | text-decoration: none;
242 | color: black;
243 | }
244 | .leaflet-control-zoom a,
245 | .leaflet-control-layers-toggle {
246 | background-position: 50% 50%;
247 | background-repeat: no-repeat;
248 | display: block;
249 | }
250 | .leaflet-control-zoom a:hover {
251 | background-color: #fff;
252 | color: #777;
253 | }
254 | .leaflet-control-zoom-in {
255 | font: bold 18px/24px Arial, Helvetica, sans-serif;
256 | }
257 | .leaflet-control-zoom-out {
258 | font: bold 23px/20px Tahoma, Verdana, sans-serif;
259 | }
260 | .leaflet-control-zoom a.leaflet-control-zoom-disabled {
261 | cursor: default;
262 | background-color: rgba(255, 255, 255, 0.8);
263 | color: #bbb;
264 | }
265 |
266 | .leaflet-touch .leaflet-control-zoom a {
267 | width: 30px;
268 | height: 30px;
269 | }
270 | .leaflet-touch .leaflet-control-zoom-in {
271 | font-size: 24px;
272 | line-height: 29px;
273 | }
274 | .leaflet-touch .leaflet-control-zoom-out {
275 | font-size: 28px;
276 | line-height: 24px;
277 | }
278 |
279 | /* layers control */
280 |
281 | .leaflet-control-layers {
282 | box-shadow: 0 1px 7px rgba(0,0,0,0.4);
283 | background: #f8f8f9;
284 | -webkit-border-radius: 8px;
285 | border-radius: 8px;
286 | }
287 | .leaflet-control-layers-toggle {
288 | background-image: url(images/layers.png);
289 | width: 36px;
290 | height: 36px;
291 | }
292 | .leaflet-touch .leaflet-control-layers-toggle {
293 | width: 44px;
294 | height: 44px;
295 | }
296 | .leaflet-control-layers .leaflet-control-layers-list,
297 | .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
298 | display: none;
299 | }
300 | .leaflet-control-layers-expanded .leaflet-control-layers-list {
301 | display: block;
302 | position: relative;
303 | }
304 | .leaflet-control-layers-expanded {
305 | padding: 6px 10px 6px 6px;
306 | color: #333;
307 | background: #fff;
308 | }
309 | .leaflet-control-layers-selector {
310 | margin-top: 2px;
311 | position: relative;
312 | top: 1px;
313 | }
314 | .leaflet-control-layers label {
315 | display: block;
316 | }
317 | .leaflet-control-layers-separator {
318 | height: 0;
319 | border-top: 1px solid #ddd;
320 | margin: 5px -10px 5px -6px;
321 | }
322 |
323 |
324 | /* attribution and scale controls */
325 |
326 | .leaflet-container .leaflet-control-attribution {
327 | background-color: rgba(255, 255, 255, 0.7);
328 | box-shadow: 0 0 5px #bbb;
329 | margin: 0;
330 | }
331 | .leaflet-control-attribution,
332 | .leaflet-control-scale-line {
333 | padding: 0 5px;
334 | color: #333;
335 | }
336 | .leaflet-container .leaflet-control-attribution,
337 | .leaflet-container .leaflet-control-scale {
338 | font-size: 11px;
339 | }
340 | .leaflet-left .leaflet-control-scale {
341 | margin-left: 5px;
342 | }
343 | .leaflet-bottom .leaflet-control-scale {
344 | margin-bottom: 5px;
345 | }
346 | .leaflet-control-scale-line {
347 | border: 2px solid #777;
348 | border-top: none;
349 | color: black;
350 | line-height: 1.1;
351 | padding: 2px 5px 1px;
352 | font-size: 11px;
353 | text-shadow: 1px 1px 1px #fff;
354 | background-color: rgba(255, 255, 255, 0.5);
355 | box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
356 | white-space: nowrap;
357 | overflow: hidden;
358 | }
359 | .leaflet-control-scale-line:not(:first-child) {
360 | border-top: 2px solid #777;
361 | border-bottom: none;
362 | margin-top: -2px;
363 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
364 | }
365 | .leaflet-control-scale-line:not(:first-child):not(:last-child) {
366 | border-bottom: 2px solid #777;
367 | }
368 |
369 | .leaflet-touch .leaflet-control-attribution,
370 | .leaflet-touch .leaflet-control-layers,
371 | .leaflet-touch .leaflet-control-zoom {
372 | box-shadow: none;
373 | }
374 | .leaflet-touch .leaflet-control-layers,
375 | .leaflet-touch .leaflet-control-zoom {
376 | border: 4px solid rgba(0,0,0,0.3);
377 | }
378 |
379 |
380 | /* popup */
381 |
382 | .leaflet-popup {
383 | position: absolute;
384 | text-align: center;
385 | }
386 | .leaflet-popup-content-wrapper {
387 | padding: 1px;
388 | text-align: left;
389 | -webkit-border-radius: 20px;
390 | border-radius: 20px;
391 | }
392 | .leaflet-popup-content {
393 | margin: 14px 20px;
394 | line-height: 1.4;
395 | }
396 | .leaflet-popup-content p {
397 | margin: 18px 0;
398 | }
399 | .leaflet-popup-tip-container {
400 | margin: 0 auto;
401 | width: 40px;
402 | height: 20px;
403 | position: relative;
404 | overflow: hidden;
405 | }
406 | .leaflet-popup-tip {
407 | width: 15px;
408 | height: 15px;
409 | padding: 1px;
410 |
411 | margin: -8px auto 0;
412 |
413 | -webkit-transform: rotate(45deg);
414 | -moz-transform: rotate(45deg);
415 | -ms-transform: rotate(45deg);
416 | -o-transform: rotate(45deg);
417 | transform: rotate(45deg);
418 | }
419 | .leaflet-popup-content-wrapper, .leaflet-popup-tip {
420 | background: white;
421 |
422 | box-shadow: 0 3px 14px rgba(0,0,0,0.4);
423 | }
424 | .leaflet-container a.leaflet-popup-close-button {
425 | position: absolute;
426 | top: 0;
427 | right: 0;
428 | padding: 4px 5px 0 0;
429 | text-align: center;
430 | width: 18px;
431 | height: 14px;
432 | font: 16px/14px Tahoma, Verdana, sans-serif;
433 | color: #c3c3c3;
434 | text-decoration: none;
435 | font-weight: bold;
436 | background: transparent;
437 | }
438 | .leaflet-container a.leaflet-popup-close-button:hover {
439 | color: #999;
440 | }
441 | .leaflet-popup-scrolled {
442 | overflow: auto;
443 | border-bottom: 1px solid #ddd;
444 | border-top: 1px solid #ddd;
445 | }
446 |
447 |
448 | /* div icon */
449 |
450 | .leaflet-div-icon {
451 | background: #fff;
452 | border: 1px solid #666;
453 | }
454 | .leaflet-editing-icon {
455 | -webkit-border-radius: 2px;
456 | border-radius: 2px;
457 | }
458 |
--------------------------------------------------------------------------------
/js/lib/leaflet-0.5.1.ie.css:
--------------------------------------------------------------------------------
1 | .leaflet-vml-shape {
2 | width: 1px;
3 | height: 1px;
4 | }
5 | .lvml {
6 | behavior: url(#default#VML);
7 | display: inline-block;
8 | position: absolute;
9 | }
10 |
11 | .leaflet-control {
12 | display: inline;
13 | }
14 |
15 | .leaflet-popup-tip {
16 | width: 21px;
17 | _width: 27px;
18 | margin: 0 auto;
19 | _margin-top: -3px;
20 |
21 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
22 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
23 | }
24 | .leaflet-popup-tip-container {
25 | margin-top: -1px;
26 | }
27 | .leaflet-popup-content-wrapper, .leaflet-popup-tip {
28 | border: 1px solid #999;
29 | }
30 | .leaflet-popup-content-wrapper {
31 | zoom: 1;
32 | }
33 |
34 | .leaflet-control-zoom,
35 | .leaflet-control-layers {
36 | border: 3px solid #999;
37 | }
38 | .leaflet-control-zoom a {
39 | background-color: #eee;
40 | }
41 | .leaflet-control-zoom a:hover {
42 | background-color: #fff;
43 | }
44 | .leaflet-control-layers-toggle {
45 | }
46 | .leaflet-control-attribution,
47 | .leaflet-control-layers,
48 | .leaflet-control-scale-line {
49 | background: white;
50 | }
51 | .leaflet-zoom-box {
52 | filter: alpha(opacity=50);
53 | }
54 | .leaflet-control-attribution {
55 | border-top: 1px solid #bbb;
56 | border-left: 1px solid #bbb;
57 | }
58 |
--------------------------------------------------------------------------------
/js/map.js:
--------------------------------------------------------------------------------
1 | var Map = (function () {
2 | "use strict";
3 |
4 | /**
5 | * Constructor
6 | * @param {[type]} container [description]
7 | */
8 | function map(container) {
9 | var self = this;
10 |
11 | /**
12 | * [emitMapChangedEvent description]
13 | */
14 | function emitMapChangedEvent(e) {
15 | self.emit('map:changed', {
16 | zoom: self.theMap.getZoom(),
17 | lat: self.theMap.getCenter().lat,
18 | lon: self.theMap.getCenter().lng
19 | });
20 | }
21 |
22 | /**
23 | * [emitLayerLoadEvent description]
24 | */
25 | function emitLayerLoadStartEvent() {
26 | self.emit('layer:loadStart');
27 | }
28 |
29 | /**
30 | * [emitLayerLoadEndEvent description]
31 | */
32 | function emitLayerLoadEndEvent() {
33 | self.emit('layer:loadEnd');
34 | }
35 |
36 | /**
37 | * [handleLayerAddEvent description]
38 | */
39 | function handleLayerAddEvent(e) {
40 | e.layer.on('loading', emitLayerLoadStartEvent);
41 | e.layer.on('load', emitLayerLoadEndEvent);
42 | }
43 |
44 | function emitUserClickEvent(e) {
45 | self.emit('user:click', e.latlng);
46 | }
47 |
48 | this.theMap = L.map(container, {
49 | center: [49.505, 8.09],
50 | zoom: 9,
51 | // minZoom: 3,
52 | // maxZoom: 18,
53 | maxBounds: new L.LatLngBounds(new L.LatLng(34.66682, -10.53538), new L.LatLng(61.07390, 38.00957)),
54 | zoomControl: false
55 | });
56 |
57 | var tiledLayer = new L.StamenTileLayer("toner-lite");
58 | this.theMap.addLayer(tiledLayer);
59 |
60 | this.theMap.on('zoomend', emitMapChangedEvent);
61 | this.theMap.on('moveend', emitMapChangedEvent);
62 | this.theMap.on('layeradd', handleLayerAddEvent);
63 | this.theMap.on('click', emitUserClickEvent);
64 | }
65 |
66 | /**
67 | * [moveTo description]
68 | * @param {[type]} lonlat [description]
69 | * @param {[type]} zoom [description]
70 | */
71 | function moveTo(lonlat, zoom) {
72 | if (lonlat) {this.theMap.panTo(lonlat); }
73 | if (zoom) {this.theMap.setZoom(zoom); }
74 | }
75 |
76 | function updateMatrixLayer(mode, layerUrl) {
77 | this.updateFeatureInfoLayer();
78 | if (this.matrixLayer) {this.theMap.removeLayer(this.matrixLayer); }
79 | this.matrixLayer = L.tileLayer(layerUrl, {
80 | maxZoom: 18
81 | });
82 | this.theMap.addLayer(this.matrixLayer);
83 |
84 | this.emit('map:changed', {
85 | mode: mode.mode,
86 | layer: mode.layer,
87 | times: mode.times,
88 | zoom: this.theMap.getZoom(),
89 | lat: this.theMap.getCenter().lat,
90 | lon: this.theMap.getCenter().lng
91 | });
92 | }
93 |
94 | function updateFeatureInfoLayer(features, colors) {
95 | if (this.featureInfoLayer) {this.theMap.removeLayer(this.featureInfoLayer); }
96 |
97 | if (features && colors) {
98 | this.featureInfoLayer = L.geoJson(null, {
99 | style: function (feature) {
100 | return {
101 | fillColor: feature.properties.color,
102 | fillOpacity: 0.7,
103 | color: 'white',
104 | opacity: 1,
105 | weight: 2
106 | };
107 | }
108 | });
109 | this.theMap.addLayer(this.featureInfoLayer);
110 |
111 | for (var i = 0, len = features.result.length; i < len; i++) {
112 | var color = colors[i];
113 | this.featureInfoLayer.addData({"type": "Feature", "properties": {"color": color}, "geometry": features.result[i].geometry});
114 | }
115 | }
116 | }
117 |
118 | map.prototype = new EventEmitter();
119 | map.prototype.constructor = map;
120 | map.prototype.moveTo = moveTo;
121 | map.prototype.updateMatrixLayer = updateMatrixLayer;
122 | map.prototype.updateFeatureInfoLayer = updateFeatureInfoLayer;
123 |
124 | return map;
125 | }());
--------------------------------------------------------------------------------
/js/osmatrix.js:
--------------------------------------------------------------------------------
1 | var OSMatrix = (function (w) {
2 | "use strict";
3 |
4 | var $ = w.jQuery,
5 | // PROXY_URL = "/cgi-bin/proxy.cgi?url=",
6 | PROXY_URL = "",
7 | // !!! PLEASE SET YOUR SERVER URL BELOW !!!
8 | API_URL = "http://localhost:50684/osmatrix/",
9 | MODE = {
10 | timestamp: 1,
11 | diff: 2
12 | };
13 |
14 | function Osmatrix() {
15 |
16 | }
17 |
18 | function get(url, callback) {
19 | $.getJSON(
20 | // PROXY_URL + encodeURIComponent(url),
21 | url,
22 |
23 | null,
24 | callback
25 | );
26 | }
27 |
28 | function getCapabilities(callback) {
29 | get(API_URL + 'api', callback);
30 | }
31 |
32 | function getLegend(mode, layer, callback) {
33 | get(API_URL + 'map/' + layer + '/' + mode + '/legend', callback);
34 | }
35 |
36 | function getLayerUrl(mode, layer, times) {
37 | if (MODE[mode] === MODE.timestamp) {
38 | return API_URL + 'map/' + layer + '/timestamp/' + times[0] + '/{z}/{x}/{y}';
39 | } else {
40 | return API_URL + 'map/' + layer + '/diff/{z}/{x}/{y}?start=' + times[0] + '&end=' + times[1];
41 | }
42 | }
43 |
44 | function getFeatureInfoFromPoint(attribute, latlng, callback) {
45 | get(API_URL + 'api/attributes/' + attribute + '?proj=4326&lat=' + latlng.lat + '&lon=' + latlng.lng, callback);
46 | }
47 |
48 | Osmatrix.prototype.getCapabilities = getCapabilities;
49 | Osmatrix.prototype.getLegend = getLegend;
50 | Osmatrix.prototype.getLayerUrl = getLayerUrl;
51 | Osmatrix.prototype.getFeatureInfoFromPoint = getFeatureInfoFromPoint;
52 |
53 | return new Osmatrix();
54 | }(window));
--------------------------------------------------------------------------------
/js/permalink.js:
--------------------------------------------------------------------------------
1 | var Permalink = (function (w) {
2 | 'use strict';
3 |
4 | var state,
5 | history = w.history;
6 |
7 | /**
8 | * Constructor
9 | */
10 | function Permalink() {
11 |
12 | }
13 |
14 | /**
15 | * [update description]
16 | * @param {[type]} zoom [description]
17 | * @param {[type]} lon [description]
18 | * @param {[type]} lat [description]
19 | */
20 | function update(mode, layer, times, zoom, lon, lat) {
21 | if (!state) {state = {}; }
22 | if (mode) {state.mode = mode; }
23 | if (layer) {state.layer = layer; }
24 | if (times) {state.times = times; }
25 | if (zoom) {state.zoom = zoom; }
26 | if (lon) {state.lon = lon; }
27 | if (lat) {state.lat = lat; }
28 |
29 | var url = "#" + state.mode + "/" + state.layer + "/" + ((state.times.length === 1) ? state.times[0] + "/" : "") + state.zoom + "/" + state.lon + "/" + state.lat + ((state.times.length === 2) ? "?start=" + state.times[0] + "&end=" + state.times[1] : "");
30 |
31 | if (history.pushState) {history.pushState(state, null, url); } else {w.location = url; return false; }
32 | }
33 |
34 | /**
35 | * [parse description]
36 | * @param {[type]} url [description]
37 | * @return {[type]} [description]
38 | */
39 | function parse(url) {
40 | if (url.indexOf('#') !== -1) {
41 | var urlState = url.split('#')[1].split('/');
42 |
43 | state = {};
44 |
45 | state.mode = urlState[0];
46 | state.layer = urlState[1];
47 | state.times = [];
48 | if (urlState[0] === 'timestamp') {
49 | state.times.push(urlState[2]);
50 | state.zoom = urlState[3];
51 | state.lng = urlState[4];
52 | state.lat = urlState[5];
53 | } else {
54 | var times = urlState[4].split('?')[1].split('&');
55 |
56 | state.zoom = urlState[2];
57 | state.lng = urlState[3];
58 | state.lat = urlState[4].split('?')[0];
59 |
60 | for (var i = 0, len = times.length; i < len; i++) {
61 | state.times.push(times[i].split('=')[1]);
62 | }
63 | }
64 | }
65 | return state;
66 | }
67 |
68 | Permalink.prototype.update = update;
69 | Permalink.prototype.parse = parse;
70 |
71 | return new Permalink();
72 | })(window);
--------------------------------------------------------------------------------
/js/ui.js:
--------------------------------------------------------------------------------
1 | var Ui = (function (w) {
2 | 'use strict';
3 |
4 | var $ = w.jQuery,
5 | d3 = w.d3,
6 | TOOLS = {geolocate: 'geolocate', layer: 'layer', geocode: 'searchPlace', legend: 'legend', featureInfo: 'featureInfo', message: 'message' },
7 | theInterface;
8 |
9 |
10 |
11 |
12 | /* *********************************************************************
13 | * GENERAL
14 | * *********************************************************************/
15 |
16 | /**
17 | * [setLoadingState description]
18 | * @param {[type]} state [description]
19 | * @param {[type]} tool [description]
20 | */
21 | function setLoadingState(state, tool) {
22 | if (state) {
23 | $('#' + tool).addClass('loading');
24 | $('#' + tool + ' button').addClass('loading');
25 | $('#' + tool + ' .spinner').addClass('loading');
26 | } else {
27 | $('#' + tool).removeClass('loading');
28 | $('#' + tool + ' button').removeClass('loading');
29 | $('#' + tool + ' .spinner').removeClass('loading');
30 | }
31 | }
32 |
33 | /**
34 | * [toggleActiveState description]
35 | * @param {[type]} tool [description]
36 | */
37 | function toggleActiveState(tool) {
38 | $('.tool').not('#' + tool).removeClass('active');
39 | $('.tool > button').not('#' + tool + ' > button').removeClass('active');
40 | $('.tool > .content').not('#' + tool + ' > .content').removeClass('active');
41 | $('#sidebar').removeClass('active');
42 |
43 |
44 | console.log($('#' + tool));
45 | $('#' + tool).toggleClass('active');
46 | $('#' + tool + ' > button').toggleClass('active');
47 | $('#' + tool + ' > .content').toggleClass('active');
48 |
49 | if ($('#' + tool).parent().attr('id') === 'sidebar' && $('#' + tool + ' > button').hasClass('active')) {
50 | $('#sidebar').addClass('active');
51 | }
52 | }
53 |
54 | /**
55 | * [handleButtonClick description]
56 | * @return {[type]} [description]
57 | */
58 | function handleButtonClick(e) {
59 | var toolId = $(e.currentTarget).parent().attr('id');
60 | if (toolId === TOOLS.geolocate) {
61 | setLoadingState(true, TOOLS.geolocate);
62 | theInterface.emit('ui:geolocationRequest');
63 | } else {
64 | toggleActiveState(toolId);
65 | }
66 | }
67 |
68 |
69 | /* *********************************************************************
70 | * MESSAGE
71 | * *********************************************************************/
72 |
73 | function hideMessage() {
74 | $('#' + TOOLS.message).hide();
75 | }
76 |
77 | function displayMessage(type, text) {
78 | $('#' + TOOLS.message).removeClass().addClass(type);
79 | $('#' + TOOLS.message + ' h3').text(type.charAt(0).toUpperCase() + type.slice(1));
80 | $('#' + TOOLS.message + ' p').text(text);
81 | $('#' + TOOLS.message + ' #actions > button').click(hideMessage);
82 | $('#' + TOOLS.message).show();
83 | }
84 |
85 |
86 |
87 |
88 | /* *********************************************************************
89 | * GEOLOCATION
90 | * *********************************************************************/
91 |
92 | function stopGeolocation(text) {
93 | setLoadingState(false, TOOLS.geolocate);
94 | if (text) {displayMessage('error', text); }
95 | }
96 |
97 | function deactivateGeolocation(text) {
98 | stopGeolocation();
99 | $('#' + TOOLS.geolocate).hide();
100 | if (text) {displayMessage('error', text); }
101 | }
102 |
103 |
104 |
105 | /* *********************************************************************
106 | * GEOCODER
107 | * *********************************************************************/
108 |
109 | /**
110 | * [handleFormType description]
111 | */
112 | function handleFormType(e) {
113 | var key = e.which || e.keyCode;
114 |
115 | if (key === 13) {
116 | setLoadingState(true, TOOLS.geocode);
117 | theInterface.emit('ui:geocodeRequest', $(e.currentTarget).val());
118 | return false;
119 | }
120 | }
121 |
122 | /**
123 | * [handleGeocodeLinkClick description]
124 | */
125 | function handleGeocodeLinkClick(e) {
126 | theInterface.emit('ui:geocodeLinkClick', $(e.currentTarget).attr('href'));
127 | if ($('#' + TOOLS.geocode + ' > button').hasClass('active')) {$('#' + TOOLS.geocode + ' > button').click(); }
128 | return false;
129 | }
130 |
131 | /**
132 | * [handleGeocodeResults description]
133 | * @param {[type]} results [description]
134 | */
135 | function updateGeocodeResultList(permaLink, results) {
136 | var queryParams = '?' + permaLink.split('?')[1] || '',
137 | linkBase = ((permaLink.indexOf('?') !== -1) ? permaLink.substring(0, permaLink.indexOf('?')) : permaLink.substring(0)).split('#')[0],
138 | mapState = ((permaLink.indexOf('?') !== -1) ? permaLink.substring(0, permaLink.indexOf('?')) : permaLink.substring(0)).split('#')[1].split('/');
139 |
140 | if (results) {
141 | $('#' + TOOLS.geocode + ' ul.resultList').children().remove();
142 |
143 | if (results.length > 0) {
144 | for (var i = 0, len = results.length; i < len; i++) {
145 | var address = results[i];
146 | mapState[mapState.length - 1] = parseFloat(address.lat);
147 | mapState[mapState.length - 2] = parseFloat(address.lon);
148 |
149 | var address = results[i];
150 | var link = linkBase + "#" + mapState.join("/") + queryParams;
151 |
152 | $('#' + TOOLS.geocode + ' ul.resultList').append('
148 |
149 |
150 |
154 |
151 |
152 |
153 | ' + l.labels[i].label + '
');
282 | }
283 | }
284 |
285 |
286 |
287 | /* *********************************************************************
288 | * FEATURE INFO
289 | * *********************************************************************/
290 |
291 |
292 | function updateFeatureInfo(info, colors) {
293 | $('#' + TOOLS.featureInfo + ' #chart').empty();
294 |
295 | if (info && colors) {
296 | $('#' + TOOLS.featureInfo + ' h3').text(info.attribute.title);
297 | $('#' + TOOLS.featureInfo + ' p').text(info.attribute.description);
298 |
299 |
300 | // var averages = [],
301 | // stddev = [],
302 | // min, max, xScale, yScale, xDomain = [];
303 | //
304 | //
305 | // // iterating through a dataset or arrays
306 | // for (var key in info.stats) {
307 | // min = d3.min([info.stats[key].min, min]);
308 | // max = d3.max([info.stats[key].max, max]);
309 | // console.log("min: " + min + " max: "+ max);
310 | // }
311 | //
312 | // if (info.attribute === 'DateOfLatestEdit' || info.attribute === 'dateOfEldestEdit')
313 | // {
314 | // MARGIN_LEFT += 20;
315 | // }
316 | // else
317 | // {
318 | // min = 0;
319 | // }
320 | //
321 | // for (var i = 0, len = info.timestamps.length; i < len; i++) {
322 | // xDomain.push(info.timestamps[i].timestamp.substring(0, info.timestamps[i].timestamp.lastIndexOf('-')));
323 | // }
324 | // for (var key in info.stats)
325 | // {
326 | // averages.push({"timestamp": key, "value": info.stats[key].avg});
327 | // stddev.push({"timestamp": key, "upper": info.stats[key].avg + info.stats[key].std, "lower": info.stats[key].avg - info.stats[key].std});
328 | // }
329 | //
330 | // ;
331 |
332 |
333 | function convert(info){
334 |
335 | var out=[];
336 |
337 |
338 | for (var i = 0; i < info.timestamps.length;i++){
339 |
340 | var ts = {};
341 |
342 |
343 |
344 |
345 |
346 | ts["ts"] = info.timestamps[i].timestamp;
347 |
348 | for (var j = 0; j < info.result.length; j++){
349 | ts["cell_" + j] = info.result[j].values[ts["ts"]];
350 | }
351 |
352 |
353 | ts["cell_avg"] = (info.stats[ts["ts"]].avg != null) ? parseFloat(info.stats[ts["ts"]].avg.toFixed(2)) : null;
354 |
355 | ts["cell_std"] = (info.stats[ts["ts"]].std != null) ? parseFloat(info.stats[ts["ts"]].std.toFixed(2)) : null;
356 |
357 |
358 | out.push(ts);
359 | }
360 |
361 |
362 | return out;
363 |
364 | }
365 |
366 |
367 |
368 | var chart = c3.generate({
369 | bindTo:"#chart",
370 | zoom: {
371 | enabled: true
372 | },
373 | data: {
374 |
375 | json: convert(info),
376 | keys: {
377 | x: 'ts', // it's possible to specify 'x' when category axis
378 | value: ['cell_avg','cell_0', 'cell_1','cell_2', 'cell_3','cell_4', 'cell_5','cell_6'],
379 | },
380 | names:{
381 | 'cell_avg': "average",
382 | 'cell_0': " ",
383 | 'cell_1': " ",
384 | 'cell_2': " ",
385 | 'cell_3': " ",
386 | 'cell_4': " ",
387 | 'cell_5': " ",
388 | 'cell_6': " "
389 | },
390 | colors: {
391 | 'cell_avg': '#000000',
392 | 'cell_0': colors[0],
393 | 'cell_1': colors[1],
394 | 'cell_2': colors[2],
395 | 'cell_3': colors[3],
396 | 'cell_4': colors[4],
397 | 'cell_5': colors[5],
398 | 'cell_6': colors[6]
399 |
400 | },
401 | },
402 |
403 | axis: {
404 | x: {
405 | type: 'timeseries',
406 | tick: {
407 | format: '%Y-%m-%d',
408 | rotate: 90
409 | }
410 | }
411 | },
412 | tooltip: {
413 | position: function (data, width, height, element) {
414 | return {top: 250, left: 40};
415 | }
416 | }
417 | });
418 |
419 |
420 |
421 | // **********************
422 | // OPEN THE THING, YO!
423 |
424 | if (!$('#' + TOOLS.featureInfo + '> .content').hasClass('active')) {$('#' + TOOLS.featureInfo + ' button').click(); }
425 | } else {
426 | $('#' + TOOLS.featureInfo + ' h3').text('');
427 | $('#' + TOOLS.featureInfo + ' p').text('Click on the map to get information on the temporal evolution of the selected characteristic in the area of interest.');
428 |
429 | }
430 | setLoadingState(false, TOOLS.featureInfo);
431 | };
432 |
433 | function setFeatureInfoLoadingState(state) {
434 | setLoadingState(state, TOOLS.featureInfo);
435 | }
436 |
437 | //:::::::::::::::::::::::
438 |
439 |
440 | /*
441 |
442 |
443 | function updateFeatureInfo(info, colors) {
444 | $('#' + TOOLS.featureInfo + ' #chart').empty();
445 |
446 | if (info && colors) {
447 | $('#' + TOOLS.featureInfo + ' h3').text(info.attribute.title);
448 | $('#' + TOOLS.featureInfo + ' p').text(info.attribute.description);
449 |
450 | // variable declarations
451 | var chartArea,
452 | tooltip,
453 | WIDTH = $('#' + TOOLS.featureInfo + ' #chart').width(),
454 | HEIGHT = $('#' + TOOLS.featureInfo + ' #chart').height(),
455 | MARGIN_TOP = 10,
456 | MARGIN_LEFT = 60,
457 | MARGIN_BOTTOM = 60,
458 | min, max, xScale, yScale, xDomain = [],
459 | line = d3.svg.line()
460 | .x(function(d) {return xScale(d.timestamp); })
461 | .y(function(d) {return yScale(d.value); })
462 | .interpolate("linear"),
463 | stddevArea = d3.svg.area()
464 | .x(function(d) {return xScale(d.timestamp); })
465 | .y0(function(d) {return yScale(d.lower); })
466 | .y1(function(d) {return yScale(d.upper); }),
467 |
468 | averages = [],
469 | stddev = [];
470 |
471 |
472 |
473 | //:::::::::::::::.........................................
474 | /* var zoom = d3.behavior.zoom()
475 | .x(xScale)
476 | .y(yScale)
477 | .scaleExtent([1, 10])
478 | .on("zoom", zoomed);
479 |
480 | //zoommmm
481 | // var zoom = d3.behavior.zoom()
482 | // .x(x)
483 | // .y(y)
484 | // .on("zoom", zoomed);
485 |
486 | // iterating through a dataset or arrays
487 | for (var key in info.stats) {
488 | min = d3.min([info.stats[key].min, min]);
489 | max = d3.max([info.stats[key].max, max]);
490 | console.log("min: " + min + " max: "+ max);
491 | }
492 |
493 | if (info.attribute === 'DateOfLatestEdit' || info.attribute === 'dateOfEldestEdit')
494 | {
495 | MARGIN_LEFT += 20;
496 | }
497 | else
498 | {
499 | min = 0;
500 | }
501 |
502 | for (var i = 0, len = info.timestamps.length; i < len; i++) {
503 | xDomain.push(info.timestamps[i].timestamp.substring(0, info.timestamps[i].timestamp.lastIndexOf('-')));
504 | }
505 |
506 |
507 | /* var zoom = d3.behavior.zoom()
508 | .x(xScale)
509 | .on("zoom", function() {
510 | if (xScale.domain()[0] < xDomain) {
511 | var x = zoom.translate()[0] - xScale(xDomain) + xScale.range()[0];
512 | zoom.translate([x, 0]);
513 | } else if (xScale.domain()[1] > xDomain) {
514 | var x = zoom.translate()[0] - xScale(xDomain) + xScale.range()[1];
515 | zoom.translate([x, 0]);
516 | }
517 | redrawChart();
518 | // updateViewportFromChart();
519 | });
520 |
521 |
522 | // scales, domain and ranges to adjust our visualization to match our data..........
523 | // D3 ...scales are represented using domain and ranges
524 |
525 |
526 | // variable xScale & yScale
527 | xScale = d3.scale.ordinal()
528 | .domain(xDomain)
529 | .rangePoints([MARGIN_LEFT + 10, WIDTH - 20]);
530 | yScale = d3.scale.linear()
531 | .domain([max, min])
532 | .range([MARGIN_TOP + 10, (HEIGHT - MARGIN_BOTTOM)]);
533 |
534 |
535 | // chartArea .... generate SVG element...
536 | chartArea = d3.select("div#chart")
537 | .append("svg")
538 | .attr("width", WIDTH)
539 | .attr("height", HEIGHT);
540 |
541 | // .append("g")
542 |
543 |
544 | // svg.append("line")
545 |
546 |
547 | //.append("g")
548 | //.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
549 | //.call(zoom);
550 |
551 | /* var zoom = d3.behavior.zoom()
552 | .on("zoom", draw);
553 |
554 |
555 | chartArea.append("clipPath")
556 | .attr("id", "clip")
557 | .append("rect")
558 | .attr("x", x(0))
559 | .attr("y", y(1))
560 | .attr("width", x(1) - x(0))
561 | .attr("height", y(0) - y(1));*/
562 | /* .call(zoom)
563 | .append("g")
564 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
565 |
566 |
567 | //.....................................................................................
568 | tooltip = d3.select("div#chart")
569 | .append("div")
570 | .style("position", "absolute")
571 | .style("font-family", "'Open Sans', sans-serif")
572 | .style("font-size", "16px")
573 | .style("z-index", "10")
574 | .style("visibility", "hidden");
575 | //................................................................................
576 | //::::::::::::::....................................................................................
577 |
578 |
579 |
580 |
581 |
582 |
583 | // **********************
584 | // PLOT STATISTICAL MEASURES
585 |
586 | for (var key in info.stats) {
587 | averages.push({"timestamp": key, "value": info.stats[key].avg});
588 | stddev.push({"timestamp": key, "upper": info.stats[key].avg + info.stats[key].std, "lower": info.stats[key].avg - info.stats[key].std});
589 | }
590 |
591 |
592 | // svg path to create standard deviation area
593 | chartArea.append("svg:path")
594 | .datum(stddev)
595 | .attr("fill", '#f0f0f0')
596 | .attr("d", stddevArea);
597 |
598 | // svg path to create averages lines
599 | chartArea.append("svg:path")
600 | .attr("d", line(averages))
601 | .attr("stroke", '#bbb')
602 | .attr("stroke-width", 2)
603 | .attr("fill", "transparent");
604 |
605 |
606 |
607 | // **********************
608 | // PREPARE THE CHART AREA
609 |
610 | // dynamic vertical rule
611 | chartArea.selectAll(".yRule")
612 | .data(yScale.ticks(5))
613 | .enter().append("line")
614 | .attr("class", "yRule")
615 | .attr("x1", MARGIN_LEFT)
616 | .attr("x2", WIDTH)
617 | .attr("y1", yScale)
618 | .attr("y2", yScale)
619 | .style("stroke", "#ccc");
620 |
621 | // add axes ... svg line element
622 | chartArea.append("svg:line")
623 | .attr("class", "yBase")
624 | .attr("x1", MARGIN_LEFT)
625 | .attr("x2", WIDTH)
626 | .attr("y1", (HEIGHT - MARGIN_BOTTOM))
627 | .attr("y2", (HEIGHT - MARGIN_BOTTOM))
628 | .style("stroke", "#000")
629 | .style("stroke-width", "1")
630 | ;
631 | // .append('g')
632 | // .attr("transform", "translate(" + width + ",0)");
633 |
634 | // add label by adding text elements to SVG element
635 | chartArea.selectAll(".yLabel")
636 | .data(yScale.ticks(5))
637 | .enter().append("svg:text")
638 | .attr("class", "yLabel")
639 | .text(function (d) {
640 | if (info.attribute == 'DateOfLatestEdit' || info.attribute == 'dateOfEldestEdit') {
641 | var date = new Date(d);
642 | var m = (date.getMonth()+1) < 10 ? "0" + (date.getMonth()+1) : (date.getMonth()+1);
643 | return date.getFullYear() + "-" + m;
644 | } else {
645 | return d;
646 | }
647 | })
648 | .attr("x", MARGIN_LEFT - 10)
649 | .attr("y", yScale)
650 | .attr("text-anchor", "end")
651 | .attr("font-size", "14");
652 |
653 | // add axes ... svg line element
654 | chartArea.selectAll(".xTicks")
655 | .data(xDomain)
656 | .enter().append("svg:line")
657 | .attr("class", "xTicks")
658 | .attr("x1", function(d) {return xScale(d);})
659 | .attr("x2", function(d) {return xScale(d);})
660 | .attr("y1", HEIGHT - MARGIN_BOTTOM)
661 | .attr("y2", HEIGHT - MARGIN_BOTTOM + 5)
662 | .style("stroke", "#000")
663 | ;
664 | // .append('g')
665 | //.attr("transform", "translate(0," + height + ")");
666 |
667 |
668 |
669 | // add label by adding text elements to SVG element
670 | chartArea.selectAll(".xLabel")
671 | .data(xDomain)
672 | .enter().append("svg:text")
673 | .attr("class", "xLabel")
674 | .text(function(d) {return d;})
675 | .attr("x", function(d) {return xScale(d);})
676 | .attr("y", HEIGHT - MARGIN_BOTTOM + 10)
677 | .attr("text-anchor", "top")
678 | .attr("style", "writing-mode: tb;")
679 | .attr("font-size", "14");
680 |
681 |
682 | // **********************
683 | // PLOT THE GRAPH
684 |
685 | for (var i = 0, len = info.result.length; i < len; i++) {
686 | var item = info.result[i],
687 | value = [];
688 | // console.log(info.result);
689 | for (var key in item.values) {
690 | value.push({"timestamp": key, "value": item.values[key]});
691 | }
692 | // console.log(value);
693 |
694 |
695 | //data bound to line...................................................................................................................
696 | // d3.select("#start").on("click", function() {
697 | var path = chartArea.append("svg:path") // for unrolling line time animation
698 | .attr("d", line(value))
699 | .attr("stroke", colors[i])
700 | .attr("fill", "transparent")
701 | ;
702 |
703 |
704 |
705 | // Variable to Hold Total Length
706 | var totalLength = path.node().getTotalLength();
707 |
708 | // Set Properties of Dash Array and Dash Offset and initiate Transition
709 | path
710 | .attr("stroke-dasharray", totalLength + " " + totalLength)
711 | .attr("stroke-dashoffset", totalLength)
712 | .transition() // Call Transition Method
713 | .duration(4000) // Set Duration timing (ms)
714 | .ease("linear") // Set Easing option
715 | .attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition...........................................................
716 |
717 |
718 |
719 |
720 |
721 | chartArea.selectAll("path" + item.cell_id).data(value)
722 | .enter().append("svg:circle")
723 | .attr("class", "path" + item.cell_id)
724 | .attr("cx", function(d) {return xScale(d.timestamp.substring(0, d.timestamp.lastIndexOf('-'))); })
725 | .attr("cy", function(d) {return yScale(d.value); })
726 | .attr("r", 5)
727 | .attr("fill", "#ffffff")
728 | .attr("stroke", colors[i])
729 | .attr("stroke-width", 2)
730 |
731 |
732 | // testing event listeners...................................................................................
733 |
734 | .on("mouseover", function(d){
735 | return tooltip.style("visibility", "visible").text(d.timestamp + ": " + d.value);
736 | })
737 | .on("mousemove", function(d){
738 | return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px").text(d.timpestamp + ": " + d.value);
739 | })
740 | .on("mouseout", function(d){
741 | return tooltip.style("visibility", "hidden");
742 | });
743 |
744 |
745 |
746 | // var zoom = d3.behavior.zoom()
747 | //.on("zoom", draw);
748 |
749 | /* var xyzoom = d3.behavior.zoom()
750 | .x(xscale)
751 | .y(yscale)
752 | .on("zoom", zoomable ? draw : null);
753 | var xzoom = d3.behavior.zoom()
754 | .x(xscale)
755 | .on("zoom", zoomable ? draw : null);
756 | var yzoom = d3.behavior.zoom()
757 | .y(yscale)
758 | .on("zoom", zoomable ? draw : null);
759 |
760 | function draw() {
761 | // svg.select("g.x.axis").call(xAxis);
762 | // svg.select("g.y.axis").call(yAxis);
763 | // svg.select("path.area").attr("d", stddevArea);
764 | svg.select("path.line").attr("d", line);
765 | } ;
766 | */
767 |
768 | // });
769 | /* // Reset Animation
770 | d3.select("#reset").on("click", function() {
771 | d3.select(".line").remove();
772 | });...........................................................................................................................
773 | }
774 |
775 | */
776 |
777 | // **********************
778 | // OPEN THE THING, YO!
779 |
780 | /* if (!$('#' + TOOLS.featureInfo + '> .content').hasClass('active')) {$('#' + TOOLS.featureInfo + ' button').click(); }
781 | } else {
782 | $('#' + TOOLS.featureInfo + ' h3').text('');
783 | $('#' + TOOLS.featureInfo + ' p').text('Click on the map to get information on the temporal evolution of the selected characteristic in the area of interest.');
784 |
785 | }
786 | setLoadingState(false, TOOLS.featureInfo);
787 | }
788 |
789 | function setFeatureInfoLoadingState(state) {
790 | setLoadingState(state, TOOLS.featureInfo);
791 | }
792 | */
793 | /* *********************************************************************
794 | * CONSTRUCTOR
795 | * *********************************************************************/
796 |
797 | function Ui() {
798 | $('.tool > button').click(handleButtonClick);
799 | $('#' + TOOLS.layer + ' .btn-group button').click(handleLayerModeToogle);
800 | $('#' + TOOLS.geocode + ' input[type="text"]').keypress(handleFormType);
801 | $('#' + TOOLS.layer + ' form').submit(handleLayerSubmit);
802 | hideMessage();
803 | }
804 |
805 |
806 |
807 | Ui.prototype = new EventEmitter();
808 | Ui.prototype.constructor = Ui;
809 |
810 | Ui.prototype.updateGeocodeResultList = updateGeocodeResultList;
811 | Ui.prototype.initializeLayerSwitcher = initializeLayerSwitcher;
812 | Ui.prototype.setLayerSwitcherToMode = setLayerSwitcherToMode;
813 | Ui.prototype.stopGeolocation = stopGeolocation;
814 | Ui.prototype.deactivateGeolocation = deactivateGeolocation;
815 | Ui.prototype.updateLegend = updateLegend;
816 | Ui.prototype.updateFeatureInfo = updateFeatureInfo;
817 | Ui.prototype.setLayerLoadingState = setLayerLoadingState;
818 | Ui.prototype.setFeatureInfoLoadingState = setFeatureInfoLoadingState;
819 |
820 |
821 | theInterface = new Ui();
822 |
823 | return theInterface;
824 | }(window));
825 |
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | (The MIT License)
2 |
3 | Copyright (c) 2013 Oliver Roick