autoaanvullen-straatnaam-en-woonplaats-bij-postcod
Gesponsorde koppelingen
PHP script bestanden
lookup.html
Code (php)
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
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
<script type="text/javascript" src="examples/lookup.js"></script>
<form action="#">
<table>
<tr>
<td>Postcode:</td>
<td>
<input type="text" size="6" maxlength="7" id="postcode" onkeydown="_lookup.fromPostcode(event);" title="4 of 6 karakter postcode" />
Huisnr:
<input type="text" size="2" id="streetnumber" onkeydown="_lookup.fromPostcode(event);" title="Huisnummer" />
<img id="spinner" style="display:none; border:none; position: relative; top: 3px;" src="examples/ajax-loader.gif" alt="Loading..."/>
</td>
</tr>
<tr>
<td>Straatnaam:</td>
<td>
<input type="text" id="street" readonly="readonly" />
<select id="streets" style="display:none" onchange="_lookup.edit();">
<!-- At least one option is required for XHTML -->
<option></option>
</select>
<a id="unsure" href="#" style="display:none" title="Klik om aan te geven dat de getoonde straat onjuist is.">Onjuist?</a>
<a id="fix" href="#" style="display:none" title="Klik om zelf de gegevens te corrigeren.">Bedankt! Ook corrigeren?</a>
<a id="add" href="#" style="display:none" title="Klik om zelf een straat op deze postcode toe te voegen.">Toevoegen?</a>
<a id="addanother" href="#" style="display:none" title="Klik om zelf nog een extra straat aan deze postcode toe te voegen.">Extra straat?</a>
</td>
</tr>
<tr>
<td class="main">Woonplaats:</td>
<td class="main"><input type="text" id="city" readonly="readonly" /></td>
</tr>
</table>
</form>
<p>
<img id="map" style="display:none; border: none;" src="" alt=""/>
</p>
<form action="#">
<table>
<tr>
<td>Postcode:</td>
<td>
<input type="text" size="6" maxlength="7" id="postcode" onkeydown="_lookup.fromPostcode(event);" title="4 of 6 karakter postcode" />
Huisnr:
<input type="text" size="2" id="streetnumber" onkeydown="_lookup.fromPostcode(event);" title="Huisnummer" />
<img id="spinner" style="display:none; border:none; position: relative; top: 3px;" src="examples/ajax-loader.gif" alt="Loading..."/>
</td>
</tr>
<tr>
<td>Straatnaam:</td>
<td>
<input type="text" id="street" readonly="readonly" />
<select id="streets" style="display:none" onchange="_lookup.edit();">
<!-- At least one option is required for XHTML -->
<option></option>
</select>
<a id="unsure" href="#" style="display:none" title="Klik om aan te geven dat de getoonde straat onjuist is.">Onjuist?</a>
<a id="fix" href="#" style="display:none" title="Klik om zelf de gegevens te corrigeren.">Bedankt! Ook corrigeren?</a>
<a id="add" href="#" style="display:none" title="Klik om zelf een straat op deze postcode toe te voegen.">Toevoegen?</a>
<a id="addanother" href="#" style="display:none" title="Klik om zelf nog een extra straat aan deze postcode toe te voegen.">Extra straat?</a>
</td>
</tr>
<tr>
<td class="main">Woonplaats:</td>
<td class="main"><input type="text" id="city" readonly="readonly" /></td>
</tr>
</table>
</form>
<p>
<img id="map" style="display:none; border: none;" src="" alt=""/>
</p>
lookup.js
Code (php)
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
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
/*
See http://kvdb.net/projects/6pp on how to use this script.
*/
// Namespacing the code so the examples don't clash.
var net = {};
net.kvdb = {};
net.kvdb.Lookup = {};
var _lookup = net.kvdb.Lookup;
_lookup.fromPostcode = function(e) {
// Only request a lookup if the user pressed enter from the postcode field.
// Otherwise, wait for street number to be entered.
var keynum;
if(window.event) // IE
{
keynum = window.event.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
var KEY_TAB = 9;
var KEY_RETURN = 13;
if (keynum == KEY_RETURN || keynum == KEY_TAB)
{
this.lookup();
}
}
_lookup.lookup = function() {
// Perform an address lookup based on postcode and -if entered- street number.
// Clear the street / city result fields.
this.resetResults();
// Enable spinner, so the user knows the lookup is being performed.
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = '';
}
var streetnumber = document.getElementById('streetnumber').value;
var postcode = document.getElementById('postcode').value;
this.loadScript('http://6pp.kvdb.net/services/lookup?postcode=' + escape(postcode) + '&streetnumber=' + escape(streetnumber) + '&tg_format=json&jsonp=_lookup.showLookupResults');
}
_lookup.edit = function() {
// Return street information with postcode + street number to improve the 6pp database.
var postcode = document.getElementById('postcode').value;
var streets = document.getElementById('streets');
// But only if the user chose a street instead of the default text.
if (streets.selectedIndex == 0) { return; }
var straatnaam = streets.options[streets.selectedIndex].text;
var city = document.getElementById('city').value;
var streetnumber = document.getElementById('streetnumber').value;
// After the submit, perform lookup again to get the new data.
this.loadScript('http://6pp.kvdb.net/services/feedback?postcode=' + escape(postcode) + '&street=' + escape(straatnaam) + '&city=' + escape(city) + '&streetnumber=' + escape(streetnumber) + '&tg_format=json&jsonp=lookup');
}
_lookup.loadScript = function(url) {
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
_lookup.resetResults = function() {
// Empty single street result field
document.getElementById('street').value = "";
// Empty multiple streets result listbox
document.getElementById('streets').options.lenght = 0;
// Empty city result field
document.getElementById('city').value = "";
// Hide the map
document.getElementById('map').style.display = "none";
// Hide the unsure link
document.getElementById('unsure').style.display = "none";
// Hide the fix link
document.getElementById('fix').style.display = "none";
// Hide the add link
document.getElementById('add').style.display = "none";
// Hide the addanother link
document.getElementById('addanother').style.display = "none";
}
_lookup.showSingleAddress = function() {
// Hide the multiple address elements
var streets = document.getElementById('streets');
streets.style.display = 'none';
// Show the single address elements
var street = document.getElementById('street');
street.style.display = '';
}
_lookup.showManyAddresses = function() {
// Hide the single address elements
var street = document.getElementById('street');
street.style.display = 'none';
// Show the multiple address elements
var streets = document.getElementById('streets');
streets.style.display = '';
}
_lookup.showLookupResults = function(json) {
// Disable spinner
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = 'none';
}
if (json.result == 'Invalid input') {
document.getElementById('city').value = "Ongeldige invoer";
return;
}
var count = json.result.length;
if (count == 0) {
// No results found
} else {
// Always display the city
document.getElementById('city').value = json.result[0].city;
if (count == 1) {
// There's exactly one address available.
this.showSingleAddress();
var street = json.result[0].street;
var subtitle = json.result[0].subtitle;
var street_id = json.result[0].street_id;
var postcode_id = json.result[0].postcode_id;
var postcode = document.getElementById('postcode').value;
var chars = postcode.substr(4).replace(/^\s+/,'').replace(/\s+$/,'').toUpperCase();
// On 6PP lookups, allow user to add unknown streets.
if (!street && postcode.length >= 6) {
street = "Straat onbekend";
var add = document.getElementById('add');
add.href = "http://6pp.kvdb.net/wiki/add?street=&postcode_id=" + postcode_id + "&chars=" + chars;
add.style.display = "inline";
}
document.getElementById('street').value = street;
document.getElementById('street').title = subtitle;
if (street_id) {
// Allow user to flag the street as possibly invalid (unsure).
var unsure = document.getElementById('unsure');
unsure.onclick = new Function("_lookup.unsureStreet(" + street_id +"); return false;");
unsure.style.display = "inline";
// Allow user to add an extra street in addition to the one(s) seen.
var addanother = document.getElementById('addanother');
addanother.href = "http://6pp.kvdb.net/wiki/add?street=&postcode_id=" + postcode_id + "&chars=" + chars;
addanother.style.display = "inline";
}
} else {
// There are more known addresses for this postcode (+ street number). Show all options.
this.showManyAddresses();
var streets = document.getElementById('streets');
streets.options[0] = new Option("Maak uw keuze uit " + count + " straten.", "Placeholder");
for (var i = 0; i < count; i++)
{
var street = json.result[i].street;
streets.options[i+1] = new Option(street, i);
}
}
// Show geo-coordinates on a map, if available.
var lat = json.result[0].geo_lat;
var lng = json.result[0].geo_long;
if (lat && lng) {
var map = document.getElementById('map');
// Map was not visible, show it now.
map.style.display = "block";
map.src = 'examples/kaart.php?size=small&lat=' + lat + '&long=' + lng;
}
}
}
_lookup.unsureStreet = function(street_id) {
// User chose to flag this street as unsure.
// Enable spinner, so the user knows the action is being performed.
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = '';
}
this.loadScript('http://6pp.kvdb.net/services/setstreet?id=' + street_id + '&unsure=True' + '&tg_format=json&jsonp=_lookup.unsureResults');
// The unsure link is no longer required.
var unsure = document.getElementById('unsure');
unsure.style.display = "none";
}
_lookup.unsureResults = function(json) {
// The street has been flagged unsure.
// Disable spinner
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = 'none';
}
// Hope the user will fix the spotted error too.
var fix = document.getElementById('fix');
fix.href = "http://6pp.kvdb.net/wiki/edit?street_id=" + json.result.id;
fix.style.display = "inline";
}
See http://kvdb.net/projects/6pp on how to use this script.
*/
// Namespacing the code so the examples don't clash.
var net = {};
net.kvdb = {};
net.kvdb.Lookup = {};
var _lookup = net.kvdb.Lookup;
_lookup.fromPostcode = function(e) {
// Only request a lookup if the user pressed enter from the postcode field.
// Otherwise, wait for street number to be entered.
var keynum;
if(window.event) // IE
{
keynum = window.event.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
var KEY_TAB = 9;
var KEY_RETURN = 13;
if (keynum == KEY_RETURN || keynum == KEY_TAB)
{
this.lookup();
}
}
_lookup.lookup = function() {
// Perform an address lookup based on postcode and -if entered- street number.
// Clear the street / city result fields.
this.resetResults();
// Enable spinner, so the user knows the lookup is being performed.
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = '';
}
var streetnumber = document.getElementById('streetnumber').value;
var postcode = document.getElementById('postcode').value;
this.loadScript('http://6pp.kvdb.net/services/lookup?postcode=' + escape(postcode) + '&streetnumber=' + escape(streetnumber) + '&tg_format=json&jsonp=_lookup.showLookupResults');
}
_lookup.edit = function() {
// Return street information with postcode + street number to improve the 6pp database.
var postcode = document.getElementById('postcode').value;
var streets = document.getElementById('streets');
// But only if the user chose a street instead of the default text.
if (streets.selectedIndex == 0) { return; }
var straatnaam = streets.options[streets.selectedIndex].text;
var city = document.getElementById('city').value;
var streetnumber = document.getElementById('streetnumber').value;
// After the submit, perform lookup again to get the new data.
this.loadScript('http://6pp.kvdb.net/services/feedback?postcode=' + escape(postcode) + '&street=' + escape(straatnaam) + '&city=' + escape(city) + '&streetnumber=' + escape(streetnumber) + '&tg_format=json&jsonp=lookup');
}
_lookup.loadScript = function(url) {
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
_lookup.resetResults = function() {
// Empty single street result field
document.getElementById('street').value = "";
// Empty multiple streets result listbox
document.getElementById('streets').options.lenght = 0;
// Empty city result field
document.getElementById('city').value = "";
// Hide the map
document.getElementById('map').style.display = "none";
// Hide the unsure link
document.getElementById('unsure').style.display = "none";
// Hide the fix link
document.getElementById('fix').style.display = "none";
// Hide the add link
document.getElementById('add').style.display = "none";
// Hide the addanother link
document.getElementById('addanother').style.display = "none";
}
_lookup.showSingleAddress = function() {
// Hide the multiple address elements
var streets = document.getElementById('streets');
streets.style.display = 'none';
// Show the single address elements
var street = document.getElementById('street');
street.style.display = '';
}
_lookup.showManyAddresses = function() {
// Hide the single address elements
var street = document.getElementById('street');
street.style.display = 'none';
// Show the multiple address elements
var streets = document.getElementById('streets');
streets.style.display = '';
}
_lookup.showLookupResults = function(json) {
// Disable spinner
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = 'none';
}
if (json.result == 'Invalid input') {
document.getElementById('city').value = "Ongeldige invoer";
return;
}
var count = json.result.length;
if (count == 0) {
// No results found
} else {
// Always display the city
document.getElementById('city').value = json.result[0].city;
if (count == 1) {
// There's exactly one address available.
this.showSingleAddress();
var street = json.result[0].street;
var subtitle = json.result[0].subtitle;
var street_id = json.result[0].street_id;
var postcode_id = json.result[0].postcode_id;
var postcode = document.getElementById('postcode').value;
var chars = postcode.substr(4).replace(/^\s+/,'').replace(/\s+$/,'').toUpperCase();
// On 6PP lookups, allow user to add unknown streets.
if (!street && postcode.length >= 6) {
street = "Straat onbekend";
var add = document.getElementById('add');
add.href = "http://6pp.kvdb.net/wiki/add?street=&postcode_id=" + postcode_id + "&chars=" + chars;
add.style.display = "inline";
}
document.getElementById('street').value = street;
document.getElementById('street').title = subtitle;
if (street_id) {
// Allow user to flag the street as possibly invalid (unsure).
var unsure = document.getElementById('unsure');
unsure.onclick = new Function("_lookup.unsureStreet(" + street_id +"); return false;");
unsure.style.display = "inline";
// Allow user to add an extra street in addition to the one(s) seen.
var addanother = document.getElementById('addanother');
addanother.href = "http://6pp.kvdb.net/wiki/add?street=&postcode_id=" + postcode_id + "&chars=" + chars;
addanother.style.display = "inline";
}
} else {
// There are more known addresses for this postcode (+ street number). Show all options.
this.showManyAddresses();
var streets = document.getElementById('streets');
streets.options[0] = new Option("Maak uw keuze uit " + count + " straten.", "Placeholder");
for (var i = 0; i < count; i++)
{
var street = json.result[i].street;
streets.options[i+1] = new Option(street, i);
}
}
// Show geo-coordinates on a map, if available.
var lat = json.result[0].geo_lat;
var lng = json.result[0].geo_long;
if (lat && lng) {
var map = document.getElementById('map');
// Map was not visible, show it now.
map.style.display = "block";
map.src = 'examples/kaart.php?size=small&lat=' + lat + '&long=' + lng;
}
}
}
_lookup.unsureStreet = function(street_id) {
// User chose to flag this street as unsure.
// Enable spinner, so the user knows the action is being performed.
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = '';
}
this.loadScript('http://6pp.kvdb.net/services/setstreet?id=' + street_id + '&unsure=True' + '&tg_format=json&jsonp=_lookup.unsureResults');
// The unsure link is no longer required.
var unsure = document.getElementById('unsure');
unsure.style.display = "none";
}
_lookup.unsureResults = function(json) {
// The street has been flagged unsure.
// Disable spinner
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = 'none';
}
// Hope the user will fix the spotted error too.
var fix = document.getElementById('fix');
fix.href = "http://6pp.kvdb.net/wiki/edit?street_id=" + json.result.id;
fix.style.display = "inline";
}
Kaart.php
Code (php)
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
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
<?php
// Donated to the 6PP project by Sjoerd Cranen <outis - frietopia.nl>
// Define lat/long of this Dutch map
$minb = 50.76;
$maxb = 53.516666;
$minl = 3.30;
$maxl = 7.21;
function sqr($x) { return $x*$x; }
// Show the big map by default. Append &size=small for the small map.
$size=$_REQUEST['size'];
if ($size == 'small') {
$image = imagecreatefromgif("kaart-nl-small.gif");
} else {
$image = imagecreatefromgif("kaart-nl.gif");
}
$w = imagesx($image);
$h = imagesy($image);
for ($i = 0; $i < 256; $i++)
{
$red[$i] = imagecolorallocate($image, $i, 0, 0);
}
$lat=$_REQUEST['lat'];
$lon=$_REQUEST['long'];
$t=1;
$y = $h-($lat-$minb)/($maxb-$minb)*$h;
$x = ($lon-$minl)/($maxl-$minl)*$w;
$d = floor(log($t, 1.8)) + 2;
$c = ($t - pow(1.8, $d-2))/pow(1.8, $d-2) * 255;
imagefilledellipse($image, $x, $y, $d, $d, $red[$c]);
header('Content-type: image/png');
imagepng($image);
?>
// Donated to the 6PP project by Sjoerd Cranen <outis - frietopia.nl>
// Define lat/long of this Dutch map
$minb = 50.76;
$maxb = 53.516666;
$minl = 3.30;
$maxl = 7.21;
function sqr($x) { return $x*$x; }
// Show the big map by default. Append &size=small for the small map.
$size=$_REQUEST['size'];
if ($size == 'small') {
$image = imagecreatefromgif("kaart-nl-small.gif");
} else {
$image = imagecreatefromgif("kaart-nl.gif");
}
$w = imagesx($image);
$h = imagesy($image);
for ($i = 0; $i < 256; $i++)
{
$red[$i] = imagecolorallocate($image, $i, 0, 0);
}
$lat=$_REQUEST['lat'];
$lon=$_REQUEST['long'];
$t=1;
$y = $h-($lat-$minb)/($maxb-$minb)*$h;
$x = ($lon-$minl)/($maxl-$minl)*$w;
$d = floor(log($t, 1.8)) + 2;
$c = ($t - pow(1.8, $d-2))/pow(1.8, $d-2) * 255;
imagefilledellipse($image, $x, $y, $d, $d, $red[$c]);
header('Content-type: image/png');
imagepng($image);
?>