-
Notifications
You must be signed in to change notification settings - Fork 4
/
boomregister2.html
102 lines (100 loc) · 7.78 KB
/
boomregister2.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ClientJS/0.2.1/client.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="boomregister2.css">
</head>
<body>
<div id='map'>
</div>
<div id='buttonbox'>
<div>Wijzigingen</div>
<div>
<input type="button" value="reset" id="resetbutton" onclick="resetMap()">
<input type="button" value="verzenden" id="resetbutton" onclick="saveMap()">
</div>
</div>
<div id='infobox'>
<div id="infohtml">
<div><u>Beweeg</u> over een boom voor informatie</div>
<div><u>Klik</u> op een boom om te bewerken</div>
<div>
<svg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg">
<g stroke-linejoin="round" stroke-miterlimit="10" stroke="#000" fill="none">
<path d="m3.0089 4.2436c-0.1614 0.13652-0.37015 0.21908-0.59796 0.21908-0.46223 0-0.84561-0.33893-0.91493-0.78184l-0.010319-0.077523c-0.31141-0.12912-0.52996-0.43603-0.52996-0.79428 0-0.35295 0.21246-0.65617 0.51647-0.78846l0.0127-0.071438c0-0.36539 0.29607-0.66146 0.66146-0.66146l0.066146-0.066146c0-0.47493 0.3847-0.8599 0.8599-0.8599 0.47519 0 0.8599 0.38497 0.8599 0.8599l0.066146 0.066146c0.36539 0 0.66146 0.29607 0.66146 0.66146l0.07911 0.10398c0.26829 0.14552 0.45006 0.42942 0.45006 0.75591 0 0.35613-0.21616 0.66172-0.52493 0.79243l-0.015346 0.07964c-0.069321 0.44265-0.45297 0.78158-0.91493 0.78158-0.22595 0-0.43259-0.080963-0.5932-0.21484z" stroke-width=".26458"/>
<line x1="3.0724" x2="3.0724" y1="2.0814" y2="6.0502" stroke-linecap="round" stroke-width=".26458"/>
<path d="m3.0724 3.5366c0.58446 0 1.0583-0.47387 1.0583-1.0583" stroke-linecap="round" stroke-width=".26458"/>
<path d="m3.0724 3.0075c-0.43841 0-0.79375-0.35534-0.79375-0.79375" stroke-linecap="round" stroke-width=".26458"/>
<line x1="5.0505" x2="5.0505" y1="4.7588" y2="5.7206" stroke-linecap="round" stroke-width=".23601"/>
<line x1="4.5777" x2="5.5396" y1="5.24" y2="5.24" stroke-linecap="round" stroke-width=".23601"/>
</g>
</svg> om een boom toe te voegen
</div>
</div>
</div>
<div id='layers'>
<div class="title">Kaartlagen</div>
<div class="layername">Luchtfoto's</div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2023" checked id="2023"><label for="2023">2023</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2022" id="2022"><label for="2022">2022</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2021" id="2021"><label for="2021">2021</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2020" id="2020"><label for="2020">2020</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2019" id="2019"><label for="2019">2019</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2018" id="2018"><label for="2018">2018</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="2017" id="2017"><label for="2017">2017</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="ahn3" id="ahn3"><label for="ahn3">AHN3</label></div>
<div class="layeritem"><input name="achtergrond" type="radio" value="ahn4" id="ahn4"><label for="ahn4">AHN4</label></div>
<div class="layername">Boomregister</div>
<div class="layeritem"><input name="boomregister" type="radio" value="boomkroon" checked id="boomkroon"><label for="boomkroon">boomkroon</label></div>
<div class="layeritem"><input name="boomregister" type="radio" value="boompunt" id="boompunt"><label for="boompunt">boompunt</label></div>
</div>
<div id="geocoder"><input type="search" placeholder="zoek een adres of plaats" spellcheck="false"><div id="geocoderlist"></div></div>
<div id="tools">
<div id="treeselect" class="toolbutton active" onclick="setMode('treeselect')" title="bomen selecteren">
<svg width="24" height="24" viewBox="0 0 6.3499999 6.3500002" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g><path stroke-linejoin="round" stroke-miterlimit="10" d="M 3.61962,3.28767 4.54566,2.36163 0.841499,1.03871 2.16441,4.74288 3.09045,3.81684 4.81024,5.53662 5.33941,5.00746 Z"
style="stroke-width:0.25294167;stroke-miterlimit:10;" />
</g>
</svg>
</div>
<div id="treeadd" class="toolbutton" onclick="setMode('treeadd')" title="bomen toevoegen">
<svg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg">
<g stroke-linejoin="round" stroke-miterlimit="10">
<path d="m3.0089 4.2436c-0.1614 0.13652-0.37015 0.21908-0.59796 0.21908-0.46223 0-0.84561-0.33893-0.91493-0.78184l-0.010319-0.077523c-0.31141-0.12912-0.52996-0.43603-0.52996-0.79428 0-0.35295 0.21246-0.65617 0.51647-0.78846l0.0127-0.071438c0-0.36539 0.29607-0.66146 0.66146-0.66146l0.066146-0.066146c0-0.47493 0.3847-0.8599 0.8599-0.8599 0.47519 0 0.8599 0.38497 0.8599 0.8599l0.066146 0.066146c0.36539 0 0.66146 0.29607 0.66146 0.66146l0.07911 0.10398c0.26829 0.14552 0.45006 0.42942 0.45006 0.75591 0 0.35613-0.21616 0.66172-0.52493 0.79243l-0.015346 0.07964c-0.069321 0.44265-0.45297 0.78158-0.91493 0.78158-0.22595 0-0.43259-0.080963-0.5932-0.21484z" stroke-width=".26458"/>
<line x1="3.0724" x2="3.0724" y1="2.0814" y2="6.0502" stroke-linecap="round" stroke-width=".26458"/>
<path d="m3.0724 3.5366c0.58446 0 1.0583-0.47387 1.0583-1.0583" stroke-linecap="round" stroke-width=".26458"/>
<path d="m3.0724 3.0075c-0.43841 0-0.79375-0.35534-0.79375-0.79375" stroke-linecap="round" stroke-width=".26458"/>
<line x1="5.0505" x2="5.0505" y1="4.7588" y2="5.7206" stroke-linecap="round" stroke-width=".23601"/>
<line x1="4.5777" x2="5.5396" y1="5.24" y2="5.24" stroke-linecap="round" stroke-width=".23601"/>
</g>
</svg>
</div>
</div>
<div id="dialog" class="hidden">
<div id="dialogoverlay">
<div id="dialogwindow">
<div id="dialogheader"><div id="dialogclosebutton" onclick="dialogClose(this)">x</div></div>
<div id="dialogcontent">
<div>Wijzigingen versturen naar het boomregister</div>
<div>Aantal nieuwe bomen: <span id="newtrees"></span></div>
<div>Aantal gewijzigde bomen: <span id="updatedtrees"></span></div>
<div>Aantal verwijderde bomen: <span id="deletedtrees"></span></div>
<div><input name="email" id="email" type="email" placeholder="gebruiker@domein.nl" spellcheck="false"><label for="usermail">e-mailadres (optioneel)</label></div>
<div><input type="checkbox" name="akkoord" id="akkoord" onchange="dialogPrivacyCheckbox()"><label for="akkoord">Akkoord</label> <a href="boomregisterprivacy.html" target="_privacy">privacystatement</a></div>
<div class="button disabled" id="sendbutton" onclick="uploadButtonClick()">Versturen</div>
<div id="dialogerror" class="hidden">Het versturen is helaas niet gelukt<br>De wijzigingen zijn lokaal bewaard<br>Probeer het later opnieuw<br></div>
<div id="dialognochanges" class="hidden">Er zijn geen wijzigingen om te versturen</div>
</div>
</div>
</div>
</div>
<script src="boomregister2.js"></script>
<script src="boomregistergeocoder.js"></script>
</body>
</html>