-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
767 lines (677 loc) · 41.3 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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Parking private cars in Helsinki Capital Region</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>L_PREFER_CANVAS=false; L_NO_TOUCH=false; L_DISABLE_3D=false;</script>
<!-- import leaflet, leaflet.draw and other needed libraries-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.EasyButton/2.4.0/easy-button.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
<script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.js"></script>
<!--import parking survey variables -->
<script type="text/javascript" src="park_survey.js"></script>
<script type="text/javascript" src="survey_info.js"></script>
<script type="text/javascript" src="survey_funcs.js"></script>
<script type="text/javascript" src="survey_vars.js"></script>
<!--Only activate English language in the beginning-->
<script type="text/javascript" src="lang.en.js"></script>
<!-- survey css stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- other stylesheets -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.EasyButton/2.4.0/easy-button.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<!-- font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div class="" id="mymap"></div>
<script>
//TODO:
//**kyselyn voi rikkoa painamalla markerin ollessa valittuna jotain nappia.
//esim. klikkaam markerilla lähetysnappia, sitten klikkaa karttaa = breakage
//**erase-napin pitäis reverttaa submit-nappi inaktiiviksi
// this file has clear all layers code:
// /~https://github.com/Leaflet/Leaflet.draw/blob/develop/src/edit/EditToolbar.js
//**SCRIPT omaan js-tiedostoon
//**Lähetä-nappi ei toimi jos markerit ei valmiita
//**Disabled submit button ei jostain syystä estä vetämistä tai mousezoomia
//**Disabled submit buttonin tekstin kaksoisklikkaus tekee markerin, mutta
//muun napin kohdalla ei
//**Kirjoita paremmat ohjeet Jquery UI -ikkunaan
//**Kun pisteen on lisännyt olisi hyvä jos kyselypopup aukeaisi automaattisesti
//yks johtolanka tähän: https://jsfiddle.net/emmalivingstone/abpee1ym/
//010319 areMarkersFinished() toimii, mutta ei oo asetettu tänne koodiin minnekään
//050319 pan to unfinished saattaa olla buginen. Voit myös miettiä, onko
//koko juttu tarpeen
// INITIALISE MAP AND LAYERS
//initialise map
var mymap = L.map(
'mymap', {
center: [60.1743, 24.9356],
zoom: 13,
maxBounds: bounds,
maxBoundsViscosity: 0.8,
layers: [],
worldCopyJump: false,
crs: L.CRS.EPSG3857,
zoomControl: true
});
//COOKIES AND OTHER THINGS
//events to listen for baselayer or overlay change for to use of
//cookies
//https://leafletjs.com/reference-1.4.0.html#map-baselayerchange
mymap.on('baselayerchange', function(e) {
console.log(`${e.name} set in cookie`);
var cookie_name = "survey_tilelayer_choice";
var cookie_value = e.name;
create_cookie(cookie_name, cookie_value, 90, "/");
//Listen to baselayerchange and change geojson layer style
//accordingly
if((mymap.hasLayer(OpenStreetMap_DE)) || (mymap.hasLayer(Stamen_Terrain))){
postal.setStyle(stylePostalDark);
} else if (mymap.hasLayer(darkmatter)){
postal.setStyle(stylePostal);
}
});
//COOKIES: SET SITE LANGUAGE WITH COOKIE VALUE
var currentLang = null;
$(document).ready(function(){
if(getCookie("lang") === "fi"){
console.log("Finnish detected from cookie, set language as Finnish");
$.getJSON('fi.json', translate);
window.currentLang = "fi";
} else {
console.log("Value in cookie was not Finnish, default to English");
$.getJSON('en.json', translate);
window.currentLang = "en";
}
});
//COOKIES: SET USER SETTINGS STRAIGHT WITH COOKIE VALUES
//use .addTo() to give mymap the correct cookie value
if(getCookie("survey_tilelayer_choice") === "CartoDB dark_matter"){
darkmatter.addTo(mymap);
} else if (getCookie("survey_tilelayer_choice") === "OpenStreetMap") {
OpenStreetMap_DE.addTo(mymap);
} else if (getCookie("survey_tilelayer_choice") === "Stamen terrain"){
Stamen_Terrain.addTo(mymap);
} else {
darkmatter.addTo(mymap);
}
//COOKIES: Has jQuery infobox been opened?
$(document).ready(function(){
if(getCookie("info_closed_once") === "yes"){
console.log("Cookie value found, hide survey information popup");
infoButton.state('infoOpen');
} else {
//user visiting first time or didn't click X
console.log("Associated cookie value not found, show survey information popup");
//This code is copied from infobutton! consider cleaning
//code so that code is not needlessly duplicated
$(function() {
$("#tabs").tabs();
$("#tabsikkuna").dialog({
height: 630,
width: 560,
resizable: false,
position: {my: "center", at: "center", of: window},
//this hides info dialog main scroll bars.
//only div scroll bars remain
open: function (event, ui) {
$('#tabsikkuna').css('overflow', 'hidden');
}
});
// retain dialog position on window resize
$(window).resize(function() {
$("#tabsikkuna").dialog("option", "position",
{my: "center", at: "center", of: window});
});
} );
infoButton.state('infoClose');
//track if user has closed #tabsikkuna.
//NOTE! X button is not tracked!
create_cookie("info_closed_once", "yes", 90, "/");
}
});
// SUBMIT BUTTON INITIAL DISABLE
//first check up if geojson has nothing in it to disable submit
//button
$(document).ready(function(){
//isGeojsonEmpty();
sendBox.disable();
});
// Initialise empty GeoJSON to be populated by user with responses
var geojson = L.geoJson({
"type": "FeatureCollection",
"features": []
},{
onEachFeature:
function (feature, layer){
layer.on('click', layerClickHandler);
layer.on('mouseover', markerColorListener); //"add" toimii tässä!! jos jotain tarvetta josku
//set incomplete icon at start
if(!feature.properties.datetime || !feature.properties.likert ||
!feature.properties.parkspot || !feature.properties.parktime){
layer.setIcon(incompleteIcon);
}
}
}).addTo(mymap);
// IMPORT POLYGON GEOJSONS
var postal = new L.GeoJSON.AJAX(
"pno_research_area.geojson", {
attribution: 'Postal areas © <a href="http://urn.fi/urn:nbn:fi:csc-kata20180425144903846834">Statistics Finland</a>',
//style function listens to baselayer change and chooses
//GeoJSON layer postal style accordingly
style: function(feature){
if(mymap.hasLayer(darkmatter)){
postal.setStyle(stylePostal);
} else if ((mymap.hasLayer(OpenStreetMap_DE)) || (mymap.hasLayer(Stamen_Terrain))){
postal.setStyle(stylePostalDark);
};
}
}).addTo(mymap);
var postaldissolve = new L.GeoJSON.AJAX(
"pno_dissolve.geojson", {
style: styleArea
}).addTo(mymap);
// Add layer control elements
var baseMaps = {
"OpenStreetMap": OpenStreetMap_DE,
"CartoDB dark_matter": darkmatter,
"Stamen terrain": Stamen_Terrain
};
var overlayMaps = {
"Postal areas": postal,
"Research area": postaldissolve
};
// Add layer control
// Obtain better control of layer control by declaring it as variable
var lCtrl = L.control.layers(baseMaps, overlayMaps);
lCtrl.addTo(mymap);
// Add additional header text to layer control
$('<p id="controlTitle1"><strong tkey="lang_basemap">Basemaps<strong></p>').insertBefore('div.leaflet-control-layers-base');
$('<p id="controlTitle2"><strong tkey="lang_overlay">Overlay maps<strong></p>').insertBefore('div.leaflet-control-layers-overlays');
//lCtrl.update() triggers language change in layer control dialog.
//translate() does not work without this
lCtrl.update = function(map){
$("#controlTitle1").replaceWith(
'<p id="controlTitle1"><strong tkey="lang_basemap">Basemaps<strong></p>');
$("#controlTitle2").replaceWith(
'<p id="controlTitle2"><strong tkey="lang_overlay">Overlay maps<strong></p>');
};
//Highlight overlay layers on mouseover. Also listen to return to
//normal.
postal.on("mouseover", highlightLayer);
postal.on("mouseout", layerToNormal);
//Listen to changes in popup form
//Listen to current click on geojson layer named "geojson"
//this listener idea from: http://embed.plnkr.co/8qVoW5/
function layerClickHandler (e) {
//MARKER LOCATION INTERSECTED WITH OVERLAY LAYERS
//Check with conditional statement what to print on popup.
//Command delete is necessary to remove unwanted values in popup
//when first placing popup on research area and then placing a
//popup outside. This would result to an erroneous result
hitPostal = findIntersection(e.latlng, postal);
if (hitPostal === ""){
html = '<font size="2" color="red" style="line-height: 30px;"><center><strong tkey="lang_outsideResearch">Outside research area!</strong></center></font>';
} else if (hitPostal !== "") {
//take note of the following line and its string formatting
//`${variableName}`. Also take note that string formatting
//needs grave accents ``.
html = `<div tkey="lang_zipArea">Zip code area:</div> ${hitPostal[0].feature.properties.nimi}, ${hitPostal[0].feature.properties.posti_alue}`;
delete hitPostal;
}
var marker = e.target,
properties = e.target.feature.properties;
if(marker.hasOwnProperty('_popup')){
marker.unbindPopup();
}
//check if all values are inserted and print text in popUp
//if this is the case
if(!properties.datetime || !properties.likert
|| !properties.parkspot || !properties.parktime){
marker.bindPopup(html + popupContent + missingStuff);
e.target.setIcon(incompleteIcon);
} else {
marker.bindPopup(popupContent);
e.target.setIcon(completeIcon);
}
marker.openPopup();
// keep language up to date with var currentLang. currentLang
// is updated in beginning of this script file when determining
// cookie language value and when user presses langbutton
languageCheckUp();
//EVENT LISTENERS
//DATETIME
L.DomUtil.get('datetime').textContent = properties.datetime;
var dateTime = L.DomUtil.get('datetime');
dateTime.value = properties.datetime;
L.DomEvent.addListener(dateTime, "change", function (e){
properties.datetime = e.target.value;
});
//PARKING TIME
L.DomUtil.get('parktime').textContent = properties.parktime;
var parkTime = L.DomUtil.get('parktime');
parkTime.value = properties.parktime;
L.DomEvent.addListener(parkTime, "change", function (e){
properties.parktime = e.target.value;
});
//LIKERT
$(L.DomUtil.get('likert')).find(
"input[value='" + properties.likert+ "']").attr('checked', true);
$(document).ready(function(){
$('input[name=likert]').click(function(){
properties.likert = this.value;
});
});
//PARKSPOT
if(typeof currentParkspotValue !== 'undefined'){
$(L.DomUtil.get('parkspot')).find(
"option[value='" + currentParkspotValue + "']").attr('selected', true);
var parkSpot = L.DomUtil.get('parkspot');
parkSpot.value = properties.parkspot;
L.DomEvent.addListener(parkSpot, "change", function(e){
properties.parkspot = e.target.value;
});
} else {
L.DomUtil.get('parkspot').value = properties.parkspot;
var parkSpot = L.DomUtil.get('parkspot');
parkSpot.value = properties.parkspot;
L.DomEvent.addListener(parkSpot, "change", function (e){
properties.parkspot = e.target.value;
});
}
//SAVE BUTTON
var buttonSubmit = L.DomUtil.get('button-submit');
L.DomEvent.addListener(buttonSubmit, "click", function (e){
marker.closePopup();
});
}
//ON EVERY DRAGSTART, CHECK STATE OF FILLED FORM IN EACH POPUP
//It is probably not efficient to run this operation on every
//drag event, but easiest for me to check states of popups
mymap.on("dragstart", function(e){
// get all Leaflet ids of current layers in var geojson and
// test them iteratively to see if any of the feature attributes
// are null
for (var i in geojson._layers){
thisLayer = geojson._layers[i];
theseProps = thisLayer.feature.properties;
theseAttrs = Object.keys(theseProps);
howManyNulls = 0;
//try-catch is placed here in case user places marker in a
//illegal position such as the disabled button. In the current
//state of my code this breaks the following for loop and
//would prevent movement on map.
try{
for (var i = 0; i < attrs.length; i += 1){
//implement test whether layer is interactive or not
//check submit button which changed interactivity to false
attr = theseAttrs[i];
value = theseProps[attr];
if (value === null || value === ""){
howManyNulls += 1;
} else {
// do nothin
}
}
//if above for loop finished without any nulls, mark layer
//completed with a green marker
if (howManyNulls === 0){
thisLayer.setIcon(completeIcon);
} else {
thisLayer.setIcon(incompleteIcon);
}
}
catch(error){
console.log(`Can't detect marker state because marker id ${thisLayer._leaflet_id} was placed in illegal location (on disabled send button most probably). Move mouse on top of marker to solve this debacle.`);
}
};
});
// LANGBUTTON AND INFOBUTTON
//LANGUAGE BUTTON
var langButton = L.easyButton({
states: [{
stateName: 'fi',
icon: 'fas fa-language',
title: "Vaihda kieli englanniksi",
onClick: function (btn, map){
console.log("Current language English. Cookie updated.");
$.getJSON('en.json', translate);
window.currentLang = "en"; // inform layerClickHandler()
// layer control button translation needs updating
lCtrl.update();
btn.state('en');
// update cookie value each time langbutton is pressed
var cookie_name = "lang";
var cookie_value = "en";
create_cookie(cookie_name, cookie_value, 90, "/");
}
}, {
stateName: 'en',
icon: 'fas fa-language',
title: "Change language to Finnish",
onClick: function (btn, map){
console.log("Current language Finnish. Cookie updated.");
$.getJSON('fi.json', translate);
window.currentLang = "fi"; // inform layerClickHandler()
lCtrl.update();
btn.state('fi');
// update cookie value each time langbutton is pressed
var cookie_name = "lang";
var cookie_value = "fi";
create_cookie(cookie_name, cookie_value, 90, "/");
}
}]
});
langButton.addTo(mymap);
//INFOBUTTON
var infoButton = L.easyButton({
states: [{
stateName: 'infoOpen',
icon: 'fa fa-info',
title: 'Open info',
onClick: function (btn, map) {
//initialise jQuery UI dialog and tabs
$(function() {
$("#tabs").tabs();
$("#tabsikkuna").dialog({
height: 630,
width: 560,
resizable: false,
position: {my: "center", at: "center", of: window},
//this hides info dialog main scroll bars.
//only div scroll bars remain
open: function (event, ui) {
$('#tabsikkuna').css('overflow', 'hidden');
}
});
// retain dialog position on window resize
$(window).resize(function() {
$("#tabsikkuna").dialog("option", "position",
{my: "center", at: "center", of: window});
});
} );
btn.state('infoClose');
//track if user has closed #tabsikkuna.
//NOTE! X button is not tracked!
create_cookie("info_closed_once", "yes", 90, "/");
}
}, {
stateName: 'infoClose',
icon: 'fa fa-info',
title: 'Close info',
onClick: function (btn, map) {
$("#tabsikkuna").dialog("close");
btn.state('infoOpen');
}
}]
});
infoButton.addTo(mymap);
// SENDBOX AND BUTTON
var sendBox = L.control({position: 'bottomright'});
sendBox.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'sendbox');
this.update();
return this._div;
};
sendBox.update = function () {
this._div.innerHTML = normalSubmit; //type of button
// Button text would default to the one in HTML code without
// the following if statement
languageCheckUp();
// enable or re-enable submit button listener. Ready function
// is needed in the initial loading of the survey.
$(document).ready(function(){
submitButtonListener();
});
};
// "disable send button" function
sendBox.disable = function () {
this._div.innerHTML = disabledSubmit;
languageCheckUp();
};
sendBox.addTo(mymap);
//prevent unwanted map clicks and other events on sendBox
L.DomEvent.on(buttonsubmitall, 'click', function(e){
L.DomEvent.stopPropagation(e);
});
L.DomEvent.on(buttonsubmitall, 'dblclick', function(e){
L.DomEvent.stopPropagation(e);
});
sendBox.getContainer().addEventListener('mouseover', function(){
mymap.dragging.disable();
mymap.scrollWheelZoom.disable();
});
sendBox.getContainer().addEventListener('mouseout', function(){
mymap.dragging.enable();
mymap.scrollWheelZoom.enable();
});
// "submit records" button functionality uses jQuery UI
// Copying objects in JS is not straightforward and for that reason
// I will not attempt to save sent features on map as gray markers.
// Instead, send button will destroy all entries entered so far.
function submitButtonListener(){
var sendButtonSubmit = L.DomUtil.get('buttonsubmitall');
L.DomEvent.addListener(sendButtonSubmit, "click", function (e){
$(function() {
$("#sucdialog").dialog({
position: {my: "center", at: "center", of: window},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
//retain dialog position on window resize
$(window).resize(function() {
$("#sucdialog").dialog("option", "position", {my: "center", at: "center", of: window});
});
});
geojson.clearLayers();
//in this context func makes sure button is disabled, to
//prevent empty submissions
isGeojsonEmpty();
});
};
//THIS ENABLES A BUTTON WHICH ALSO REVERTS SUBMIT BUTTON TO INACTIVE
//HOW TO ADD THIS TO THE ORIGINAL ERASE BUTTON?
//https://stackoverflow.com/questions/21125543/leaflet-draw-trash-button-delete-all-polygons-and-save
///~https://github.com/Leaflet/Leaflet.draw/issues/265
//https://gis.stackexchange.com/questions/60576/custom-leaflet-controls
//https://stackoverflow.com/questions/46934768/leaflet-draw-delete-button-remove-clear-all-action
L.Control.RemoveAll = L.Control.extend({
options:{
position: 'topleft'
},
onAdd: function (map) {
var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
L.DomEvent
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
.addListener(controlDiv, 'click', function () {
geojson.clearLayers();
isGeojsonEmpty();
});
var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
controlUI.title = 'Remove all markers';
controlUI.href = '#';
return controlDiv;
}
});
var removeAllControl = new L.Control.RemoveAll();
mymap.addControl(removeAllControl);
// this file has clear all layers code:
// /~https://github.com/Leaflet/Leaflet.draw/blob/develop/src/edit/EditToolbar.js
// Initialise drawing tools, disable a bunch of feature types
var draw_control = new L.Control.Draw({
"edit": {
"featureGroup": geojson
},
"draw": {
marker: {
icon: new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
shadowUrl: 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-shadow.png',
iconAnchor: [12, 40],
popupAnchor: [0, -41]
}),
shapeOptions: {
clickable: true
}
},
polyline: false,
polygon: false,
rectangle: false,
circle: false,
circlemarker: false
}
}).addTo(mymap);
// Enable this to have marker placement on right at page load
// giving the instruction draw_control.options.draw.marker allows
// us to start with the red marker
new L.Draw.Marker(mymap, draw_control.options.draw.marker).enable();
// Disable double click zoom and enable double click marker creation
mymap.doubleClickZoom.disable();
mymap.on("dblclick", function (e){
new L.Draw.Marker(mymap, draw_control.options.draw.marker).enable();
});
mymap.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
var lat = layer.getLatLng().lat;
var lng = layer.getLatLng().lng;
var geojsonFeature = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [lng, lat]
},
"properties":{
"datetime": null,
"parktime": null,
"likert": null,
"parkspot": null
}
};
layer.on('click', layerClickHandler); //other: "mouseover", "click"
geojson.addData(geojsonFeature);
// HOX HOX HOX HOX disabled to try areMarkersFinished()
//isGeojsonEmpty(); // In this context makes submit button active
});
mymap.on('draw:created', function(e) {
var layer = e.layer;
var lat = layer.getLatLng().lat;
var lng = layer.getLatLng().lng;
var geojsonFeature = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [lng, lat]
},
"properties":{
"parktime": null
}
};
});
//
// // Object created - bind popup to layer, add to feature group
// mymap.on(L.Draw.Event.CREATED, function(event) {
// var layer = event.layer;
// var content = strLatLng(layer.getLatLng());
// if (content !== null) {
// layer.bindPopup(content);
// }
// drawnItems.addLayer(layer);
// });
//
// Object(s) edited - update popups
mymap.on(L.Draw.Event.EDITED, function(event) {
var layers = event.layers,
content = null;
layers.eachLayer(function(layer) {
content = getPopupContent(layer);
if (content !== null) {
layer.setPopupContent(content);
}
});
});
</script>
<!--JQUERY UI CONTENT-->
<div id="sucdialog" title="Submit success!" style="display:none">
<div class="sucimage"></div>
<p tkey="lang_thanks">Thank you for taking the time to respond to this survey!</p>
</div>
<div id="tabsikkuna" style="overflow: scroll" title="Parking private cars in Helsinki Capital Region">
<div id="tabs" class="tabscontainer">
<ul>
<li><a href="#tabs-1" tkey="lang_tab1">Tervetuloa kyselyyn!</a></li>
<li><a href="#tabs-2" tkey="lang_tab2">Tutkimuksesta</a></li>
<li><a href="#tabs-3" tkey="lang_tab3">Käyttöohjeet</a></li>
</ul>
<div id="tabs-1" class="tabspanel">
<H2 tkey="lang_welcome1">Tervetuloa kyselyyn!</H2>
<p tkey="lang_welcome2">Tämän kyselyn tarkoituksena on selvittää kuinka kauan henkilöauton pysäköinti kestää pääkaupunkiseudulla. Kyselyssä huomioidaan pysäköinnin koko prosessi: kuinka kauan pysäköintipaikkaa etsittiin, minne auto pysäköitiin ja missä oli vastaajan todellinen määränpää. Kyselyssä kerättyjä tietoja käytetään Helsingin yliopiston geoinformatiikan pro gradu -tutkimuksessa, josta voit lukea lisää allaolevasta "tarkempaa tietoa kyselystä" -kohdassa.</p>
<p tkey="lang_welcome3">Tämä kysely tähtää vaivattomuuteen: Jos et muista pysäköinnin tarkkaa aikaa tai paikkaa, voit syöttää näistä arvion. Voit täyttää kyselyn vaikka jokaisen pääkaupunkiseudulla tapahtuneen henkilöautomatkasi päätteeksi, tai täyttää lomakkeen yhdeltä istumalta monta kertaa.</p>
<p tkey="lang_welcome4">Pyydän mahdollisuuksien mukaan jatkamaan kyselyyn vastaamista 31.3.2019 asti.</p>
<p tkey="lang_welcome5"><b>Huom!</b> Huomaathan, että <i>kyselyssä ei kartoiteta kotipihapysäköintiä tai sellaista pysäköintiä, jossa vastaajalla on käytössä henkilökohtainen pysäköintipaikka</i>.</p>
<p tkey="lang_welcome6">Kiitän vastauksestasi, <br>terveisin, Sampo Vesanen</p>
<p tkey="lang_welcome7">Kyselyyn liittyvissä asioissa ota minuun yhteyttä sähköpostitse: sampo.vesanen(at)helsinki.fi</p>
</div>
<div id="tabs-2" class="tabspanel">
<p tkey="lang_about1">Tämän kyselyn tarkoituksena on tutkia pysäköintiin kuluvan ajan alueellista vaihtelua pääkaupunkiseudulla. Kysely noudattaa Salosen ja Toivosen (2013) matka-aikojen mittaamiseen tarkoitettua ovelta ovelle -menetelmää, jonka osana pysäköimisprosessi on. Menetelmän mukaisesti tässä kyselyssä kysytään <b>1)</b> kuinka kauan pysäköintipaikan löytymiseen kului aikaa pysäköinnin etsimisen aloittamisesta, <b>2)</b> missä pysäköintipaikka sijaitsi sekä <b>3)</b> missä oli matkan lopullinen määränpää. Kyselyn tulokset ovat perustana geoinformatiikka-aiheiselle pro gradu -tutkielmalleni, jonka työnimi on <i>Parking of private cars and spatial accessibility in Greater Helsinki Area</i>. Tuloksia käytetään parantamaan Helsingin yliopistossa toimivan Accessibility Research Groupin kehittämää Helsingin seudun matka-aikamatriisimallia (Toivonen et al. 2015). Tällä hetkellä ryhmä käyttää matka-aikamatriisissa karkeaa arviota pysäköintiin kuluvasta ajasta (Kalenoja & Häyrynen 2003). Pro gradu -tutkielmani hypoteesina on, että pysäköintiprosessin kesto vaihtelee pääkaupunkiseudun eri osissa, ja tästä tutkimuksesta saatavat tulokset mahdollistavat alueellisen vaihtelun tutkimisen ja visualisoinnin. Pääset tutustumaan Digital Geography Labin tutkimukseen <a target="_blank" rel="noopener noreferrer" href="https://www.helsinki.fi/en/researchgroups/digital-geography-lab">täällä</a> (avautuu uuteen ikkunaan).</p>
<p tkey="lang_about2"><b>Henkilötietosuojasta:</b> Tässä kyselyssä sinulta kysytään pysäköintisi ja määränpääsi sijaintia. Tämä on mahdollisesti arkaluontoista tietoa, ja vakuutan, että vastauksista ei voi tunnistaa yksilöitä. Kyselyvastausten analysointivaiheessa vastaajien ilmoittamat geopisteet asetetaan YKR-aluejaon (Suomen ympäristökeskus 2018) mukaiseen ruudukkoon (250 metriä kertaa 250 metriä), joka poistaa lopullisesta, pro gradussa esitellystä aineistosta, tarkat sijaintitiedot. Tutkimuksessa ei olla kiinnostuneita 250x250 metriä tarkemmista sijainneista. Pääset tarkastelemaan tutkimusaluetta ja tutkimusruudukon tarkkuutta <a target="_blank" rel="noopener noreferrer" href="http://www.helsinki.fi/science/accessibility/tools/YKR/YKR_Identifier.html">tästä</a> (avautuu uuteen ikkunaan).</p>
<p tkey="lang_about3">Kirjallisuus</p>
<ul type="1" style="list-style-position:inside;">
<li tkey="lang_about4">Kalenoja, H. & J.-P. Häyrynen (2003). Keskustan pysäköinti osana liikennejärjestelmää – Tampereen keskustan pysäköintitutkimus. Tutkimusraportti 51. Tampere University of Technology, Tampere.</li>
<li tkey="lang_about5">Salonen, M. & T. Toivonen (2013). Modelling travel time in urban networks: Comparable measures for private car and public transport. <i>Journal of Transport Geography</i> 31: 143–153.</li>
<li tkey="lang_about6">Toivonen, T., H. Tenkanen, V. Heikinheimo, T. Jaakkola, J. Järvi & M. Salonen (2015). Helsinki Region-Travel Time Matrix 2015. DOI: 10.13140/RG.2.1.1901.3201</li>
<li tkey="lang_about7">Toivonen, T., M. Salonen, H. Tenkanen, P. Saarsalmi, T. Jaakkola & J. Järvi (2014). Joukkoliikenteellä, autolla ja kävellen: Avoin saavutettavuusaineisto pääkaupunkiseudulla. <i>Terra</i> 126: 3, 127–136.</li>
<li tkey="lang_about8">YKR-aluejaot (2018). Suomen ympäristökeskus.</li>
</ul>
</div>
<div id="tabs-3" class="tabspanel">
<p tkey="lang_instr1">Lomake</p>
<ul>
<li tkey="lang_instr2">Lomakkeen kaikki kohdat ovat pakollisia. Anna ystävällisesti vastaus kaikkiin kohtiin.</li>
<li tkey="lang_instr3">Kohteen valitseminen kartalta</li>
<ul>
<li tkey="lang_instr4">Pöytätietokoneella/kannettavalla: Karttanäkymä on välittömästi aktiivinen, voit vetää karttanäkymää yhdellä hiiren klikkauksella. Erillistä vahvistamisnappia ei ole, lomake tallentaa muistiin sen kohteen, johon sijaintinuoli viimeisimpänä jäi. Karttanäkymän koon muuttaminen tietokoneella ei valitettavasti onnistu.</li>
<li tkey="lang_instr5">Älypuhelimella: Saat karttanäkymän esille näpäyttämällä karttaa kerran. Vedä sen jälkeen karttanäkymä oikeaan kohtaan. <b>Muista näpäyttää "ok" karttanäkymän oikeasta yläkulmasta.</b></li>
<li tkey="lang_instr6">Käytä karttanäkymän työkaluja hyväksesi: voit esimerkiksi etsiä osoitteita tai paikkoja tai antaa lomakkeelle lupa paikantaa sijaintisi tähtäimen näköisestä napista. Talo-nappi palauttaa karttanäkymän alkupisteeseensä.</li>
<li tkey="lang_instr7">Kysely ilmoittaa punaisella varoitustekstillä, jos valitsit pysäköintikohteeksi tai määränpääksi pääkaupunkiseudun ulkopuolisen kohteen.</li>
</ul>
</ul>
<p tkey="lang_instr8">Muuta huomioitavaa</p>
<ul>
<li tkey="lang_instr9">Voit täyttää tämän lomakkeen vaikka joka kerta, kun olet pysäköinyt autosi ja kävellyt määränpäähäsi pääkaupunkiseudulla. Lomakkeen voi täyttää joko heti matkan päätyttyä tai myöhemmin, ja jos yksityiskohdat ovat unohtuneet, ilmoita arvio.</li>
<li tkey="lang_instr10">Huomaathan, että tätä kyselyä ei ole tarkoitus käyttää kotipihan pysäköinneissä, tai muissa sellaisissa pysäköinneissä, joissa vastaajalla on olemassa henkilökohtainen parkkipaikka ja pysäköintiin kuluva aika tiedetään. Kotipysäköinneistä poikkeuksena on asukaspysäköintiluvin kadunvarteen tehty pysäköinti.</li>
</ul>
<p tkey="lang_instr11">Tekniset yksityiskohdat</p>
<ul>
<li tkey="lang_instr12">Jos törmäät ongelmiin täyttäessäsi lomaketta, tarkista verkkoselaimesi ajantasaisuus</li>
<li tkey="lang_instr13">Lomake on koekäytetty seuraavilla selaimilla. Suosittelen käyttämään jotain seuraavista:</li>
<ul>
<li tkey="lang_instr14">Älypuhelimella: Chrome (ainakin versio 71)</li>
<li tkey="lang_instr15">Pöytätietokoneella/kannettavalla: Chrome (ainakin versio 71), Firefox (versio 64), Edge (versio 42)</li>
</ul>
<li tkey="lang_instr16">Jos käytät älypuhelinta lomakkeen täyttämiseen ja ongelmasi eivät hälvene vaikka olet seurannut ylläolevia ohjeita, kokeile täyttää lomake pöytä- tai kannettavalla tietokoneella (vaihtoehtoisesti voit kokeilla puhelinta, jos tietokoneella lomake tuottaa ongelmia). Testieni mukaan tietokoneversio tästä lomakkeesta on käyttövarmempi kuin älypuhelimen.</li>
</ul>
</div>
</div>
</div>
</body>
</html>