-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (144 loc) · 5.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OS Web Components Sandbox</title>
<script type="module" src="./src/index.ts"></script>
<!-- OS vector tile source specifies fonts in .pbf format, which OpenLayers can't load, so make them available directly -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
rel="stylesheet" />
<!-- Examples of available style options for postcode-search & address-autocomplete -->
<!-- <style>
address-autocomplete {
--autocomplete__label__font-size: 25px;
--autocomplete__input__padding: 6px 40px 7px 12px;
--autocomplete__input__font-size: 15px;
--autocomplete__input__height: 50px;
--autocomplete__dropdown-arrow-down__top: 16px;
--autocomplete__dropdown-arrow-down__z-index: 2;
--autocomplete__option__font-size: 15px;
--autocomplete__option__padding: 6px 12px 7px 12px;
--autocomplete__menu__max-height: 336px;
--autocomplete__option__border-bottom: solid 1px grey;
--autocomplete__option__hover-border-color: rgb(0, 99, 96);
--autocomplete__option__hover-background-color: rgb(0, 99, 96);
--autocomplete__font-family: "Courier New";
}
postcode-search {
--postcode__font-family: "Times New Roman";
--postcode__font-size: 18px;
--postcode__input__font-size: 24px;
--postcode__input__padding: 30px 10px;
--postcode__input__height: 60px;
}
</style> -->
</head>
<body style="font-family:Inter,Helvetica,sans-serif;">
<div style="display:flex;flex-direction:column;">
<h1 style="color:red;font-size:16px;">
*** This is a testing sandbox - these components are unaware of each other!***
</h1>
<div style="margin-bottom:1em">
<my-map
id="example-map"
ariaLabelOlFixedOverlay="Interactive example map"
zoom="20"
maxZoom="23"
drawMode
drawMany
drawType="Point"
basemap="MapboxSatellite"
showCentreMarker
osCopyright="© Crown copyright and database rights 2024 OS (0)100024857"
osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
/>
</div>
<div style="margin-bottom:1em">
<postcode-search hintText="Optional hint text shows up here" id="example-postcode" />
</div>
<div style="margin-bottom:1em; background-color: white;">
<!--
Examples (as of March 2022):
SE5 OHU (Southwark): default/"standard" postcode example, fetches 65 LPI addresses
SE19 1NT (Lambeth): 56 DPA addresses -> 128 LPI addresses (87 "approved"), now requires paginated fetch
HP11 1BR (Bucks): 0 addresses, shows "No addresses found in postcode" error message
HP11 1BC (Bucks): valid postcode according to npm package but not OS, shows OS error message
Example with default value (used for planx "change" & "back" button behavior):
<address-autocomplete postcode="SE5 0HU" id="example-autocomplete" initialAddress="75, COBOURG ROAD, LONDON" />
-->
<address-autocomplete postcode="SE5 0HU" id="example-autocomplete" arrowStyle="light" labelStyle="static" />
</div>
</div>
<script>
// --- MAP --- //
const map = document.querySelector("my-map");
map.clipGeojsonData = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-0.128307852848053,
51.50748361634746
],
[
-0.1274388171272278,
51.50773069282454
],
[
-0.12710085879135133,
51.507243216327
],
[
-0.12802890311050416,
51.50705957656797
],
[
-0.128307852848053,
51.50748361634746
]
]
]
},
};
map.addEventListener("ready", (event) => {
console.log("map ready");
});
// applicable when drawMode is enabled
map.addEventListener("geojsonChange", ({ detail: geojson }) => {
console.debug({ geojson });
});
// applicable when showFeaturesAtPoint is enabled
map.addEventListener("featuresAreaChange", ({ detail: featuresArea }) => {
console.debug({ featuresArea });
});
map.addEventListener("featuresGeojsonChange", ({ detail: featuresGeojson }) => {
console.debug({ featuresGeojson });
});
// applicable when geojsonData is provided
map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
console.debug({ geojsonDataArea });
});
// --- POSTCODE SEARCH --- //
const search = document.querySelector("postcode-search");
search.addEventListener("postcodeChange", ({ detail }) => {
console.debug({ detail });
});
// --- ADDRESS AUTOCOMPLETE --- //
const autocomplete = document.querySelector("address-autocomplete");
autocomplete.addEventListener("ready", ({ detail: data }) => {
console.log("autocomplete ready", { data });
});
autocomplete.addEventListener(
"addressSelection",
({ detail: address }) => {
console.debug({ detail: address });
}
);
</script>
</body>
</html>