@opensystemslab/map 1.0.0-alpha.14 → 1.0.0-alpha.2

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.
Files changed (29) hide show
  1. package/README.md +11 -29
  2. package/dist/component-lib.es.js +3 -4
  3. package/dist/component-lib.umd.js +271 -271
  4. package/dist/{html2canvas.esm-dgT_1dIT.mjs → html2canvas.esm-d2sM-0Wm.mjs} +78 -79
  5. package/dist/index-B9kc5fOE.mjs +53131 -0
  6. package/dist/index.es-CXEzoRbj.mjs +5614 -0
  7. package/dist/index.html +109 -134
  8. package/dist/purify.es-B7BPtUgm.mjs +471 -0
  9. package/dist/style.css +1 -0
  10. package/package.json +34 -33
  11. package/types/components/address-autocomplete/index.d.ts +1 -1
  12. package/types/components/address-autocomplete/main.test.d.ts +5 -0
  13. package/types/components/my-map/drawing.d.ts +2 -8
  14. package/types/components/my-map/index.d.ts +13 -13
  15. package/types/components/my-map/layers.d.ts +1 -3
  16. package/types/components/my-map/layers.test.d.ts +9 -0
  17. package/types/components/my-map/main.test.d.ts +5 -0
  18. package/types/components/my-map/os-features.d.ts +2 -8
  19. package/types/components/my-map/snapping.d.ts +3 -12
  20. package/types/components/postcode-search/main.test.d.ts +5 -0
  21. package/types/index.d.ts +0 -1
  22. package/types/lib/ordnanceSurvey.d.ts +1 -1
  23. package/types/test-utils.d.ts +0 -1
  24. package/dist/index-iDaxXOto.mjs +0 -61036
  25. package/dist/index.es-BBxfP7s4.mjs +0 -6692
  26. package/dist/map.css +0 -1
  27. package/dist/purify.es-_9WAe1aK.mjs +0 -830
  28. package/types/components/geocode-autocomplete/index.d.ts +0 -46
  29. package/types/components/geocode-autocomplete/main.test.d.ts +0 -1
package/dist/index.html CHANGED
@@ -1,19 +1,18 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
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>
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>OS Web Components Sandbox</title>
8
+ <script type="module" src="component-lib.es.js"></script>
9
+ <!-- OS vector tile source specifies fonts in .pbf format, which OpenLayers can't load, so make them available directly -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
13
+ rel="stylesheet" />
14
+ <!-- Examples of available style options for postcode-search & address-autocomplete -->
15
+ <!-- <style>
17
16
  address-autocomplete {
18
17
  --autocomplete__label__font-size: 25px;
19
18
  --autocomplete__input__padding: 6px 40px 7px 12px;
@@ -37,46 +36,33 @@
37
36
  --postcode__input__padding: 30px 10px;
38
37
  --postcode__input__height: 60px;
39
38
  }
40
-
41
- my-map {
42
- --autocomplete__font-family: "Courier New";
43
- --autocomplete__error__font-weight: 900;
44
- --autocomplete__input__max-width: 500px;
45
- --govuk-error-colour: hotpink;
46
- }
47
39
  </style> -->
48
- </head>
40
+ </head>
49
41
 
50
- <body style="font-family: Inter, Helvetica, sans-serif">
51
- <div style="display: flex; flex-direction: column">
52
- <h1 style="color: red; font-size: 16px">
53
- *** This is a testing sandbox - these components are unaware of each
54
- other!***
55
- </h1>
56
- <div style="margin-bottom: 1em">
57
- <my-map
58
- id="example-map"
59
- ariaLabelOlFixedOverlay="Interactive example map"
60
- zoom="20"
61
- maxZoom="23"
62
- drawMode
63
- drawMany
64
- drawType="Point"
65
- basemap="OSVectorTile"
66
- showOSSearch
67
- showCentreMarker
68
- osCopyright="© Crown copyright and database rights 2024 OS AC0000812160"
69
- osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
70
- />
71
- </div>
72
- <div style="margin-bottom: 1em">
73
- <postcode-search
74
- hintText="Optional hint text shows up here"
75
- id="example-postcode"
76
- />
77
- </div>
78
- <div style="margin-bottom: 1em; background-color: white">
79
- <!--
42
+ <body style="font-family:Inter,Helvetica,sans-serif;">
43
+ <div style="display:flex;flex-direction:column;">
44
+ <h1 style="color:red;font-size:16px;">
45
+ *** This is a testing sandbox - these components are unaware of each other!***
46
+ </h1>
47
+ <div style="margin-bottom:1em">
48
+ <my-map
49
+ id="example-map"
50
+ ariaLabelOlFixedOverlay="Interactive example map"
51
+ zoom="20"
52
+ maxZoom="23"
53
+ drawMode
54
+ drawMany
55
+ basemap="MapboxSatellite"
56
+ showCentreMarker
57
+ osCopyright="© Crown copyright and database rights 2024 OS (0)100024857"
58
+ osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
59
+ />
60
+ </div>
61
+ <div style="margin-bottom:1em">
62
+ <postcode-search hintText="Optional hint text shows up here" id="example-postcode" />
63
+ </div>
64
+ <div style="margin-bottom:1em; background-color: white;">
65
+ <!--
80
66
  Examples (as of March 2022):
81
67
  SE5 OHU (Southwark): default/"standard" postcode example, fetches 65 LPI addresses
82
68
  SE19 1NT (Lambeth): 56 DPA addresses -> 128 LPI addresses (87 "approved"), now requires paginated fetch
@@ -86,97 +72,86 @@
86
72
  Example with default value (used for planx "change" & "back" button behavior):
