Browse Source

move to a webapp

Phyks (Lucas Verney) 1 month ago
parent
commit
c21cbbfc9b
6 changed files with 1157 additions and 1713 deletions
  1. 0
    1708
      BrouterTesting.ipynb
  2. 9
    5
      README.md
  3. 635
    0
      css/leaflet.css
  4. 274
    0
      index.html
  5. 5
    0
      js/leaflet.js
  6. 234
    0
      tests.js

+ 0
- 1708
BrouterTesting.ipynb
File diff suppressed because it is too large
View File


+ 9
- 5
README.md View File

@@ -1,14 +1,18 @@
1 1
 BRouter profiles testing
2 2
 ========================
3 3
 
4
-Here is an [iPython notebook](https://jupyter.org/) to help test, compare and
4
+Here is a very simple web application to help test, compare and
5 5
 review [BRouter](https://github.com/abrensch/brouter) profiles.
6 6
 
7
-You need to have a working BRouter instance to run the tests against it. The
8
-notebook should be commented and self-explanatory.
7
+You need to have a working BRouter instance to run the tests against it. More
8
+details about the expected `segments` files and configuration is available
9
+within the webapp.
10
+
11
+## Add a new test case
12
+
13
+Test cases are stored in a JSON-like structure in the `tests.js` file.
9 14
 
10 15
 
11 16
 ## License
12 17
 
13
-This code is licensed under an MIT license, unless explicitly mentionned
14
-otherwise.
18
+This code is licensed under an MIT license.

+ 635
- 0
css/leaflet.css View File

@@ -0,0 +1,635 @@
1
+/* required styles */
2
+
3
+.leaflet-pane,
4
+.leaflet-tile,
5
+.leaflet-marker-icon,
6
+.leaflet-marker-shadow,
7
+.leaflet-tile-container,
8
+.leaflet-pane > svg,
9
+.leaflet-pane > canvas,
10
+.leaflet-zoom-box,
11
+.leaflet-image-layer,
12
+.leaflet-layer {
13
+	position: absolute;
14
+	left: 0;
15
+	top: 0;
16
+	}
17
+.leaflet-container {
18
+	overflow: hidden;
19
+	}
20
+.leaflet-tile,
21
+.leaflet-marker-icon,
22
+.leaflet-marker-shadow {
23
+	-webkit-user-select: none;
24
+	   -moz-user-select: none;
25
+	        user-select: none;
26
+	  -webkit-user-drag: none;
27
+	}
28
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
29
+.leaflet-safari .leaflet-tile {
30
+	image-rendering: -webkit-optimize-contrast;
31
+	}
32
+/* hack that prevents hw layers "stretching" when loading new tiles */
33
+.leaflet-safari .leaflet-tile-container {
34
+	width: 1600px;
35
+	height: 1600px;
36
+	-webkit-transform-origin: 0 0;
37
+	}
38
+.leaflet-marker-icon,
39
+.leaflet-marker-shadow {
40
+	display: block;
41
+	}
42
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
43
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
44
+.leaflet-container .leaflet-overlay-pane svg,
45
+.leaflet-container .leaflet-marker-pane img,
46
+.leaflet-container .leaflet-shadow-pane img,
47
+.leaflet-container .leaflet-tile-pane img,
48
+.leaflet-container img.leaflet-image-layer,
49
+.leaflet-container .leaflet-tile {
50
+	max-width: none !important;
51
+	max-height: none !important;
52
+	}
53
+
54
+.leaflet-container.leaflet-touch-zoom {
55
+	-ms-touch-action: pan-x pan-y;
56
+	touch-action: pan-x pan-y;
57
+	}
58
+.leaflet-container.leaflet-touch-drag {
59
+	-ms-touch-action: pinch-zoom;
60
+	/* Fallback for FF which doesn't support pinch-zoom */
61
+	touch-action: none;
62
+	touch-action: pinch-zoom;
63
+}
64
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
65
+	-ms-touch-action: none;
66
+	touch-action: none;
67
+}
68
+.leaflet-container {
69
+	-webkit-tap-highlight-color: transparent;
70
+}
71
+.leaflet-container a {
72
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
73
+}
74
+.leaflet-tile {
75
+	filter: inherit;
76
+	visibility: hidden;
77
+	}
78
+.leaflet-tile-loaded {
79
+	visibility: inherit;
80
+	}
81
+.leaflet-zoom-box {
82
+	width: 0;
83
+	height: 0;
84
+	-moz-box-sizing: border-box;
85
+	     box-sizing: border-box;
86
+	z-index: 800;
87
+	}
88
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
89
+.leaflet-overlay-pane svg {
90
+	-moz-user-select: none;
91
+	}
92
+
93
+.leaflet-pane         { z-index: 400; }
94
+
95
+.leaflet-tile-pane    { z-index: 200; }
96
+.leaflet-overlay-pane { z-index: 400; }
97
+.leaflet-shadow-pane  { z-index: 500; }
98
+.leaflet-marker-pane  { z-index: 600; }
99
+.leaflet-tooltip-pane   { z-index: 650; }
100
+.leaflet-popup-pane   { z-index: 700; }
101
+
102
+.leaflet-map-pane canvas { z-index: 100; }
103
+.leaflet-map-pane svg    { z-index: 200; }
104
+
105
+.leaflet-vml-shape {
106
+	width: 1px;
107
+	height: 1px;
108
+	}
109
+.lvml {
110
+	behavior: url(#default#VML);
111
+	display: inline-block;
112
+	position: absolute;
113
+	}
114
+
115
+
116
+/* control positioning */
117
+
118
+.leaflet-control {
119
+	position: relative;
120
+	z-index: 800;
121
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
122
+	pointer-events: auto;
123
+	}
124
+.leaflet-top,
125
+.leaflet-bottom {
126
+	position: absolute;
127
+	z-index: 1000;
128
+	pointer-events: none;
129
+	}
130
+.leaflet-top {
131
+	top: 0;
132
+	}
133
+.leaflet-right {
134
+	right: 0;
135
+	}
136
+.leaflet-bottom {
137
+	bottom: 0;
138
+	}
139
+.leaflet-left {
140
+	left: 0;
141
+	}
142
+.leaflet-control {
143
+	float: left;
144
+	clear: both;
145
+	}
146
+.leaflet-right .leaflet-control {
147
+	float: right;
148
+	}
149
+.leaflet-top .leaflet-control {
150
+	margin-top: 10px;
151
+	}
152
+.leaflet-bottom .leaflet-control {
153
+	margin-bottom: 10px;
154
+	}
155
+.leaflet-left .leaflet-control {
156
+	margin-left: 10px;
157
+	}
158
+.leaflet-right .leaflet-control {
159
+	margin-right: 10px;
160
+	}
161
+
162
+
163
+/* zoom and fade animations */
164
+
165
+.leaflet-fade-anim .leaflet-tile {
166
+	will-change: opacity;
167
+	}
168
+.leaflet-fade-anim .leaflet-popup {
169
+	opacity: 0;
170
+	-webkit-transition: opacity 0.2s linear;
171
+	   -moz-transition: opacity 0.2s linear;
172
+	        transition: opacity 0.2s linear;
173
+	}
174
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
175
+	opacity: 1;
176
+	}
177
+.leaflet-zoom-animated {
178
+	-webkit-transform-origin: 0 0;
179
+	    -ms-transform-origin: 0 0;
180
+	        transform-origin: 0 0;
181
+	}
182
+.leaflet-zoom-anim .leaflet-zoom-animated {
183
+	will-change: transform;
184
+	}
185
+.leaflet-zoom-anim .leaflet-zoom-animated {
186
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
187
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
188
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
189
+	}
190
+.leaflet-zoom-anim .leaflet-tile,
191
+.leaflet-pan-anim .leaflet-tile {
192
+	-webkit-transition: none;
193
+	   -moz-transition: none;
194
+	        transition: none;
195
+	}
196
+
197
+.leaflet-zoom-anim .leaflet-zoom-hide {
198
+	visibility: hidden;
199
+	}
200
+
201
+
202
+/* cursors */
203
+
204
+.leaflet-interactive {
205
+	cursor: pointer;
206
+	}
207
+.leaflet-grab {
208
+	cursor: -webkit-grab;
209
+	cursor:    -moz-grab;
210
+	cursor:         grab;
211
+	}
212
+.leaflet-crosshair,
213
+.leaflet-crosshair .leaflet-interactive {
214
+	cursor: crosshair;
215
+	}
216
+.leaflet-popup-pane,
217
+.leaflet-control {
218
+	cursor: auto;
219
+	}
220
+.leaflet-dragging .leaflet-grab,
221
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
222
+.leaflet-dragging .leaflet-marker-draggable {
223
+	cursor: move;
224
+	cursor: -webkit-grabbing;
225
+	cursor:    -moz-grabbing;
226
+	cursor:         grabbing;
227
+	}
228
+
229
+/* marker & overlays interactivity */
230
+.leaflet-marker-icon,
231
+.leaflet-marker-shadow,
232
+.leaflet-image-layer,
233
+.leaflet-pane > svg path,
234
+.leaflet-tile-container {
235
+	pointer-events: none;
236
+	}
237
+
238
+.leaflet-marker-icon.leaflet-interactive,
239
+.leaflet-image-layer.leaflet-interactive,
240
+.leaflet-pane > svg path.leaflet-interactive {
241
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
242
+	pointer-events: auto;
243
+	}
244
+
245
+/* visual tweaks */
246
+
247
+.leaflet-container {
248
+	background: #ddd;
249
+	outline: 0;
250
+	}
251
+.leaflet-container a {
252
+	color: #0078A8;
253
+	}
254
+.leaflet-container a.leaflet-active {
255
+	outline: 2px solid orange;
256
+	}
257
+.leaflet-zoom-box {
258
+	border: 2px dotted #38f;
259
+	background: rgba(255,255,255,0.5);
260
+	}
261
+
262
+
263
+/* general typography */
264
+.leaflet-container {
265
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
266
+	}
267
+
268
+
269
+/* general toolbar styles */
270
+
271
+.leaflet-bar {
272
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
273
+	border-radius: 4px;
274
+	}
275
+.leaflet-bar a,
276
+.leaflet-bar a:hover {
277
+	background-color: #fff;
278
+	border-bottom: 1px solid #ccc;
279
+	width: 26px;
280
+	height: 26px;
281
+	line-height: 26px;
282
+	display: block;
283
+	text-align: center;
284
+	text-decoration: none;
285
+	color: black;
286
+	}
287
+.leaflet-bar a,
288
+.leaflet-control-layers-toggle {
289
+	background-position: 50% 50%;
290
+	background-repeat: no-repeat;
291
+	display: block;
292
+	}
293
+.leaflet-bar a:hover {
294
+	background-color: #f4f4f4;
295
+	}
296
+.leaflet-bar a:first-child {
297
+	border-top-left-radius: 4px;
298
+	border-top-right-radius: 4px;
299
+	}
300
+.leaflet-bar a:last-child {
301
+	border-bottom-left-radius: 4px;
302
+	border-bottom-right-radius: 4px;
303
+	border-bottom: none;
304
+	}
305
+.leaflet-bar a.leaflet-disabled {
306
+	cursor: default;
307
+	background-color: #f4f4f4;
308
+	color: #bbb;
309
+	}
310
+
311
+.leaflet-touch .leaflet-bar a {
312
+	width: 30px;
313
+	height: 30px;
314
+	line-height: 30px;
315
+	}
316
+.leaflet-touch .leaflet-bar a:first-child {
317
+	border-top-left-radius: 2px;
318
+	border-top-right-radius: 2px;
319
+	}
320
+.leaflet-touch .leaflet-bar a:last-child {
321
+	border-bottom-left-radius: 2px;
322
+	border-bottom-right-radius: 2px;
323
+	}
324
+
325
+/* zoom control */
326
+
327
+.leaflet-control-zoom-in,
328
+.leaflet-control-zoom-out {
329
+	font: bold 18px 'Lucida Console', Monaco, monospace;
330
+	text-indent: 1px;
331
+	}
332
+
333
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
334
+	font-size: 22px;
335
+	}
336
+
337
+
338
+/* layers control */
339
+
340
+.leaflet-control-layers {
341
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
342
+	background: #fff;
343
+	border-radius: 5px;
344
+	}
345
+.leaflet-control-layers-toggle {
346
+	background-image: url(../images/layers.png);
347
+	width: 36px;
348
+	height: 36px;
349
+	}
350
+.leaflet-retina .leaflet-control-layers-toggle {
351
+	background-image: url(../images/layers-2x.png);
352
+	background-size: 26px 26px;
353
+	}
354
+.leaflet-touch .leaflet-control-layers-toggle {
355
+	width: 44px;
356
+	height: 44px;
357
+	}
358
+.leaflet-control-layers .leaflet-control-layers-list,
359
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
360
+	display: none;
361
+	}
362
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
363
+	display: block;
364
+	position: relative;
365
+	}
366
+.leaflet-control-layers-expanded {
367
+	padding: 6px 10px 6px 6px;
368
+	color: #333;
369
+	background: #fff;
370
+	}
371
+.leaflet-control-layers-scrollbar {
372
+	overflow-y: scroll;
373
+	overflow-x: hidden;
374
+	padding-right: 5px;
375
+	}
376
+.leaflet-control-layers-selector {
377
+	margin-top: 2px;
378
+	position: relative;
379
+	top: 1px;
380
+	}
381
+.leaflet-control-layers label {
382
+	display: block;
383
+	}
384
+.leaflet-control-layers-separator {
385
+	height: 0;
386
+	border-top: 1px solid #ddd;
387
+	margin: 5px -10px 5px -6px;
388
+	}
389
+
390
+/* Default icon URLs */
391
+.leaflet-default-icon-path {
392
+	background-image: url(../images/marker-icon.png);
393
+	}
394
+
395
+
396
+/* attribution and scale controls */
397
+
398
+.leaflet-container .leaflet-control-attribution {
399
+	background: #fff;
400
+	background: rgba(255, 255, 255, 0.7);
401
+	margin: 0;
402
+	}
403
+.leaflet-control-attribution,
404
+.leaflet-control-scale-line {
405
+	padding: 0 5px;
406
+	color: #333;
407
+	}
408
+.leaflet-control-attribution a {
409
+	text-decoration: none;
410
+	}
411
+.leaflet-control-attribution a:hover {
412
+	text-decoration: underline;
413
+	}
414
+.leaflet-container .leaflet-control-attribution,
415
+.leaflet-container .leaflet-control-scale {
416
+	font-size: 11px;
417
+	}
418
+.leaflet-left .leaflet-control-scale {
419
+	margin-left: 5px;
420
+	}
421
+.leaflet-bottom .leaflet-control-scale {
422
+	margin-bottom: 5px;
423
+	}
424
+.leaflet-control-scale-line {
425
+	border: 2px solid #777;
426
+	border-top: none;
427
+	line-height: 1.1;
428
+	padding: 2px 5px 1px;
429
+	font-size: 11px;
430
+	white-space: nowrap;
431
+	overflow: hidden;
432
+	-moz-box-sizing: border-box;
433
+	     box-sizing: border-box;
434
+
435
+	background: #fff;
436
+	background: rgba(255, 255, 255, 0.5);
437
+	}
438
+.leaflet-control-scale-line:not(:first-child) {
439
+	border-top: 2px solid #777;
440
+	border-bottom: none;
441
+	margin-top: -2px;
442
+	}
443
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
444
+	border-bottom: 2px solid #777;
445
+	}
446
+
447
+.leaflet-touch .leaflet-control-attribution,
448
+.leaflet-touch .leaflet-control-layers,
449
+.leaflet-touch .leaflet-bar {
450
+	box-shadow: none;
451
+	}
452
+.leaflet-touch .leaflet-control-layers,
453
+.leaflet-touch .leaflet-bar {
454
+	border: 2px solid rgba(0,0,0,0.2);
455
+	background-clip: padding-box;
456
+	}
457
+
458
+
459
+/* popup */
460
+
461
+.leaflet-popup {
462
+	position: absolute;
463
+	text-align: center;
464
+	margin-bottom: 20px;
465
+	}
466
+.leaflet-popup-content-wrapper {
467
+	padding: 1px;
468
+	text-align: left;
469
+	border-radius: 12px;
470
+	}
471
+.leaflet-popup-content {
472
+	margin: 13px 19px;
473
+	line-height: 1.4;
474
+	}
475
+.leaflet-popup-content p {
476
+	margin: 18px 0;
477
+	}
478
+.leaflet-popup-tip-container {
479
+	width: 40px;
480
+	height: 20px;
481
+	position: absolute;
482
+	left: 50%;
483
+	margin-left: -20px;
484
+	overflow: hidden;
485
+	pointer-events: none;
486
+	}
487
+.leaflet-popup-tip {
488
+	width: 17px;
489
+	height: 17px;
490
+	padding: 1px;
491
+
492
+	margin: -10px auto 0;
493
+
494
+	-webkit-transform: rotate(45deg);
495
+	   -moz-transform: rotate(45deg);
496
+	    -ms-transform: rotate(45deg);
497
+	        transform: rotate(45deg);
498
+	}
499
+.leaflet-popup-content-wrapper,
500
+.leaflet-popup-tip {
501
+	background: white;
502
+	color: #333;
503
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
504
+	}
505
+.leaflet-container a.leaflet-popup-close-button {
506
+	position: absolute;
507
+	top: 0;
508
+	right: 0;
509
+	padding: 4px 4px 0 0;
510
+	border: none;
511
+	text-align: center;
512
+	width: 18px;
513
+	height: 14px;
514
+	font: 16px/14px Tahoma, Verdana, sans-serif;
515
+	color: #c3c3c3;
516
+	text-decoration: none;
517
+	font-weight: bold;
518
+	background: transparent;
519
+	}
520
+.leaflet-container a.leaflet-popup-close-button:hover {
521
+	color: #999;
522
+	}
523
+.leaflet-popup-scrolled {
524
+	overflow: auto;
525
+	border-bottom: 1px solid #ddd;
526
+	border-top: 1px solid #ddd;
527
+	}
528
+
529
+.leaflet-oldie .leaflet-popup-content-wrapper {
530
+	zoom: 1;
531
+	}
532
+.leaflet-oldie .leaflet-popup-tip {
533
+	width: 24px;
534
+	margin: 0 auto;
535
+
536
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
537
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
538
+	}
539
+.leaflet-oldie .leaflet-popup-tip-container {
540
+	margin-top: -1px;
541
+	}
542
+
543
+.leaflet-oldie .leaflet-control-zoom,
544
+.leaflet-oldie .leaflet-control-layers,
545
+.leaflet-oldie .leaflet-popup-content-wrapper,
546
+.leaflet-oldie .leaflet-popup-tip {
547
+	border: 1px solid #999;
548
+	}
549
+
550
+
551
+/* div icon */
552
+
553
+.leaflet-div-icon {
554
+	background: #fff;
555
+	border: 1px solid #666;
556
+	}
557
+
558
+
559
+/* Tooltip */
560
+/* Base styles for the element that has a tooltip */
561
+.leaflet-tooltip {
562
+	position: absolute;
563
+	padding: 6px;
564
+	background-color: #fff;
565
+	border: 1px solid #fff;
566
+	border-radius: 3px;
567
+	color: #222;
568
+	white-space: nowrap;
569
+	-webkit-user-select: none;
570
+	-moz-user-select: none;
571
+	-ms-user-select: none;
572
+	user-select: none;
573
+	pointer-events: none;
574
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
575
+	}
576
+.leaflet-tooltip.leaflet-clickable {
577
+	cursor: pointer;
578
+	pointer-events: auto;
579
+	}
580
+.leaflet-tooltip-top:before,
581
+.leaflet-tooltip-bottom:before,
582
+.leaflet-tooltip-left:before,
583
+.leaflet-tooltip-right:before {
584
+	position: absolute;
585
+	pointer-events: none;
586
+	border: 6px solid transparent;
587
+	background: transparent;
588
+	content: "";
589
+	}
590
+
591
+/* Directions */
592
+
593
+.leaflet-tooltip-bottom {
594
+	margin-top: 6px;
595
+}
596
+.leaflet-tooltip-top {
597
+	margin-top: -6px;
598
+}
599
+.leaflet-tooltip-bottom:before,
600
+.leaflet-tooltip-top:before {
601
+	left: 50%;
602
+	margin-left: -6px;
603
+	}
604
+.leaflet-tooltip-top:before {
605
+	bottom: 0;
606
+	margin-bottom: -12px;
607
+	border-top-color: #fff;
608
+	}
609
+.leaflet-tooltip-bottom:before {
610
+	top: 0;
611
+	margin-top: -12px;
612
+	margin-left: -6px;
613
+	border-bottom-color: #fff;
614
+	}
615
+.leaflet-tooltip-left {
616
+	margin-left: -6px;
617
+}
618
+.leaflet-tooltip-right {
619
+	margin-left: 6px;
620
+}
621
+.leaflet-tooltip-left:before,
622
+.leaflet-tooltip-right:before {
623
+	top: 50%;
624
+	margin-top: -6px;
625
+	}
626
+.leaflet-tooltip-left:before {
627
+	right: 0;
628
+	margin-right: -12px;
629
+	border-left-color: #fff;
630
+	}
631
+.leaflet-tooltip-right:before {
632
+	left: 0;
633
+	margin-left: -12px;
634
+	border-right-color: #fff;
635
+	}

