@opensystemslab/map 1.0.0-alpha.10 → 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 -124
  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-AOpK_3ZR.mjs +0 -58823
  20. package/dist/index.es-BucgMOE8.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,95 +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="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>
75
+ <address-autocomplete postcode="SE5 0HU" id="example-autocomplete" arrowStyle="light" labelStyle="static" />
95
76
  </div>
96
- <script>
97
- // --- MAP --- //
98
- const map = document.querySelector("my-map");
99
- map.clipGeojsonData = {
100
- type: "Feature",
101
- geometry: {
102
- type: "Polygon",
103
- 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
+ [
104
87
  [
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],
88
+ -0.128307852848053,
89
+ 51.50748361634746
110
90
  ],
111
- ],
112
- },
113
- };
114
-
115
- map.addEventListener("ready", (event) => {
116
- console.log("map ready");
117
- });
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
+ };
118
111
 
119
- // applicable when drawMode is enabled
120
- map.addEventListener("geojsonChange", ({ detail: geojson }) => {
121
- console.debug({ geojson });
122
- });
112
+ map.addEventListener("ready", (event) => {
113
+ console.log("map ready");
114
+ });
123
115
 
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
- );
116
+ // applicable when drawMode is enabled
117
+ map.addEventListener("geojsonChange", ({ detail: geojson }) => {
118
+ console.debug({ geojson });
119
+ });
134
120
 
135
- // applicable when geojsonData is provided
136
- map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
137
- console.debug({ geojsonDataArea });
138
- });
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
+ });
139
128
 
140
- // --- POSTCODE SEARCH --- //
141
- const search = document.querySelector("postcode-search");
129
+ // applicable when geojsonData is provided
130
+ map.addEventListener("geojsonDataArea", ({ detail: geojsonDataArea }) => {
131
+ console.debug({ geojsonDataArea });
132
+ });
142
133
 
143
- search.addEventListener("postcodeChange", ({ detail }) => {
144
- console.debug({ detail });
145
- });
134
+ // --- POSTCODE SEARCH --- //
135
+ const search = document.querySelector("postcode-search");
146
136
 
147
- // --- ADDRESS AUTOCOMPLETE --- //
148
- const autocomplete = document.querySelector("address-autocomplete");
137
+ search.addEventListener("postcodeChange", ({ detail }) => {
138
+ console.debug({ detail });
139
+ });
149
140
 
150
- autocomplete.addEventListener("ready", ({ detail: data }) => {
151
- console.log("autocomplete ready", { data });
152
- });
141
+ // --- ADDRESS AUTOCOMPLETE --- //
142
+ const autocomplete = document.querySelector("address-autocomplete");
153
143
 
154
- autocomplete.addEventListener(
155
- "addressSelection",
156
- ({ detail: address }) => {
157
- console.debug({ detail: address });
158
- },
159
- );
144
+ autocomplete.addEventListener("ready", ({ detail: data }) => {
145
+ console.log("autocomplete ready", { data });
146
+ });
160
147
 
161
- // -- GEOCODE AUTOCOMPLETE -- //
162
- 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>
163
156
 
164
- geocodeAutocomplete.addEventListener(
165
- "addressSelection",
166
- ({ detail: address }) => {
167
- console.debug({ detail: address });
168
- },
169
- );
170
- </script>
171
- </body>
172
- </html>
157
+ </html>