@opensystemslab/map 1.0.0-alpha.5 → 1.0.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -8
- package/dist/component-lib.es.js +4 -3
- package/dist/component-lib.umd.js +168 -147
- package/dist/{index-B7jZERBa.mjs → index-9wQ1_2xo.mjs} +22327 -19804
- package/dist/{index.es-Cki5MeFv.mjs → index.es-DSLIljlp.mjs} +494 -494
- package/dist/index.html +124 -110
- package/dist/{purify.es-BGDLgQxM.mjs → purify.es-DHbHSKL1.mjs} +244 -235
- package/package.json +16 -16
- package/types/components/geocode-autocomplete/index.d.ts +49 -0
- package/types/components/geocode-autocomplete/main.test.d.ts +6 -0
- package/types/index.d.ts +1 -0
- package/types/lib/ordnanceSurvey.d.ts +1 -1
package/dist/index.html
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>OS Web Components Sandbox</title>
|
|
7
|
+
<script type="module" src="component-lib.es.js"></script>
|
|
8
|
+
<!-- OS vector tile source specifies fonts in .pbf format, which OpenLayers can't load, so make them available directly -->
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
11
|
+
<link
|
|
12
|
+
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
|
|
13
|
+
rel="stylesheet"
|
|
14
|
+
/>
|
|
15
|
+
<!-- Examples of available style options for postcode-search & address-autocomplete -->
|
|
16
|
+
<!-- <style>
|
|
16
17
|
address-autocomplete {
|
|
17
18
|
--autocomplete__label__font-size: 25px;
|
|
18
19
|
--autocomplete__input__padding: 6px 40px 7px 12px;
|
|
@@ -37,33 +38,37 @@
|
|
|
37
38
|
--postcode__input__height: 60px;
|
|
38
39
|
}
|
|
39
40
|
</style> -->
|
|
40
|
-
</head>
|
|
41
|
+
</head>
|
|
41
42
|
|
|
42
|
-
<body style="font-family:Inter,Helvetica,sans-serif
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
43
|
+
<body style="font-family: Inter, Helvetica, sans-serif">
|
|
44
|
+
<div style="display: flex; flex-direction: column">
|
|
45
|
+
<h1 style="color: red; font-size: 16px">
|
|
46
|
+
*** This is a testing sandbox - these components are unaware of each
|
|
47
|
+
other!***
|
|
48
|
+
</h1>
|
|
49
|
+
<div style="margin-bottom: 1em">
|
|
50
|
+
<my-map
|
|
51
|
+
id="example-map"
|
|
52
|
+
ariaLabelOlFixedOverlay="Interactive example map"
|
|
53
|
+
zoom="20"
|
|
54
|
+
maxZoom="23"
|
|
55
|
+
drawMode
|
|
56
|
+
drawMany
|
|
57
|
+
drawType="Point"
|
|
58
|
+
basemap="MapboxSatellite"
|
|
59
|
+
showCentreMarker
|
|
60
|
+
osCopyright="© Crown copyright and database rights 2024 OS (0)100024857"
|
|
61
|
+
osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
<div style="margin-bottom: 1em">
|
|
65
|
+
<postcode-search
|
|
66
|
+
hintText="Optional hint text shows up here"
|
|
67
|
+
id="example-postcode"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
<div style="margin-bottom: 1em; background-color: white">
|
|
71
|
+
<!--
|
|
67
72
|
Examples (as of March 2022):
|
|
68
73
|
SE5 OHU (Southwark): default/"standard" postcode example, fetches 65 LPI addresses
|
|
69
74
|
SE19 1NT (Lambeth): 56 DPA addresses -> 128 LPI addresses (87 "approved"), now requires paginated fetch
|
|
@@ -73,86 +78,95 @@
|
|
|
73
78
|
Example with default value (used for planx "change" & "back" button behavior):
|
|
74
79
|
<address-autocomplete postcode="SE5 0HU" id="example-autocomplete" initialAddress="75, COBOURG ROAD, LONDON" />
|
|
75
80
|
-->
|
|
76
|
-
|
|
81
|
+
<address-autocomplete
|
|
82
|
+
postcode="SE5 0HU"
|
|
83
|
+
id="example-autocomplete"
|
|
84
|
+
arrowStyle="light"
|
|
85
|
+
labelStyle="static"
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
<div style="margin-bottom: 1em; background-color: white">
|
|
89
|
+
<geocode-autocomplete
|
|
90
|
+
id="example-geocode-autocomplete"
|
|
91
|
+
arrowStyle="light"
|
|
92
|
+
labelStyle="static"
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
77
95
|
</div>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"coordinates": [
|
|
87
|
-
[
|
|
88
|
-
[
|
|
89
|
-
-0.128307852848053,
|
|
90
|
-
51.50748361634746
|
|
91
|
-
],
|
|
92
|
-
[
|
|
93
|
-
-0.1274388171272278,
|
|
94
|
-
51.50773069282454
|
|
95
|
-
],
|
|
96
|
-
[
|
|
97
|
-
-0.12710085879135133,
|
|
98
|
-
51.507243216327
|
|
99
|
-
],
|
|
96
|
+
<script>
|
|
97
|
+
// --- MAP --- //
|
|
98
|
+
const map = document.querySelector("my-map");
|
|
99
|
+
map.clipGeojsonData = {
|
|
100
|
+
type: "Feature",
|
|
101
|
+
geometry: {
|
|
102
|
+
type: "Polygon",
|
|
103
|
+
coordinates: [
|
|
100
104
|
[
|
|
101
|
-
-0.
|
|
102
|
-
51.
|
|
105
|
+
[-0.128307852848053, 51.50748361634746],
|
|
106
|
+
[-0.1274388171272278, 51.50773069282454],
|
|
107
|
+
[-0.12710085879135133, 51.507243216327],
|
|
108
|
+
[-0.12802890311050416, 51.50705957656797],
|
|
109
|
+
[-0.128307852848053, 51.50748361634746],
|
|
103
110
|
],
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
]
|
|
108
|
-
]
|
|
109
|
-
]
|
|
110
|
-
},
|
|
111
|
-
};
|
|
111
|
+
],
|
|
112
|
+
},
|
|
113
|
+
};
|
|
112
114
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
115
|
+
map.addEventListener("ready", (event) => {
|
|
116
|
+
console.log("map ready");
|
|
117
|
+
});
|
|
116
118
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
// applicable when drawMode is enabled
|
|
120
|
+
map.addEventListener("geojsonChange", ({ detail: geojson }) => {
|
|
121
|
+
console.debug({ geojson });
|
|
122
|
+
});
|
|
121
123
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
124
|
+
// applicable when showFeaturesAtPoint is enabled
|
|
125
|
+
map.addEventListener("featuresAreaChange", ({ detail: featuresArea }) => {
|
|
126
|
+
console.debug({ featuresArea });
|
|
127
|
+
});
|
|
128
|
+
map.addEventListener(
|
|
129
|
+
"featuresGeojsonChange",
|
|
130
|
+
({ detail: featuresGeojson }) => {
|
|
131
|
+
console.debug({ featuresGeojson });
|
|
132
|
+
},
|
|
133
|
+
);
|
|
129
134
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
135
|
+
// applicable when geojsonData is provided
|
|
136
|
+
map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
|
|
137
|
+
console.debug({ geojsonDataArea });
|
|
138
|
+
});
|
|
134
139
|
|
|
135
|
-
|
|
136
|
-
|
|
140
|
+
// --- POSTCODE SEARCH --- //
|
|
141
|
+
const search = document.querySelector("postcode-search");
|
|
137
142
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
143
|
+
search.addEventListener("postcodeChange", ({ detail }) => {
|
|
144
|
+
console.debug({ detail });
|
|
145
|
+
});
|
|
141
146
|
|
|
142
|
-
|
|
143
|
-
|
|
147
|
+
// --- ADDRESS AUTOCOMPLETE --- //
|
|
148
|
+
const autocomplete = document.querySelector("address-autocomplete");
|
|
144
149
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
150
|
+
autocomplete.addEventListener("ready", ({ detail: data }) => {
|
|
151
|
+
console.log("autocomplete ready", { data });
|
|
152
|
+
});
|
|
148
153
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
154
|
+
autocomplete.addEventListener(
|
|
155
|
+
"addressSelection",
|
|
156
|
+
({ detail: address }) => {
|
|
157
|
+
console.debug({ detail: address });
|
|
158
|
+
},
|
|
159
|
+
);
|
|
160
|
+
|
|
161
|
+
// -- GEOCODE AUTOCOMPLETE -- //
|
|
162
|
+
const geocodeAutocomplete = document.querySelector('geocode-autocomplete')
|
|
157
163
|
|
|
158
|
-
|
|
164
|
+
geocodeAutocomplete.addEventListener(
|
|
165
|
+
"addressSelection",
|
|
166
|
+
({ detail: address }) => {
|
|
167
|
+
console.debug({ detail: address });
|
|
168
|
+
},
|
|
169
|
+
);
|
|
170
|
+
</script>
|
|
171
|
+
</body>
|
|
172
|
+
</html>
|