87
73
  <address-autocomplete postcode="SE5 0HU" id="example-autocomplete" initialAddress="75, COBOURG ROAD, LONDON" />
88
74
  -->
89
- <address-autocomplete
90
- postcode="NW5 2JT"
91
- id="example-autocomplete"
92
- arrowStyle="light"
93
- labelStyle="static"
94
- osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
95
- />
96
- </div>
97
- <div style="margin-bottom: 1em; background-color: white">
98
- <geocode-autocomplete
99
- id="example-geocode-autocomplete"
100
- arrowStyle="light"
101
- labelStyle="static"
102
- osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
103
- />
104
- </div>
75
+ <address-autocomplete postcode="SE5 0HU" id="example-autocomplete" arrowStyle="light" labelStyle="static" />
105
76
  </div>
106
- <script>
107
- // --- MAP --- //
108
- const map = document.querySelector("my-map");
109
- map.clipGeojsonData = {
110
- type: "Feature",
111
- geometry: {
112
- type: "Polygon",
113
- coordinates: [
77
+ </div>
78
+ <script>
79
+ // --- MAP --- //
80
+ const map = document.querySelector("my-map");
81
+ map.clipGeojsonData = {
82
+ "type": "Feature",
83
+ "geometry": {
84
+ "type": "Polygon",
85
+ "coordinates": [
86
+ [
114
87
  [
115
- [-0.128307852848053, 51.50748361634746],
116
- [-0.1274388171272278, 51.50773069282454],
117
- [-0.12710085879135133, 51.507243216327],
118
- [-0.12802890311050416, 51.50705957656797],
119
- [-0.128307852848053, 51.50748361634746],
88
+ -0.128307852848053,
89
+ 51.50748361634746
120
90
  ],
121
- ],
122
- },
123
- };
124
-
125
- map.addEventListener("ready", (event) => {
126
- console.log("map ready");
127
- });
91
+ [
92
+ -0.1274388171272278,
93
+ 51.50773069282454
94
+ ],
95
+ [
96
+ -0.12710085879135133,
97
+ 51.507243216327
98
+ ],
99
+ [
100
+ -0.12802890311050416,
101
+ 51.50705957656797
102
+ ],
103
+ [
104
+ -0.128307852848053,
105
+ 51.50748361634746
106
+ ]
107
+ ]
108
+ ]
109
+ },
110
+ };
128
111
 
129
- // applicable when drawMode is enabled
130
- map.addEventListener("geojsonChange", ({ detail: geojson }) => {
131
- console.debug({ geojson });
132
- });
112
+ map.addEventListener("ready", (event) => {
113
+ console.log("map ready");
114
+ });
133
115
 
134
- // applicable when showFeaturesAtPoint is enabled
135
- map.addEventListener("featuresAreaChange", ({ detail: featuresArea }) => {
136
- console.debug({ featuresArea });
137
- });
138
- map.addEventListener(
139
- "featuresGeojsonChange",
140
- ({ detail: featuresGeojson }) => {
141
- console.debug({ featuresGeojson });
142
- },
143
- );
116
+ // applicable when drawMode is enabled
117
+ map.addEventListener("geojsonChange", ({ detail: geojson }) => {
118
+ console.debug({ geojson });
119
+ });
144
120
 
145
- // applicable when geojsonData is provided
146
- map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
147
- console.debug({ geojsonDataArea });
148
- });
121
+ // applicable when showFeaturesAtPoint is enabled
122
+ map.addEventListener("featuresAreaChange", ({ detail: featuresArea }) => {
123
+ console.debug({ featuresArea });
124
+ });
125
+ map.addEventListener("featuresGeojsonChange", ({ detail: featuresGeojson }) => {
126
+ console.debug({ featuresGeojson });
127
+ });
149
128
 
150
- // --- POSTCODE SEARCH --- //
151
- const search = document.querySelector("postcode-search");
129
+ // applicable when geojsonData is provided
130
+ map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
131
+ console.debug({ geojsonDataArea });
132
+ });
152
133
 
153
- search.addEventListener("postcodeChange", ({ detail }) => {
154
- console.debug({ detail });
155
- });
134
+ // --- POSTCODE SEARCH --- //
135
+ const search = document.querySelector("postcode-search");
156
136
 
157
- // --- ADDRESS AUTOCOMPLETE --- //
158
- const autocomplete = document.querySelector("address-autocomplete");
137
+ search.addEventListener("postcodeChange", ({ detail }) => {
138
+ console.debug({ detail });
139
+ });
159
140
 
160
- autocomplete.addEventListener("ready", ({ detail: data }) => {
161
- console.log("autocomplete ready", { data });
162
- });
141
+ // --- ADDRESS AUTOCOMPLETE --- //
142
+ const autocomplete = document.querySelector("address-autocomplete");
163
143
 
164
- autocomplete.addEventListener(
165
- "addressSelection",
166
- ({ detail: address }) => {
167
- console.debug({ detail: address });
168
- },
169
- );
144
+ autocomplete.addEventListener("ready", ({ detail: data }) => {
145
+ console.log("autocomplete ready", { data });
146
+ });
170
147
 
171
- // -- GEOCODE AUTOCOMPLETE -- //
172
- const geocodeAutocomplete = document.querySelector('geocode-autocomplete')
148
+ autocomplete.addEventListener(
149
+ "addressSelection",
150
+ ({ detail: address }) => {
151
+ console.debug({ detail: address });
152
+ }
153
+ );
154
+ </script>
155
+ </body>
173
156
 
174
- geocodeAutocomplete.addEventListener(
175
- "addressSelection",
176
- ({ detail: address }) => {
177
- console.debug({ detail: address });
178
- },
179
- );
180
- </script>
181
- </body>
182
- </html>
157
+ </html>