@opensystemslab/map 1.0.0-alpha.11 → 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 (24) hide show
  1. package/README.md +8 -24
  2. package/dist/component-lib.es.js +3 -4
  3. package/dist/component-lib.umd.js +212 -173
  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 -126
  8. package/dist/purify.es-B7BPtUgm.mjs +471 -0
  9. package/dist/style.css +1 -0
  10. package/package.json +21 -23
  11. package/types/components/address-autocomplete/index.d.ts +1 -1
  12. package/types/components/my-map/drawing.d.ts +1 -1
  13. package/types/components/my-map/index.d.ts +6 -7
  14. package/types/components/my-map/layers.d.ts +1 -3
  15. package/types/components/my-map/os-features.d.ts +1 -1
  16. package/types/components/my-map/snapping.d.ts +2 -4
  17. package/types/index.d.ts +0 -1
  18. package/types/lib/ordnanceSurvey.d.ts +1 -1
  19. package/dist/index-PCyWSA0Z.mjs +0 -58825
  20. package/dist/index.es-DjHXgkDI.mjs +0 -6674
  21. package/dist/map.css +0 -1
  22. package/dist/purify.es-DHbHSKL1.mjs +0 -528
  23. package/types/components/geocode-autocomplete/index.d.ts +0 -46
  24. package/types/components/geocode-autocomplete/main.test.d.ts +0 -6
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;
@@ -38,37 +37,32 @@
38
37
  --postcode__input__height: 60px;
39
38
  }
40
39
  </style> -->
41
- </head>
40
+ </head>
42
41
 
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 AC0000812160"
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
- <!--
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
+ <!--
72
66
  Examples (as of March 2022):
73
67
  SE5 OHU (Southwark): default/"standard" postcode example, fetches 65 LPI addresses
74
68
  SE19 1NT (Lambeth): 56 DPA addresses -> 128 LPI addresses (87 "approved"), now requires paginated fetch
@@ -78,97 +72,86 @@
78
72
  Example with default value (used for planx "change" & "back" button behavior):
79
73
  <address-autocomplete postcode="SE5 0HU" id="example-autocomplete" initialAddress="75, COBOURG ROAD, LONDON" />
80
74
  -->
81
- <address-autocomplete
82
- postcode="NW5 2JT"
83
- id="example-autocomplete"
84
- arrowStyle="light"
85
- labelStyle="static"
86
- osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
87
- />
88
- </div>
89
- <div style="margin-bottom: 1em; background-color: white">
90
- <geocode-autocomplete
91
- id="example-geocode-autocomplete"
92
- arrowStyle="light"
93
- labelStyle="static"
94
- osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey"
95
- />
96
- </div>
75
+ <address-autocomplete postcode="SE5 0HU" id="example-autocomplete" arrowStyle="light" labelStyle="static" />
97
76
  </div>
98
- <script>
99
- // --- MAP --- //
100
- const map = document.querySelector("my-map");
101
- map.clipGeojsonData = {
102
- type: "Feature",
103
- geometry: {
104
- type: "Polygon",
105
- 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
+ [
106
87
  [
107
- [-0.128307852848053, 51.50748361634746],
108
- [-0.1274388171272278, 51.50773069282454],
109
- [-0.12710085879135133, 51.507243216327],
110
- [-0.12802890311050416, 51.50705957656797],
111
- [-0.128307852848053, 51.50748361634746],
88
+ -0.128307852848053,
89
+ 51.50748361634746
112
90
  ],
113
- ],
114
- },
115
- };
116
-
117
- map.addEventListener("ready", (event) => {
118
- console.log("map ready");
119
- });
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
+ };
120
111
 
121
- // applicable when drawMode is enabled
122
- map.addEventListener("geojsonChange", ({ detail: geojson }) => {
123
- console.debug({ geojson });
124
- });
112
+ map.addEventListener("ready", (event) => {
113
+ console.log("map ready");
114
+ });
125
115
 
126
- // applicable when showFeaturesAtPoint is enabled
127
- map.addEventListener("featuresAreaChange", ({ detail: featuresArea }) => {
128
- console.debug({ featuresArea });
129
- });
130
- map.addEventListener(
131
- "featuresGeojsonChange",
132
- ({ detail: featuresGeojson }) => {
133
- console.debug({ featuresGeojson });
134
- },
135
- );
116
+ // applicable when drawMode is enabled
117
+ map.addEventListener("geojsonChange", ({ detail: geojson }) => {
118
+ console.debug({ geojson });
119
+ });
136
120
 
137
- // applicable when geojsonData is provided
138
- map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
139
- console.debug({ geojsonDataArea });
140
- });
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
+ });
141
128
 
142
- // --- POSTCODE SEARCH --- //
143
- const search = document.querySelector("postcode-search");
129
+ // applicable when geojsonData is provided
130
+ map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
131
+ console.debug({ geojsonDataArea });
132
+ });
144
133
 
145
- search.addEventListener("postcodeChange", ({ detail }) => {
146
- console.debug({ detail });
147
- });
134
+ // --- POSTCODE SEARCH --- //
135
+ const search = document.querySelector("postcode-search");
148
136
 
149
- // --- ADDRESS AUTOCOMPLETE --- //
150
- const autocomplete = document.querySelector("address-autocomplete");
137
+ search.addEventListener("postcodeChange", ({ detail }) => {
138
+ console.debug({ detail });
139
+ });
151
140
 
152
- autocomplete.addEventListener("ready", ({ detail: data }) => {
153
- console.log("autocomplete ready", { data });
154
- });
141
+ // --- ADDRESS AUTOCOMPLETE --- //
142
+ const autocomplete = document.querySelector("address-autocomplete");
155
143
 
156
- autocomplete.addEventListener(
157
- "addressSelection",
158
- ({ detail: address }) => {
159
- console.debug({ detail: address });
160
- },
161
- );
144
+ autocomplete.addEventListener("ready", ({ detail: data }) => {
145
+ console.log("autocomplete ready", { data });
146
+ });
162
147
 
163
- // -- GEOCODE AUTOCOMPLETE -- //
164
- 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>
165
156
 
166
- geocodeAutocomplete.addEventListener(
167
- "addressSelection",
168
- ({ detail: address }) => {
169
- console.debug({ detail: address });
170
- },
171
- );
172
- </script>
173
- </body>
174
- </html>
157
+ </html>