+ 274
- 0
index.html View File

@@ -0,0 +1,274 @@
1
+<!DOCTYPE html>
2
+<html>
3
+    <head>
4
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5
+        <meta charset="utf-8">
6
+        <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
7
+        <title>Testing BRouter profiles</title>
8
+
9
+        <link rel="stylesheet" href="css/leaflet.css">
10
+        <style>
11
+            body {
12
+                max-width: 800px;
13
+                margin: auto;
14
+                font-family: sans-serif;
15
+                font-size: 14px;
16
+                text-align: justify;
17
+            }
18
+
19
+            h1 {
20
+                text-align: center;
21
+                margin-top: 20px;
22
+                margin-bottom: 20px;
23
+            }
24
+
25
+            .summary {
26
+                font-size: 0.8em;
27
+            }
28
+
29
+            .summary li {
30
+                margin-bottom: 2px;
31
+            }
32
+
33
+            .testcase {
34
+                margin-bottom: 30px;
35
+            }
36
+
37
+            .map {
38
+                height: 300px;
39
+            }
40
+
41
+            .footer {
42
+                font-size: 0.8em;
43
+                display: flex;
44
+            }
45
+
46
+            .debug {
47
+                flex: auto;
48
+                text-align: left;
49
+            }
50
+            .back-top {
51
+                flex: auto;
52
+                text-align: right;
53
+            }
54
+
55
+            label {
56
+                display: inline-block;
57
+                text-align: left;
58
+            }
59
+            input[type="text"], textarea {
60
+                width: 100%;
61
+                display: inline-block;
62
+            }
63
+            textarea {
64
+                min-height: 300px;
65
+            }
66
+            #step2 {
67
+                display: none;
68
+            }
69
+            .center {
70
+                text-align: center;
71
+            }
72
+
73
+            .error {
74
+                font-weight: bold;
75
+                color: red;
76
+            }
77
+
78
+            .footnote {
79
+                font-size: 0.8em;
80
+                margin-top: -10px;
81
+            }
82
+        </style>
83
+    </head>
84
+    <body>
85
+        <h1 id="brouter-tester">BRouter profiles tester</h1>
86
+        <p>Here are some test cases to check <a href="http://brouter.de/">BRouter</a> profiles and help with development of new profiles.</p>
87
+
88
+        <p><strong>Important: beware that the map tiles used are the live map tiles (using up to date OSM data) contrary to the BRouter <code>segments4</code> test files which are using a fixed dump of OSM data. Then, the map background may come out of sync with the data used by BRouter and are only there as an eyeguide.</strong></p>
89
+
90
+        <p>The map show the route computed with the selected profile (in blue), the route computed by the reference profile (in grey) as well as a route computed by a human (in green). Note that the human route is not necessarily the best one or the unique valid solution.</p>
91
+
92
+        <p>The tests assume the BRouter instance uses <a href="https://pub.phyks.me/brouter-testing/segments4/">these <code>segments4</code> files</a> which are built from the <a href="https://download.geofabrik.de/">Geofabrik.de</a> extracts of metropolitan France, New York state (US) and Sachsen state (Germany) from the 10th of November, 2018. The <code>profiles2</code> folder used to build the <code>segments4</code> files is available <a href="https://pub.phyks.me/brouter-testing/profiles2/">here</a> (including the <code>lookups.dat</code> file). The SRTM data used to build the <code>segments4</code> are available <a href="https://pub.phyks.me/brouter-testing/srtm/">here</a>.</p>
93
+
94
+
95
+        <h2>Settings</h2>
96
+        <form id="settings">
97
+            <p>
98
+                <label for="profile">Profile content: </label>
99
+                <textarea name="profile" id="profile"></textarea>
100
+            </p>
101
+            <p>
102
+                <label for="reference-profile">Reference profile: </label>
103
+                <input type="text" name="reference_profile" id="reference-profile" value="trekking" />
104
+            </p>
105
+            <p>
106
+                <label for="brouter-url">BRouter URL: </label>
107
+                <input type="text" name="brouter_url" id="brouter-url" value="http://127.0.0.1:17777" />
108
+                <p class="footnote">Your BRouter instance should provide <a href="https://developer.mozilla.org/fr/docs/Web/HTTP/CORS">CORS</a> headers. Otherwise, you can use an extension such as <a href="https://addons.mozilla.org/fr/firefox/addon/cors-everywhere/">CORS Everywhere</a>.</p>
109
+            </p>
110
+            <p>
111
+                <label for="brouter-web-url">BRouter web URL (for debug): </label>
112
+                <input type="text" name="brouter_web_url" id="brouter-web-url" value="http://brouter.de/brouter-web/" />
113
+            </p>
114
+            <p>
115
+                <label for="tile-url">Tile URL: </label>
116
+                <input type="text" name="tile_url" id="tile-url" value="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
117
+            </p>
118
+
119
+            <p class="error" id="error"></p>
120
+            <p class="center"><input type="submit" value="Run tests"/></p>
121
+        </form>
122
+
123
+        <div id="step2">
124
+            <h2>Summary</h2>
125
+            <div class="summary"></div>
126
+
127
+            <template class="testcase-template">
128
+                <div class="testcase">
129
+                    <p class="description"></p>
130
+                    <p class="error"></p>
131
+                    <div class="map"></div>
132
+                    <div class="footer">
133
+                        <p class="debug"><a href="">Debug this test case</a></p>
134
+                        <p class="back-top"><a href="#brouter-tester">Back to top ↑</a></p>
135
+                    </div>
136
+                </div>
137
+            </template>
138
+        </div>
139
+
140
+        <script src="js/leaflet.js"></script>
141
+        <script src="tests.js"></script>
142
+        <script type="text/javascript">
143
+            document.querySelector('#settings').addEventListener('submit', function (event) {
144
+                event.preventDefault();
145
+                document.querySelector('#settings input[type="submit"]').disabled = true;
146
+
147
+                var profile = document.querySelector('#profile').value;
148
+                var referenceProfile = document.querySelector('#reference-profile').value;
149
+                var brouterUrl = document.querySelector('#brouter-url').value;
150
+                var brouterWebUrl = document.querySelector('#brouter-web-url').value;
151
+                var tileUrl = document.querySelector('#tile-url').value;
152
+
153
+                if (!profile || !referenceProfile || !brouterUrl || !brouterWebUrl) {
154
+                    document.querySelector('#error').innerText = 'ERROR: Missing field.';
155
+                    return;
156
+                }
157
+
158
+                fetch(brouterUrl + '/brouter/profile', {
159
+                    method : "POST",
160
+                    body: profile,
161
+                }).then(function (response) {
162
+                    return response.json();
163
+                }).then(function (response) {
164
+                    var profileId = response['profileid'];
165
+
166
+                    document.querySelector('#step2').style.display = 'block';
167
+
168
+                    var idx = 0;
169
+                    Object.keys(TESTS).forEach(function (testCategory) {
170
+                        var testCategoryID = testCategory.replace(/[^a-zA-Z]/g, "");
171
+
172
+                        // Create dedicated section
173
+                        var h2 = document.createElement('h2');
174
+                        h2.innerText = testCategory;
175
+                        h2.id = testCategoryID;
176
+                        document.body.appendChild(h2);
177
+
178
+                        // Handle summary
179
+                        var summaryTitle = document.createElement('h3');
180
+                        var summaryTitleLink = document.createElement('a');
181
+                        summaryTitleLink.href = '#' + testCategoryID;
182
+                        summaryTitleLink.innerText = testCategory;
183
+                        summaryTitle.appendChild(summaryTitleLink);
184
+                        var summaryList = document.createElement('ul');
185
+                        summaryList.id = testCategoryID + '-summary';
186
+                        var summary = document.querySelector('.summary');
187
+                        summary.appendChild(summaryTitle);
188
+                        summary.appendChild(summaryList);
189
+
190
+                        // Handle all test cases
191
+                        TESTS[testCategory].forEach(function (testCase) {
192
+                            var startPoint = testCase.start_point;
193
+                            var endPoint = testCase.end_point;
194
+
195
+                            // Update summary
196
+                            var li = document.createElement('li');
197
+                            var a = document.createElement('a');
198
+                            a.href = '#testcase-' + idx;
199
+                            a.innerText = testCase.description;
200
+                            li.appendChild(a);
201
+                            document.querySelector('#' + testCategoryID + '-summary').append(li);
202
+
203
+                            // Create entry with map and description
204
+                            var template = document.querySelector(".testcase-template");
205
+                            var clone = template.content.cloneNode(true);
206
+                            clone.querySelector('.map').id = 'map_' + idx;
207
+                            clone.querySelector('.error').id = 'error_' + idx;
208
+                            clone.querySelector('.description').id = 'testcase-' + idx;
209
+                            clone.querySelector('.description').innerText = '→ ' + testCase.description;
210
+                            clone.querySelector('.debug a').href = (
211
+                                document.querySelector('#brouter-web-url').value + '/#' +
212
+                                'map=15/' + startPoint[1] + '/' + startPoint[0] + '/osm&' +
213
+                                'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
214
+                                'profile=' + document.querySelector('#reference-profile').value
215
+                            );
216
+                            document.body.appendChild(clone);
217
+
218
+                            var map = L.map('map_' + idx);
219
+                            L.tileLayer(tileUrl, {
220
+                                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
221
+                                minZoom: 0,
222
+                                maxZoom: 20,
223
+                            }).addTo(map);
224
+                            map.fitBounds(L.latLngBounds(
225
+                                L.latLng(Math.min(startPoint[1], endPoint[1]), Math.min(startPoint[0], endPoint[0])),
226
+                                L.latLng(Math.max(startPoint[1], endPoint[1]), Math.max(startPoint[0], endPoint[0]))
227
+                            ));
228
+                            if (testCase.human) {
229
+                                L.geoJSON(testCase.human, { style: { color: '#5CA423' } }).addTo(map);
230
+                            }
231
+
232
+                            function delayFetch(startPoint, endPoint, map, idx) {
233
+                                return function () {
234
+                                    fetch(
235
+                                        brouterUrl + '/brouter?' +
236
+                                        'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
237
+                                        'profile=' + profileId + '&' +
238
+                                        'alternativeidx=0&format=geojson'
239
+                                    ).then(function (geojson) {
240
+                                        return geojson.json();
241
+                                    }).then(function (geojson) {
242
+                                        L.geoJSON(geojson).addTo(map);
243
+
244
+                                        fetch(
245
+                                            brouterUrl + '/brouter?' +
246
+                                            'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
247
+                                            'profile=' + referenceProfile + '&' +
248
+                                            'alternativeidx=0&format=geojson'
249
+                                        ).then(function (geojson) {
250
+                                            return geojson.json();
251
+                                        }).then(function (geojson) {
252
+                                            L.geoJSON(geojson, { style: { color: '#666666' } }).addTo(map);
253
+                                        }).catch(function (error) {
254
+                                            document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error;
255
+                                        });
256
+                                    }).catch(function (error) {
257
+                                        document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error;
258
+                                    });
259
+                                };
260
+                            }
261
+
262
+                            // Overlay route with current profile
263
+                            setTimeout(delayFetch(startPoint, endPoint, map, idx), idx * 1000);
264
+
265
+                            idx += 1;
266
+                        });
267
+                    });
268
+                }).catch(function (exc) {
269
+                    document.querySelector('#error').innerText = 'ERROR:' + exc;
270
+                });
271
+            });
272
+        </script>
273
+    </body>
274
+</html>

+ 5
- 0
js/leaflet.js
File diff suppressed because it is too large
View File


+ 234
- 0
tests.js
File diff suppressed because it is too large
View File