@opensystemslab/map 1.0.0-alpha.5 → 1.0.0-alpha.6
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 +9 -6
- package/dist/component-lib.es.js +1 -1
- package/dist/component-lib.umd.js +137 -138
- package/dist/{index-B7jZERBa.mjs → index-D01mRj0Z.mjs} +16916 -14570
- package/dist/{index.es-Cki5MeFv.mjs → index.es-DVcWaq6t.mjs} +494 -494
- package/dist/index.html +108 -111
- package/dist/{purify.es-BGDLgQxM.mjs → purify.es-DHbHSKL1.mjs} +244 -235
- package/package.json +13 -13
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,78 @@
|
|
|
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>
|
|
77
88
|
</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
|
-
],
|
|
89
|
+
<script>
|
|
90
|
+
// --- MAP --- //
|
|
91
|
+
const map = document.querySelector("my-map");
|
|
92
|
+
map.clipGeojsonData = {
|
|
93
|
+
type: "Feature",
|
|
94
|
+
geometry: {
|
|
95
|
+
type: "Polygon",
|
|
96
|
+
coordinates: [
|
|
100
97
|
[
|
|
101
|
-
-0.
|
|
102
|
-
51.
|
|
98
|
+
[-0.128307852848053, 51.50748361634746],
|
|
99
|
+
[-0.1274388171272278, 51.50773069282454],
|
|
100
|
+
[-0.12710085879135133, 51.507243216327],
|
|
101
|
+
[-0.12802890311050416, 51.50705957656797],
|
|
102
|
+
[-0.128307852848053, 51.50748361634746],
|
|
103
103
|
],
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
]
|
|
108
|
-
]
|
|
109
|
-
]
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
map.addEventListener("ready", (event) => {
|
|
114
|
-
console.log("map ready");
|
|
115
|
-
});
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
};
|
|
116
107
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
});
|
|
108
|
+
map.addEventListener("ready", (event) => {
|
|
109
|
+
console.log("map ready");
|
|
110
|
+
});
|
|
121
111
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
map.addEventListener("featuresGeojsonChange", ({ detail: featuresGeojson }) => {
|
|
127
|
-
console.debug({ featuresGeojson });
|
|
128
|
-
});
|
|
112
|
+
// applicable when drawMode is enabled
|
|
113
|
+
map.addEventListener("geojsonChange", ({ detail: geojson }) => {
|
|
114
|
+
console.debug({ geojson });
|
|
115
|
+
});
|
|
129
116
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
117
|
+
// applicable when showFeaturesAtPoint is enabled
|
|
118
|
+
map.addEventListener("featuresAreaChange", ({ detail: featuresArea }) => {
|
|
119
|
+
console.debug({ featuresArea });
|
|
120
|
+
});
|
|
121
|
+
map.addEventListener(
|
|
122
|
+
"featuresGeojsonChange",
|
|
123
|
+
({ detail: featuresGeojson }) => {
|
|
124
|
+
console.debug({ featuresGeojson });
|
|
125
|
+
},
|
|
126
|
+
);
|
|
134
127
|
|
|
135
|
-
|
|
136
|
-
|
|
128
|
+
// applicable when geojsonData is provided
|
|
129
|
+
map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
|
|
130
|
+
console.debug({ geojsonDataArea });
|
|
131
|
+
});
|
|
137
132
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
});
|
|
133
|
+
// --- POSTCODE SEARCH --- //
|
|
134
|
+
const search = document.querySelector("postcode-search");
|
|
141
135
|
|
|
142
|
-
|
|
143
|
-
|
|
136
|
+
search.addEventListener("postcodeChange", ({ detail }) => {
|
|
137
|
+
console.debug({ detail });
|
|
138
|
+
});
|
|
144
139
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
});
|
|
140
|
+
// --- ADDRESS AUTOCOMPLETE --- //
|
|
141
|
+
const autocomplete = document.querySelector("address-autocomplete");
|
|
148
142
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
console.debug({ detail: address });
|
|
153
|
-
}
|
|
154
|
-
);
|
|
155
|
-
</script>
|
|
156
|
-
</body>
|
|
143
|
+
autocomplete.addEventListener("ready", ({ detail: data }) => {
|
|
144
|
+
console.log("autocomplete ready", { data });
|
|
145
|
+
});
|
|
157
146
|
|
|
158
|
-
|
|
147
|
+
autocomplete.addEventListener(
|
|
148
|
+
"addressSelection",
|
|
149
|
+
({ detail: address }) => {
|
|
150
|
+
console.debug({ detail: address });
|
|
151
|
+
},
|
|
152
|
+
);
|
|
153
|
+
</script>
|
|
154
|
+
</body>
|
|
155
|
+
</html>
|