');
10 | }
11 | console.log('Using API key: ' + key);
12 |
13 | // Setup an express server.
14 | // This server serves the client files to the browser, and provides an endpoint to get an access token.
15 | const app = express();
16 | app.use(express.static(path.join(__dirname, 'client')));
17 |
18 | app.get('/token', function(req, res) {
19 | const params = new URLSearchParams();
20 | params.append('grant_type', 'client_credentials');
21 | const authString = Buffer.from(key + ":" + secret).toString('base64');
22 | fetch('https://api.os.uk/oauth2/token/v1', {
23 | method: 'POST',
24 | body: params,
25 | headers: {
26 | Authorization: 'Basic ' + authString
27 | }
28 | })
29 | .then(res => res.json())
30 | .then(json => {
31 | res.set('Content-Type', 'application/json');
32 | res.send(json);
33 | })
34 | .catch(() => {
35 | res.status(500).send('Failed to get access token, check the API key and secret');
36 | });
37 | });
38 |
39 | app.listen(8080, () => console.log("Listening on port 8080. Please open http://localhost:8080 in a web browser."));
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/OSFeaturesAPI/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Features API Demo
5 |
24 |
To connect to your mapping API:
25 |
26 | Go to the OS Data Hub ,
27 | Create a project,
28 | Add the OS Features API to your project
29 | Copy the project API Key, and enter it into the box above.
30 |
31 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/OSFeaturesAPI/js/query.js:
--------------------------------------------------------------------------------
1 | // We will return 10 results at a time
2 | let startIndex = 0;
3 | let count = 10;
4 |
5 | // Return the first 10 results
6 | window.query = function() {
7 | startIndex = 0;
8 | runQuery();
9 | };
10 |
11 | // Return the next 10 results (on each run of the loadMore function)
12 | window.loadMore = function() {
13 | startIndex += count;
14 | runQuery();
15 | };
16 |
17 | function runQuery() {
18 | var key = document.getElementById('keyInput').value;
19 | var message = document.getElementById('message');
20 | var results = document.getElementById('results');
21 | var search = document.getElementById('search');
22 | var more = document.getElementById('more');
23 | var instructions = document.getElementById('instructions');
24 |
25 | results.innerHTML = '';
26 | if(!key) {
27 | message.classList.add("warning");
28 | message.textContent = 'To run the query, please enter a valid API key.';
29 | instructions.classList.remove("hidden");
30 | search.disabled = false;
31 | more.disabled = true;
32 | return;
33 | }
34 | message.classList.remove("warning");
35 | message.textContent = 'To run the query, please enter a valid API key.';
36 | instructions.classList.add("hidden");
37 |
38 | // The parameters required to call the WFS service
39 | var parameters = {
40 | key: key,
41 | request: 'GetFeature',
42 | service: 'WFS',
43 | version: '2.0.0',
44 | // typeName defines tha layer we are querying
45 | // You can replace this with another layer if you wish
46 | typeName: 'Zoomstack_Airports',
47 | startIndex: startIndex,
48 | count: count,
49 | outputFormat: 'GEOJSON'
50 | };
51 | // We encode the parameters and create the URL
52 | var encodedParameters = Object.keys(parameters)
53 | .map(paramName => paramName + '=' + encodeURI(parameters[paramName]))
54 | .join('&');
55 | var url = 'https://api.os.uk/features/v1/wfs?' + encodedParameters;
56 |
57 | search.disabled = true;
58 | more.disabled = true;
59 | results.innerHTML = 'Loading... ';
60 | fetch(url)
61 | .then(response => response.json())
62 | .then(json => {
63 | search.disabled = false;
64 | if(json.features.length === count) {
65 | // We got a full set of results, so we should enable the load more button
66 | more.disabled = false;
67 | }
68 | results.innerHTML = '';
69 |
70 | // If results are returned we display them one by one
71 | json.features.forEach(feature => {
72 | // Create a heading using the feature name
73 | var node = document.createElement('h1');
74 | node.innerText = feature.properties.Name;
75 | results.appendChild(node);
76 |
77 | // Print out the feature geometry
78 | node = document.createElement('label');
79 | node.setAttribute('for', feature.properties.OBJECTID);
80 | node.innerText = 'Geometry Type: ';
81 | results.appendChild(node);
82 | node = document.createElement('span');
83 | node.id = feature.properties.OBJECTID;
84 | node.innerText = feature.geometry.type;
85 | results.appendChild(node);
86 |
87 | // Create a table with all of the feature properties
88 | const table = document.createElement('table');
89 | results.appendChild(table);
90 | var row = document.createElement('tr');
91 | row.innerHTML = 'Property Name Value ';
92 | table.appendChild(row);
93 |
94 | Object.keys(feature.properties).forEach(propertyName => {
95 | var row = document.createElement('tr');
96 | row.innerHTML = '' + propertyName + ' ' + feature.properties[propertyName] + ' ';
97 | table.appendChild(row);
98 | });
99 | });
100 | })
101 | .catch(error => {
102 | search.disabled = false;
103 | more.disabled = true;
104 | message.classList.remove("warning");
105 | message.textContent = 'Got an error when running the query! Check your network connection, or try another API key.';
106 | });
107 | }
108 |
--------------------------------------------------------------------------------
/OSFeaturesAPI/style.css:
--------------------------------------------------------------------------------
1 | /* Set the document to use flexbox layout */
2 | body {
3 | margin: 0;
4 | height: 100vh;
5 | display: flex;
6 | flex-direction: column;
7 | text-align: center;
8 | font-family: sans-serif;
9 | overflow-y: hidden;
10 | }
11 |
12 | #results {
13 | text-align: left;
14 | flex: 1 1 auto;
15 | padding: 10px;
16 | overflow-y: auto;
17 | }
18 |
19 | table, tr, th, td {
20 | border: none;
21 | border-collapse: collapse;
22 | }
23 |
24 | /*
25 | NOTE:
26 | The CSS following this comment is for *styling purposes only* and is not essential for this demo to run
27 | - strip out the styles below if you want cleaner code
28 | */
29 |
30 | body {
31 | font-family: "Source Sans Pro", sans-serif;
32 | font-size:16px;
33 | color: #666666;
34 | min-width: 480px;
35 | }
36 |
37 | table {
38 | margin: 20px 0;
39 | }
40 |
41 | th {
42 | color: #453c90;
43 | background-color: white;
44 | border-bottom: 2px solid #453c90;
45 | }
46 |
47 | tr {
48 | color: #333333;
49 | }
50 |
51 | tr:nth-child(odd) {
52 | background-color: #f6f5f9;
53 | }
54 |
55 | tr {
56 | border-bottom: 1px solid #dddddd;
57 | }
58 |
59 | h1{
60 | font-size: 32px;
61 | font-weight: normal;
62 | line-height: 1.4;
63 | letter-spacing: 0.7px;
64 | margin: 0 0 10px;
65 | color: #453c90;
66 | }
67 |
68 | p{
69 | margin: 10px 0;
70 | }
71 |
72 | b{
73 | font-weight:600;
74 | }
75 | label{
76 | line-height: 1.7em;
77 | font-weight: 600;
78 | }
79 | input, button{
80 | font-size: 16px;
81 |
82 | }
83 |
84 | input[type="text"]{
85 | height: 24px;
86 | border-radius: 3px 0 0 3px;
87 | border: solid 1px #dddddd;
88 | padding: 12px 16px;
89 | flex: 1 1 auto;
90 | background-color: #f5f5f5;
91 | color: #333333;
92 | font-size: 16px;
93 | margin:0;
94 | }
95 | button{
96 | height: 50px;
97 | border-radius: 0;
98 | background-color: #453c90;
99 | color: #fff;
100 | font-family: "Source Sans Pro", sans-serif;
101 | padding: 4px 20px;
102 | border:0;
103 | }
104 | button:disabled {
105 | background-color: #999999;
106 | color: #fff;
107 | }
108 | button.secondary {
109 | background-color: #fff;
110 | border: 1px solid #453c90;
111 | color: #453c90;
112 | }
113 | button.secondary:disabled {
114 | border: 1px solid #999999;
115 | color: #999999;
116 | }
117 | button:last-of-type {
118 | border-radius: 0 3px 3px 0;
119 | }
120 |
121 | #header{
122 | text-align: center;
123 | background-color: #ffffff;
124 | padding: 20px;
125 | border-bottom: 1px solid #dddddd;
126 | box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
127 | z-index:1000
128 |
129 | }
130 |
131 |
132 | #instructions{
133 | text-align: left;
134 | position: relative;
135 | background-color: #fff;
136 | padding: 10px 20px;
137 | top: 40px;
138 | margin: auto;
139 | z-index: 100;
140 | border-radius: 3px;
141 | box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.4);
142 | }
143 |
144 | .hidden{
145 | display:none;
146 | }
147 | .warning{
148 | color:#d40058;
149 | font-weight:400;
150 | }
151 | .inputContainer {
152 | display: flex;
153 | }
154 | .geometry {
155 | text-overflow: ellipsis;
156 | white-space: nowrap;
157 | overflow: hidden;
158 | }
159 | form{
160 | margin-top: 20px;
161 | text-align: left;
162 | }
--------------------------------------------------------------------------------
/OSLinkedIdentifiersAPI/img/expand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OrdnanceSurvey/OS-Data-Hub-API-Demos/21dc7d5c178ca112101503fd3afa7366fd7861dd/OSLinkedIdentifiersAPI/img/expand.png
--------------------------------------------------------------------------------
/OSLinkedIdentifiersAPI/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Linked Identifiers API Demo
5 |
124 |
125 |
To connect to your linked identifiers API:
126 |
127 | Go to the OS Data Hub ,
128 | Create a project,
129 | Add the OS Linked Identifiers API to your project
130 | Copy the project API Key, and enter it into the box above.
131 |
132 |
133 |
134 |
135 |
Loading... ';
123 | fetch(url)
124 | .then(response => {
125 | results.innerHTML = '';
126 |
127 | var divNode = document.createElement('div');
128 | divNode.classList.add('urlContainer');
129 | var url = response.url;
130 | divNode.innerHTML = 'URL: '+ url + ' ';
131 | results.appendChild(divNode);
132 |
133 | var statusCode = response.status;
134 | var statusNode = document.createElement('div');
135 | statusNode.innerHTML = 'Status: '+ statusCode + ' ';
136 | results.appendChild(statusNode);
137 |
138 | return response.json();
139 | })
140 | .then(json => {
141 | var node = document.createElement('pre');
142 | node.innerHTML = syntaxHighlight(JSON.stringify(json, undefined, 2));
143 | results.appendChild(node);
144 | })
145 | .catch(error => {
146 | message.classList.remove("warning");
147 | message.textContent = 'Got an error when running the query! Check your network connection, or try another API key.';
148 | });
149 | }
150 |
151 | function syntaxHighlight(json) {
152 | return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
153 | var cls = 'value';
154 | if (/^"/.test(match)) {
155 | if (/:$/.test(match)) {
156 | cls = 'key';
157 | }
158 | }
159 | return '' + match + ' ';
160 | })
161 | }
162 |
--------------------------------------------------------------------------------
/OSLinkedIdentifiersAPI/style.css:
--------------------------------------------------------------------------------
1 | /* Set the document to use flexbox layout */
2 | body {
3 | margin: 0;
4 | height: 100vh;
5 | display: flex;
6 | flex-direction: row;
7 | text-align: center;
8 | font-family: sans-serif;
9 | overflow-y: hidden;
10 | }
11 |
12 | #results {
13 | text-align: left;
14 | flex: 1 1 auto;
15 | padding: 10px;
16 | overflow-y: auto;
17 | }
18 |
19 | /*
20 | NOTE:
21 | The CSS following this comment is for *styling purposes only* and is not essential for this demo to run
22 | - strip out the styles below if you want cleaner code
23 | */
24 |
25 | body {
26 | font-family: "Source Sans Pro", sans-serif;
27 | font-size:16px;
28 | color: #666666;
29 | min-width: 480px;
30 | }
31 |
32 | h1 {
33 | font-size: 32px;
34 | font-weight: normal;
35 | line-height: 1.4;
36 | letter-spacing: 0.7px;
37 | margin: 0 0 10px;
38 | color: #453c90;
39 | }
40 |
41 | p {
42 | margin: 10px 0;
43 | }
44 |
45 | b {
46 | font-weight:600;
47 | }
48 |
49 | label {
50 | line-height: 1.7em;
51 | font-weight: 600;
52 | }
53 |
54 | input, button {
55 | font-size: 16px;
56 | }
57 |
58 | input[type="text"] {
59 | height: 24px;
60 | border-radius: 3px 0 0 3px;
61 | border: solid 1px #dddddd;
62 | padding: 12px 16px;
63 | flex: 1 1 auto;
64 | background-color: #f5f5f5;
65 | color: #333333;
66 | font-size: 16px;
67 | margin: 0 4px 0 0;
68 | }
69 |
70 | button {
71 | height: 50px;
72 | border-radius: 3px;
73 | background-color: #453c90;
74 | color: #fff;
75 | font-family: "Source Sans Pro", sans-serif;
76 | padding: 4px 20px;
77 | border:0;
78 |
79 | }
80 |
81 | select {
82 | height: 50px;
83 | border-radius: 3px;
84 | border: solid 1px #dddddd;
85 | font-family: "Source Sans Pro", sans-serif;
86 | font-size:16px;
87 | color: #666666;
88 | margin-right: 5px;
89 | width: 180px;
90 | }
91 |
92 | .key {
93 | color: #07a;
94 | }
95 |
96 | .value {
97 | color: #d40058;
98 | }
99 |
100 | #header {
101 | background-color: #ffffff;
102 | padding: 20px;
103 | box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
104 | width: 50%;
105 | flex: 1;
106 | overflow-y: auto;
107 | }
108 |
109 | #resultContainer {
110 | display: flex;
111 | width: 50%;
112 | padding: 20px;
113 | background: #f5f2f0;
114 | }
115 |
116 | #instructions {
117 | text-align: left;
118 | position: relative;
119 | background-color: #fff;
120 | padding: 10px 20px;
121 | top: 40px;
122 | margin: auto;
123 | z-index: 100;
124 | border-radius: 3px;
125 | box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.4);
126 | }
127 |
128 | #correlationMethod {
129 | flex: 1;
130 | }
131 |
132 | .hidden {
133 | display:none;
134 | }
135 |
136 | .warning {
137 | color:#d40058;
138 | font-weight:400;
139 | }
140 | .inputContainer {
141 | display: flex;
142 | }
143 |
144 | .form {
145 | margin-top: 20px;
146 | text-align: left;
147 | }
148 |
149 | .urlContainer {
150 | margin-bottom: 8px;
151 | }
152 |
153 | .dropdownButton {
154 | outline: none;
155 | border-radius: 3px;
156 | border: solid 1px #453c90;
157 | color: #453c90;
158 | background-color: white;
159 | font-weight: 600;
160 | display: flex;
161 | padding-left: 12px;
162 | margin-right: 4px;
163 | }
164 |
165 | .dropdownButtonText {
166 | margin: auto
167 | }
168 |
169 | .dropdownImg {
170 | width: 24px;
171 | height: 24px;
172 | margin-top: auto;
173 | margin-bottom: auto;
174 | margin-left: 12px;
175 | }
176 |
177 | .dropdownMenu {
178 | width: 200px;
179 | list-style: none;
180 | border: 1px solid #666;
181 | padding: 0;
182 | border-radius: 3px;
183 | background: white;
184 | margin-top: 4px;
185 | }
186 |
187 | .menuOption {
188 | cursor: pointer;
189 | padding: 12px;
190 | }
191 |
192 | .menuOption:hover {
193 | background-color: #ddd;
194 | }
195 |
196 | .examplesContainer {
197 | padding-top: 4px;
198 | border-top: 2px solid #dddddd;
199 | margin-top: 24px;
200 | margin-bottom: 36px;
201 | }
202 |
203 | .exampleTitle {
204 | margin-top: 24px;
205 | margin-bottom: 8px
206 | }
207 |
208 | .exampleSelection {
209 | display: flex
210 | }
--------------------------------------------------------------------------------
/OSMapsAPI/ArcGIS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Maps API Demo
5 |
38 |
39 |
To connect to your mapping API:
40 |
41 | Go to the OS Data Hub ,
42 | Create a project,
43 | Add the OS Maps API to your project
44 | Copy the project API Key, and enter it into the box above.
45 |
46 |
47 | Note that this sample will allow you to zoom the map down into Premium data layers.
48 | If your API key only has access to OS OpenData layers then those requests will fail.
49 |
50 |
Ordnance Survey '
41 | });
42 |
43 | wmtsLayer.when(success => {}, error => {
44 | message.classList.add("warning");
45 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Maps API';
46 | instructions.classList.remove("hidden");
47 | });
48 |
49 | var map = new Map({
50 | layers: [wmtsLayer]
51 | });
52 |
53 | // Once the projection loads we define the center coordinates in EPSG:27700
54 | // Then set up the map view
55 | promise.then(() => {
56 | var center = new Point({
57 | x: 425168,
58 | y: 563779,
59 | spatialReference: new SpatialReference({wkid: 27700})
60 | });
61 | if(style.indexOf('27700') === -1) {
62 | center = projection.project(center, new SpatialReference({ wkid: 3857 }));
63 | }
64 | new MapView({
65 | map: map,
66 | container: "map",
67 | center: center,
68 | scale: 250000
69 | });
70 | });
71 | };
72 | }
73 | );
74 |
--------------------------------------------------------------------------------
/OSMapsAPI/Leaflet/Proj4Leaflet/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2012, Kartena AB
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without
5 | modification, are permitted provided that the following conditions are met:
6 |
7 | 1. Redistributions of source code must retain the above copyright notice, this
8 | list of conditions and the following disclaimer.
9 | 2. Redistributions in binary form must reproduce the above copyright notice,
10 | this list of conditions and the following disclaimer in the documentation
11 | and/or other materials provided with the distribution.
12 |
13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
14 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
15 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
16 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
17 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
18 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
19 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
20 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
21 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
22 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
23 |
--------------------------------------------------------------------------------
/OSMapsAPI/Leaflet/Proj4Leaflet/proj4leaflet.js:
--------------------------------------------------------------------------------
1 | (function (factory) {
2 | var L, proj4;
3 | if (typeof define === 'function' && define.amd) {
4 | // AMD
5 | define(['leaflet', 'proj4'], factory);
6 | } else if (typeof module === 'object' && typeof module.exports === "object") {
7 | // Node/CommonJS
8 | L = require('leaflet');
9 | proj4 = require('proj4');
10 | module.exports = factory(L, proj4);
11 | } else {
12 | // Browser globals
13 | if (typeof window.L === 'undefined' || typeof window.proj4 === 'undefined')
14 | throw 'Leaflet and proj4 must be loaded first';
15 | factory(window.L, window.proj4);
16 | }
17 | }(function (L, proj4) {
18 |
19 | L.Proj = {};
20 |
21 | L.Proj._isProj4Obj = function(a) {
22 | return (typeof a.inverse !== 'undefined' &&
23 | typeof a.forward !== 'undefined');
24 | };
25 |
26 | L.Proj.Projection = L.Class.extend({
27 | initialize: function(code, def, bounds) {
28 | var isP4 = L.Proj._isProj4Obj(code);
29 | this._proj = isP4 ? code : this._projFromCodeDef(code, def);
30 | this.bounds = isP4 ? def : bounds;
31 | },
32 |
33 | project: function (latlng) {
34 | var point = this._proj.forward([latlng.lng, latlng.lat]);
35 | return new L.Point(point[0], point[1]);
36 | },
37 |
38 | unproject: function (point, unbounded) {
39 | var point2 = this._proj.inverse([point.x, point.y]);
40 | return new L.LatLng(point2[1], point2[0], unbounded);
41 | },
42 |
43 | _projFromCodeDef: function(code, def) {
44 | if (def) {
45 | proj4.defs(code, def);
46 | } else if (proj4.defs[code] === undefined) {
47 | var urn = code.split(':');
48 | if (urn.length > 3) {
49 | code = urn[urn.length - 3] + ':' + urn[urn.length - 1];
50 | }
51 | if (proj4.defs[code] === undefined) {
52 | throw 'No projection definition for code ' + code;
53 | }
54 | }
55 |
56 | return proj4(code);
57 | }
58 | });
59 |
60 | L.Proj.CRS = L.Class.extend({
61 | includes: L.CRS,
62 |
63 | options: {
64 | transformation: new L.Transformation(1, 0, -1, 0)
65 | },
66 |
67 | initialize: function(a, b, c) {
68 | var code,
69 | proj,
70 | def,
71 | options;
72 |
73 | if (L.Proj._isProj4Obj(a)) {
74 | proj = a;
75 | code = proj.srsCode;
76 | options = b || {};
77 |
78 | this.projection = new L.Proj.Projection(proj, options.bounds);
79 | } else {
80 | code = a;
81 | def = b;
82 | options = c || {};
83 | this.projection = new L.Proj.Projection(code, def, options.bounds);
84 | }
85 |
86 | L.Util.setOptions(this, options);
87 | this.code = code;
88 | this.transformation = this.options.transformation;
89 |
90 | if (this.options.origin) {
91 | this.transformation =
92 | new L.Transformation(1, -this.options.origin[0],
93 | -1, this.options.origin[1]);
94 | }
95 |
96 | if (this.options.scales) {
97 | this._scales = this.options.scales;
98 | } else if (this.options.resolutions) {
99 | this._scales = [];
100 | for (var i = this.options.resolutions.length - 1; i >= 0; i--) {
101 | if (this.options.resolutions[i]) {
102 | this._scales[i] = 1 / this.options.resolutions[i];
103 | }
104 | }
105 | }
106 |
107 | this.infinite = !this.options.bounds;
108 |
109 | },
110 |
111 | scale: function(zoom) {
112 | var iZoom = Math.floor(zoom),
113 | baseScale,
114 | nextScale,
115 | scaleDiff,
116 | zDiff;
117 | if (zoom === iZoom) {
118 | return this._scales[zoom];
119 | } else {
120 | // Non-integer zoom, interpolate
121 | baseScale = this._scales[iZoom];
122 | nextScale = this._scales[iZoom + 1];
123 | scaleDiff = nextScale - baseScale;
124 | zDiff = (zoom - iZoom);
125 | return baseScale + scaleDiff * zDiff;
126 | }
127 | },
128 |
129 | zoom: function(scale) {
130 | // Find closest number in this._scales, down
131 | var downScale = this._closestElement(this._scales, scale),
132 | downZoom = this._scales.indexOf(downScale),
133 | nextScale,
134 | nextZoom,
135 | scaleDiff;
136 | // Check if scale is downScale => return array index
137 | if (scale === downScale) {
138 | return downZoom;
139 | }
140 | // Interpolate
141 | nextZoom = downZoom + 1;
142 | nextScale = this._scales[nextZoom];
143 | if (nextScale === undefined) {
144 | return Infinity;
145 | }
146 | scaleDiff = nextScale - downScale;
147 | return (scale - downScale) / scaleDiff + downZoom;
148 | },
149 |
150 | distance: L.CRS.Earth.distance,
151 |
152 | R: L.CRS.Earth.R,
153 |
154 | /* Get the closest lowest element in an array */
155 | _closestElement: function(array, element) {
156 | var low;
157 | for (var i = array.length; i--;) {
158 | if (array[i] <= element && (low === undefined || low < array[i])) {
159 | low = array[i];
160 | }
161 | }
162 | return low;
163 | }
164 | });
165 |
166 | L.Proj.GeoJSON = L.GeoJSON.extend({
167 | initialize: function(geojson, options) {
168 | this._callLevel = 0;
169 | L.GeoJSON.prototype.initialize.call(this, geojson, options);
170 | },
171 |
172 | addData: function(geojson) {
173 | var crs;
174 |
175 | if (geojson) {
176 | if (geojson.crs && geojson.crs.type === 'name') {
177 | crs = new L.Proj.CRS(geojson.crs.properties.name);
178 | } else if (geojson.crs && geojson.crs.type) {
179 | crs = new L.Proj.CRS(geojson.crs.type + ':' + geojson.crs.properties.code);
180 | }
181 |
182 | if (crs !== undefined) {
183 | this.options.coordsToLatLng = function(coords) {
184 | var point = L.point(coords[0], coords[1]);
185 | return crs.projection.unproject(point);
186 | };
187 | }
188 | }
189 |
190 | // Base class' addData might call us recursively, but
191 | // CRS shouldn't be cleared in that case, since CRS applies
192 | // to the whole GeoJSON, inluding sub-features.
193 | this._callLevel++;
194 | try {
195 | L.GeoJSON.prototype.addData.call(this, geojson);
196 | } finally {
197 | this._callLevel--;
198 | if (this._callLevel === 0) {
199 | delete this.options.coordsToLatLng;
200 | }
201 | }
202 | }
203 | });
204 |
205 | L.Proj.geoJson = function(geojson, options) {
206 | return new L.Proj.GeoJSON(geojson, options);
207 | };
208 |
209 | L.Proj.ImageOverlay = L.ImageOverlay.extend({
210 | initialize: function (url, bounds, options) {
211 | L.ImageOverlay.prototype.initialize.call(this, url, null, options);
212 | this._projectedBounds = bounds;
213 | },
214 |
215 | // Danger ahead: Overriding internal methods in Leaflet.
216 | // Decided to do this rather than making a copy of L.ImageOverlay
217 | // and doing very tiny modifications to it.
218 | // Future will tell if this was wise or not.
219 | _animateZoom: function (event) {
220 | var scale = this._map.getZoomScale(event.zoom);
221 | var northWest = L.point(this._projectedBounds.min.x, this._projectedBounds.max.y);
222 | var offset = this._projectedToNewLayerPoint(northWest, event.zoom, event.center);
223 |
224 | L.DomUtil.setTransform(this._image, offset, scale);
225 | },
226 |
227 | _reset: function () {
228 | var zoom = this._map.getZoom();
229 | var pixelOrigin = this._map.getPixelOrigin();
230 | var bounds = L.bounds(
231 | this._transform(this._projectedBounds.min, zoom)._subtract(pixelOrigin),
232 | this._transform(this._projectedBounds.max, zoom)._subtract(pixelOrigin)
233 | );
234 | var size = bounds.getSize();
235 |
236 | L.DomUtil.setPosition(this._image, bounds.min);
237 | this._image.style.width = size.x + 'px';
238 | this._image.style.height = size.y + 'px';
239 | },
240 |
241 | _projectedToNewLayerPoint: function (point, zoom, center) {
242 | var viewHalf = this._map.getSize()._divideBy(2);
243 | var newTopLeft = this._map.project(center, zoom)._subtract(viewHalf)._round();
244 | var topLeft = newTopLeft.add(this._map._getMapPanePos());
245 |
246 | return this._transform(point, zoom)._subtract(topLeft);
247 | },
248 |
249 | _transform: function (point, zoom) {
250 | var crs = this._map.options.crs;
251 | var transformation = crs.transformation;
252 | var scale = crs.scale(zoom);
253 |
254 | return transformation.transform(point, scale);
255 | }
256 | });
257 |
258 | L.Proj.imageOverlay = function (url, bounds, options) {
259 | return new L.Proj.ImageOverlay(url, bounds, options);
260 | };
261 |
262 | return L.Proj;
263 | }));
264 |
--------------------------------------------------------------------------------
/OSMapsAPI/Leaflet/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Maps API Demo
5 |
37 |
38 |
To connect to your mapping API:
39 |
40 | Go to the OS Data Hub ,
41 | Create a project,
42 | Add the OS Maps API to your project
43 | Copy the project API Key, and enter it into the box above.
44 |
45 |
46 | Note that this sample will allow you to zoom the map down into Premium data layers.
47 | If your API key only has access to OS OpenData layers then those requests will fail.
48 |
49 |
Ordnance Survey ',
74 | maxZoom: 20
75 | }
76 | );
77 |
78 | // Add error handling in case the tile load fails
79 | layer.on('tileerror', function(event) {
80 | message.classList.add("warning");
81 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Maps API';
82 | instructions.classList.remove("hidden");
83 | });
84 | // Remove warning and hide instructions on tile load. This is so tileerror message does not persist when returning to a valid zoom level
85 | layer.on('tileloadstart', function(event) {
86 | message.classList.remove("warning");
87 | message.textContent = 'To view the map, please enter a valid API key.';
88 | instructions.classList.add("hidden");
89 | });
90 | mapOptions.layers = layer;
91 | // Create the map object and connect it to the 'map' element in the html
92 | map = L.map('map', mapOptions);
93 | }
94 |
--------------------------------------------------------------------------------
/OSMapsAPI/OpenLayers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Maps API Demo
5 |
39 |
40 |
To connect to your mapping API:
41 |
42 | Go to the OS Data Hub ,
43 | Create a project,
44 | Add the OS Maps API to your project
45 | Copy the project API Key, and enter it into the box above.
46 |
47 |
48 | Note that this sample will allow you to zoom the map down into Premium data layers.
49 | If your API key only has access to OS OpenData layers then those requests will fail.
50 |
51 |
Ordnance Survey ';
49 |
50 | var source = new ol.source.WMTS(options);
51 | var layer = new ol.layer.Tile({ source: source });
52 |
53 | // Error handling should the tiles fail to load. This can be extended to catch specific errors.
54 | source.on('tileloaderror', function(event) {
55 | message.classList.add("warning");
56 | message.textContent = 'Could not load a map tile. You may be attempting to access Premium data with an API key that only has access to OS OpenData.';
57 | instructions.classList.remove("hidden");
58 | });
59 |
60 | // Set up the view options, center of map, zoom level and projection information
61 | var viewOptions = {
62 | projection: options.projection,
63 | center: [-121099, 7161610],
64 | resolutions: options.tileGrid.getResolutions(),
65 | zoom: 8
66 | };
67 |
68 | // If we are using a layer in British National Grid (EPSG:27700), then tranform the center point from
69 | // EPSG:3857 into BNG, and adjust the zoom level.
70 | if(options.projection === bng) {
71 | var point = new ol.geom.Point(viewOptions.center);
72 | point.transform('EPSG:3857', bng);
73 | viewOptions.center = point.getCoordinates();
74 | viewOptions.zoom = 3;
75 | }
76 |
77 | // Create the map object and connect it to the 'map' element in the html
78 | map = new ol.Map({
79 | target: 'map',
80 | layers: [layer],
81 | view: new ol.View(viewOptions)
82 | });
83 |
84 | // Expand the attribution control, so that the the copyright message is visible
85 | map.getControls().forEach(control => {
86 | if(control instanceof ol.control.Attribution) {
87 | control.setCollapsed(false);
88 | }
89 | });
90 | })
91 | .catch(error => {
92 | message.classList.add("warning");
93 | message.textContent = 'Got an error from GetCapabilities! Check your network connection, or try another API key.';
94 | instructions.classList.remove("hidden");
95 | });
96 | }
97 |
--------------------------------------------------------------------------------
/OSMapsAPI/style.css:
--------------------------------------------------------------------------------
1 | /* Set the document to use flexbox layout */
2 | body {
3 | margin: 0;
4 | height: 100vh;
5 | display: flex;
6 | flex-direction: column;
7 | }
8 | /* ensure the map fills as much of the screen as possible */
9 | #map {
10 | flex: 1 0 auto;
11 | }
12 |
13 |
14 | /*
15 | NOTE:
16 | The CSS following this comment is for *styling purposes only* and is not essential for this demo to run
17 | - strip out the styles below if you want cleaner code
18 | */
19 |
20 | body {
21 | font-family: "Source Sans Pro", sans-serif;
22 | font-size:16px;
23 | color: #666666;
24 | min-width: 480px;
25 | }
26 |
27 |
28 | h1{
29 | font-size: 32px;
30 | font-weight: normal;
31 | line-height: 1.4;
32 | letter-spacing: 0.7px;
33 | margin: 0 0 10px;
34 | color: #453c90;
35 | }
36 |
37 | p{
38 | margin: 10px 0;
39 | }
40 |
41 | b{
42 | font-weight:600;
43 | }
44 | label{
45 | line-height: 1.7em;
46 | font-weight: 600;
47 | display: flex;
48 | flex-direction: column;
49 | }
50 | input, button{
51 | font-size: 16px;
52 |
53 | }
54 |
55 | input[type="text"]{
56 | height: 24px;
57 | border-radius: 3px 0 0 3px;
58 | border: solid 1px #dddddd;
59 | border-right: 0;
60 | padding: 12px 16px;
61 | background-color: #f5f5f5;
62 | color: #333333;
63 | font-size: 16px;
64 | margin:0;
65 | }
66 |
67 | select {
68 | height: 50px;
69 | background-color: #f5f5f5;
70 | color: #333333;
71 | font-size: 16px;
72 | padding: 12px 16px;
73 | border: 0;
74 | border-radius: 0;
75 | outline: solid 1px #dddddd;
76 | outline-offset: -1px;
77 | }
78 |
79 | button{
80 | height: 50px;
81 | border-radius: 0 3px 3px 0;
82 | background-color: #453c90;
83 | color: #fff;
84 | font-family: "Source Sans Pro", sans-serif;
85 | padding: 4px 20px;
86 | border:0;
87 |
88 | }
89 |
90 |
91 | #header{
92 | text-align: center;
93 | background-color: #ffffff;
94 | padding: 20px;
95 | border-bottom: 1px solid #dddddd;
96 | box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
97 | z-index:1000
98 |
99 | }
100 |
101 |
102 | #instructions{
103 | position: fixed;
104 | background-color: #fff;
105 | padding: 10px 20px;
106 | top: 280px;
107 | width: 300px;
108 | left: calc(50% - 160px);
109 | z-index: 100;
110 | border-radius: 3px;
111 | box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.4);
112 | }
113 |
114 | .hidden{
115 | display:none;
116 | }
117 | .warning{
118 | color:#d40058;
119 | font-weight:400;
120 | }
121 | form{
122 | margin-top: 20px;
123 | text-align: left;
124 | display: flex;
125 | align-items: flex-end;
126 | }
127 |
128 | .stretch {
129 | flex: 1 0 auto
130 | }
131 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/ArcGIS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Vector Tile API Demo
5 |
23 |
24 |
To connect to your mapping API:
25 |
26 | Go to the OS Data Hub ,
27 | Create a project,
28 | Add the OS Vector Tile API to your project
29 | Copy the project API Key, and enter it into the box above.
30 |
31 |
32 | Note that this sample will allow you to zoom the map down into Premium data layers.
33 | If your API key only has access to OS OpenData layers then those requests will fail.
34 |
35 |
Ordnance Survey '
69 | });
70 |
71 | tileLayer.when(success => {}, error => {
72 | message.classList.add("warning");
73 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
74 | instructions.classList.remove("hidden");
75 | });
76 |
77 | map.layers.add(tileLayer);
78 | };
79 | }
80 | );
81 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/Leaflet/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Vector Tile API Demo
5 |
26 |
27 |
To connect to your mapping API:
28 |
29 | Go to the OS Data Hub ,
30 | Create a project,
31 | Add the OS Vector Tile API to your project
32 | Copy the project API Key, and enter it into the box above.
33 |
34 |
Ordnance Survey ');
45 |
46 | gl.getMapboxMap().on('error', error => {
47 | console.log(error);
48 | message.classList.add("warning");
49 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
50 | instructions.classList.remove("hidden");
51 | });
52 | }
53 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/MapboxGLJS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Vector Tile API Demo
5 |
23 |
24 |
To connect to your mapping API:
25 |
26 | Go to the OS Data Hub ,
27 | Create a project,
28 | Add the OS Vector Tile API to your project
29 | Copy the project API Key, and enter it into the box above.
30 |
31 |
Ordnance Survey '
43 | }));
44 |
45 | // Add zoom and rotation controls to the map.
46 | map.addControl(new mapboxgl.NavigationControl());
47 |
48 | map.on('error', error => {
49 | console.log(error);
50 | message.classList.add("warning");
51 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
52 | instructions.classList.remove("hidden");
53 | });
54 | }
55 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/OpenLayers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Vector Tile API Demo
5 |
25 |
26 |
To connect to your mapping API:
27 |
28 | Go to the OS Data Hub ,
29 | Create a project,
30 | Add the OS Vector Tile API to your project
31 | Copy the project API Key, and enter it into the box above.
32 |
33 |
34 | Note that this sample will allow you to zoom the map down into Premium data layers.
35 | If your API key only has access to OS OpenData layers then those requests will fail.
36 |
37 |
Ordnance Survey ',
64 | projection: 'EPSG:' + wkid,
65 | tileGrid: new ol.tilegrid.TileGrid({
66 | extent,
67 | origin,
68 | resolutions,
69 | tileSize
70 | })
71 | };
72 | var source = new ol.source.VectorTile(options);
73 | var layer = new ol.layer.VectorTile({ source: source });
74 |
75 | // ol-mapbox-style doesn't like the 0 opacity for the icon colours, so we replace them here
76 | styleJson.layers.forEach(layer => {
77 | if(layer.paint && layer.paint['icon-color']) {
78 | layer.paint['icon-color'] = layer.paint['icon-color'].replace(',0)', ',1)');
79 | }
80 | });
81 |
82 | // Setup the styling for the vector tile layer.
83 | // We use the default style fetched in the promise here, though "style" can be any JSON VTS style
84 | olms.stylefunction(layer, styleJson, 'esri', resolutions, spritesJson, spritesPngUrl);
85 |
86 | source.on('tileloaderror', function(event) {
87 | message.classList.add("warning");
88 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
89 | });
90 |
91 | // Set the default center of the map view
92 | var center = [-121099, 7161610];
93 | if(wkid === 27700) {
94 | var point = new ol.geom.Point(center);
95 | point.transform('EPSG:3857', 'EPSG:27700');
96 | center = point.getCoordinates();
97 | }
98 |
99 | // Create the map object and connect it to the 'map' element in the html
100 | map = new ol.Map({
101 | target: 'map',
102 | layers: [layer],
103 | view: new ol.View({
104 | projection: 'EPSG:' + wkid,
105 | center: center,
106 | zoom: Math.floor(resolutions.length / 2)
107 | })
108 | });
109 | // Expand the attribution control, so that the the copyright message is visible
110 | map.getControls().forEach(control => {
111 | if(control instanceof ol.control.Attribution) {
112 | control.setCollapsed(false);
113 | }
114 | });
115 | })
116 |
117 | })
118 | .catch(error => {
119 | message.classList.add("warning");
120 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
121 | instructions.classList.remove("hidden");
122 | });
123 | }
124 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/OpenLayers/ol-mapbox-style/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2016-present ol-mapbox-style contributors
2 |
3 | Redistribution and use in source and binary forms, with or without
4 | modification, are permitted provided that the following conditions are met:
5 |
6 | 1. Redistributions of source code must retain the above copyright notice, this
7 | list of conditions and the following disclaimer.
8 |
9 | 2. Redistributions in binary form must reproduce the above copyright notice,
10 | this list of conditions and the following disclaimer in the documentation
11 | and/or other materials provided with the distribution.
12 |
13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
14 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
15 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
16 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
17 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
18 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
19 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
20 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
21 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
22 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
23 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/StylingVTS/Adapting/README.md:
--------------------------------------------------------------------------------
1 | # Adapting the pre-defined style
2 |
3 | This method is particularly useful if you are aiming to highlight a feature in the existing style or wish to change a small number of elements. Since the method is manipulating the existing style on-the-fly it is taking browser resources to do so and may feel slow on low spec devices depending on the amount of change.
4 |
5 | For this example we have changed the colour of all roads to bright red.
6 |
7 | * In our original demo code we are already changing the styling due to a quirk in the styling package for OpenLayers.
8 | ```
9 | style.layers.forEach(layer => {
10 | if(layer.paint && layer.paint['icon-color']) {
11 | layer.paint['icon-color'] = layer.paint['icon-color'].replace(',0)', ',1)');
12 | }
13 | });
14 | ```
15 | This code loops through all layers defined in the style and makes some minor changes. All we need to do is adapt this code to allow us to change the colour of the roads.
16 |
17 | * To make our style changes we include the following directly before the final `});` :
18 | ```
19 | if (layer['source-layer'].startsWith('road')) {
20 | layer.paint['line-color'] = '#FF0000';
21 | }
22 | ```
23 | This will check each layer source name to see whether it is beginning with "road". If the source layer begins with "road" the colour of the line will be changed to #FF0000 (bright red).
24 |
25 | This method works well if you are making small changes to a defined style.
26 |
27 | If you want to make complex changes or indeed create your own style this method can quickly become cumbersome and require a lot of code. In these cases you may find it easier to create your own style file or to include the JSON for the style directly in the code.
--------------------------------------------------------------------------------
/OSVectorTileAPI/StylingVTS/Adapting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Vector Tile API Demo
5 |
25 |
26 |
To connect to your mapping API:
27 |
28 | Go to the OS Data Hub ,
29 | Create a project,
30 | Add the OS Vector Tile API to your project
31 | Copy the project API Key, and enter it into the box above.
32 |
33 |
34 | Note that this sample will allow you to zoom the map down into Premium data layers.
35 | If your API key only has access to OS OpenData layers then those requests will fail.
36 |
37 |
Ordnance Survey ',
58 | projection: 'EPSG:' + wkid,
59 | tileGrid: new ol.tilegrid.TileGrid({
60 | extent,
61 | origin,
62 | resolutions,
63 | tileSize
64 | })
65 | };
66 | var source = new ol.source.VectorTile(options);
67 | var layer = new ol.layer.VectorTile({ source: source });
68 |
69 | // ol-mapbox-style doesn't like the 0 opacity for the icon colours, so we replace them here
70 | style.layers.forEach(layer => {
71 | if(layer.paint && layer.paint['icon-color']) {
72 | layer.paint['icon-color'] = layer.paint['icon-color'].replace(',0)', ',1)');
73 | }
74 | // Customise the road features, painting them red
75 | if (layer['source-layer'].startsWith('road')) {
76 | layer.paint['line-color'] = '#FF0000';
77 | }
78 | });
79 |
80 | // Setup the styling for the vector tile layer.
81 | // We use the default style fetched in the promise here, though "style" can be any JSON VTS style
82 | olms.stylefunction(layer, style, 'esri', resolutions, sprite, spriteImageUrl);
83 |
84 | source.on('tileloaderror', function(event) {
85 | message.classList.add("warning");
86 | message.textContent = 'Could not load a map tile. You may be attempting to access Premium data with an API key that only has access to OS OpenData.';
87 | instructions.classList.remove("hidden");
88 | });
89 |
90 | // Set the default center of the map view
91 | var center = [-121099, 7161610];
92 | if(wkid === 27700) {
93 | var point = new ol.geom.Point(center);
94 | point.transform('EPSG:3857', 'EPSG:27700');
95 | center = point.getCoordinates();
96 | }
97 |
98 | // Create the map object and connect it to the 'map' element in the html
99 | map = new ol.Map({
100 | target: 'map',
101 | layers: [layer],
102 | view: new ol.View({
103 | projection: 'EPSG:' + wkid,
104 | center: center,
105 | zoom: 7
106 | })
107 | });
108 | // Expand the attribution control, so that the the copyright message is visible
109 | map.getControls().forEach(control => {
110 | if(control instanceof ol.control.Attribution) {
111 | control.setCollapsed(false);
112 | }
113 | });
114 | })
115 | .catch(error => {
116 | message.classList.add("warning");
117 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
118 | instructions.classList.remove("hidden");
119 | });
120 | }
121 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/StylingVTS/InCode/README.md:
--------------------------------------------------------------------------------
1 | # Creating your own style within the code
2 |
3 | Especially suited to cases where you only require a small number of available features to be displayed. For example only buildings or (as in our example) national parks. There is no hard and fast rule when to use this method or when to use a separate file for the style, this is largely personal preference.
4 |
5 | For this example we will only load the styles relating to the national parks and a very faint representation of the landmass of GB.
6 |
7 | * We remove the line beginning with `var promise2 =` and remove `promise2, ` from the following section:
8 | ```
9 | Promise.all([promise1, promise2, promise3])
10 | ```
11 |
12 | * We replace `var style = results[1];` with:
13 | ```
14 | var style = {};
15 | ```
16 | This disables the automatic loading of the pre-defined style and sets up our in-line style variable.
17 |
18 | * Between the `{}` of the `var style = {};` we have just inserted we must now build the style JSON.
19 | We start with:
20 | ```
21 | "version": 8,
22 | "sprite": "https://api.os.uk/maps/vector/v1/vts/resources/sprites/sprite",
23 | "glyphs": "https://api.os.uk/maps/vector/v1/vts/resources/fonts/{fontstack}/{range}.pbf",
24 | "sources": {
25 | "esri": {
26 | "type": "vector",
27 | "url": "https://api.os.uk/maps/vector/v1/vts/"
28 | }
29 | },
30 | "layers": []
31 | ```
32 | This is identical to the starting definition of the pre-defined style. We leave the version number as it is when we check the original style file. In our current case this is 8.
33 | "sprite" and "glyphs" are design elements (symbol collections and text typeface). If you have your own this is where you would replace ours. For our demo we will continue to include the pre-defined ones.
34 | "sources" describes the source of the service and is best left as it currently is.
35 | Our main focus will be on the "layers" section.
36 |
37 | * Between the `[]` of `"layers": []` we can now include the various elements we want to style.
38 | To demonstrate this let's add the background colour for GB:
39 | ```
40 | {
41 | "id": "OS Open Zoomstack - Road/land",
42 | "type": "fill",
43 | "source": "esri",
44 | "source-layer": "land",
45 | "layout": {},
46 | "paint": {
47 | "fill-color": "#fefefe",
48 | "fill-outline-color": "#fefefe"
49 | }
50 | }
51 | ```
52 | This will give GB a very faint eggshell white background.
53 |
54 | * We add the remaining layers and their definitions in the same manner. Each individual section as described above is separated with a comma. Here is our full example for the "layers" attribute:
55 | ```
56 | "layers": [
57 | {
58 | "id": "OS Open Zoomstack - Road/land",
59 | "type": "fill",
60 | "source": "esri",
61 | "source-layer": "land",
62 | "layout": {},
63 | "paint": {
64 | "fill-color": "#fefefe",
65 | "fill-outline-color": "#fefefe"
66 | }
67 | },
68 | {
69 | "id": "OS Open Zoomstack - Road/national_parks",
70 | "type": "fill",
71 | "source": "esri",
72 | "source-layer": "national_parks",
73 | "maxzoom": 11.85,
74 | "layout": {},
75 | "paint": {
76 | "fill-color": "#E5F5CC",
77 | "fill-opacity": 0.5
78 | }
79 | },
80 | {
81 | "id": "OS Open Zoomstack - Road/national parks",
82 | "type": "symbol",
83 | "source": "esri",
84 | "source-layer": "national parks",
85 | "minzoom": 6.53,
86 | "layout": {
87 | "icon-image": "OS Open Zoomstack - Road/national parks",
88 | "icon-allow-overlap": true,
89 | "text-font": [
90 | "Arial Bold"
91 | ],
92 | "text-size": 10.6667,
93 | "text-anchor": "center",
94 | "text-field": "{_name}",
95 | "text-optional": true
96 | },
97 | "paint": {
98 | "icon-color": "rgba(240,240,240,0)",
99 | "text-color": "#44913B",
100 | "text-halo-color": "#F4F4EE",
101 | "text-halo-width": 1.51181
102 | }
103 | }
104 | ]
105 | ```
106 | This will provide the faint background for GB and also display national parks and their labels in the same style of the original style.
107 |
108 | * Finally we replace `var sprite = results[2];` with `var sprite = results[1];`, this is due to us removing one argument from the promise statement earlier.
109 |
110 | * To ensure the demo opens in an area where we have national parks we change the center from `var center = [-121099, 7161610];` to `var center = [-343282, 7259502];`.
111 |
112 | While you could change the style on-the-fly as in the very first example, this method is a little easier to maintain. If for some reason the style we pre-define changes it will not have any impact on your styling as you have "hard-coded" the style.
--------------------------------------------------------------------------------
/OSVectorTileAPI/StylingVTS/InCode/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | OS Vector Tile API Demo
5 |
25 |
26 |
To connect to your mapping API:
27 |
28 | Go to the OS Data Hub ,
29 | Create a project,
30 | Add the OS Vector Tile API to your project
31 | Copy the project API Key, and enter it into the box above.
32 |
33 |
34 | Note that this sample will allow you to zoom the map down into Premium data layers.
35 | If your API key only has access to OS OpenData layers then those requests will fail.
36 |
37 |
Ordnance Survey ',
116 | projection: 'EPSG:' + wkid,
117 | tileGrid: new ol.tilegrid.TileGrid({
118 | extent,
119 | origin,
120 | resolutions,
121 | tileSize
122 | })
123 | };
124 | var source = new ol.source.VectorTile(options);
125 | var layer = new ol.layer.VectorTile({ source: source });
126 |
127 | // ol-mapbox-style doesn't like the 0 opacity for the icon colours, so we replace them here
128 | style.layers.forEach(layer => {
129 | if(layer.paint && layer.paint['icon-color']) {
130 | layer.paint['icon-color'] = layer.paint['icon-color'].replace(',0)', ',1)');
131 | }
132 | });
133 |
134 | // Setup the styling for the vector tile layer.
135 | // We use the custom style that we defined earlier
136 | olms.stylefunction(layer, style, 'esri', resolutions, sprite, spriteImageUrl);
137 |
138 | source.on('tileloaderror', function(event) {
139 | message.classList.add("warning");
140 | message.textContent = 'Could not load a map tile. You may be attempting to access Premium data with an API key that only has access to OS OpenData.';
141 | instructions.classList.remove("hidden");
142 | });
143 |
144 | // Set the default center of the map view
145 | // This example is centered on the Lake District, which is one of the national parks within the zoomstack data
146 | var center = [-343282, 7259502];
147 | if(wkid === 27700) {
148 | var point = new ol.geom.Point(center);
149 | point.transform('EPSG:3857', 'EPSG:27700');
150 | center = point.getCoordinates();
151 | }
152 |
153 | // Create the map object and connect it to the 'map' element in the html
154 | map = new ol.Map({
155 | target: 'map',
156 | layers: [layer],
157 | view: new ol.View({
158 | projection: 'EPSG:' + wkid,
159 | center: center,
160 | zoom: 7
161 | })
162 | });
163 | // Expand the attribution control, so that the the copyright message is visible
164 | map.getControls().forEach(control => {
165 | if(control instanceof ol.control.Attribution) {
166 | control.setCollapsed(false);
167 | }
168 | });
169 | })
170 | .catch(error => {
171 | message.classList.add("warning");
172 | message.textContent = 'Could not connect to the API. Ensure you are entering a project API key for a project that contains the OS Vector Tile API';
173 | instructions.classList.remove("hidden");
174 | });
175 | }
176 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/StylingVTS/README.md:
--------------------------------------------------------------------------------
1 | # VTS styling
2 |
3 | Our Vector Tile Service provides a readily usable style, based on the available features. If you wish to adapt the existing style or create your own, you can easily do so.
4 |
5 | We will explain two options:
6 | * Dynamically adapting the pre-defined style
7 | * Creating your own style within the code
8 |
9 | We will explain both for OpenLayers, the principles are similar for MapBoxGL JS and Arc JS.
10 |
11 | It is also possible to create your own style from scratch and to host this locally on your server. This example has been omitted for the time being and will be added at a later date.
12 |
13 | Before we start please ensure you have a working version of the OS Data Hub VTS Demo for OpenLayers. You can find out how to get this in the Getting Started Guide.
14 |
15 | We recommend you take a look at the currently pre-defined styling for the service. You can get a copy of the pre-defined style directly from our VTS service by calling https://api.os.uk/maps/vector/v1/vts/resources/styles/?key={YourKey} in your browser.
16 |
17 | The result is [minified](https://en.wikipedia.org/wiki/Minification_(programming)) to keep the file size as small as possible, rendering it difficult to read for humans. Search online for a "JSON pretty print" converter which will turn the minified JSON data you received back into a more readable format.
18 |
19 | Take a look at this to get a better understanding of the structure. You will notice that each element contains a combination of defining attributes and style attributes. We can access, filter and change all of these, much like any other JSON data object.
20 |
--------------------------------------------------------------------------------
/OSVectorTileAPI/style.css:
--------------------------------------------------------------------------------
1 | /* Set the document to use flexbox layout */
2 | body {
3 | margin: 0;
4 | height: 100vh;
5 | display: flex;
6 | flex-direction: column;
7 | }
8 | /* ensure the map fills as much of the screen as possible */
9 | #map {
10 | flex: 1 0 auto;
11 | }
12 |
13 |
14 | /*
15 | NOTE:
16 | The CSS following this comment is for *styling purposes only* and is not essential for this demo to run
17 | - strip out the styles below if you want cleaner code
18 | */
19 |
20 | body {
21 | font-family: "Source Sans Pro", sans-serif;
22 | font-size:16px;
23 | color: #666666;
24 | min-width: 480px;
25 | }
26 |
27 |
28 | h1{
29 | font-size: 32px;
30 | font-weight: normal;
31 | line-height: 1.4;
32 | letter-spacing: 0.7px;
33 | margin: 0 0 10px;
34 | color: #453c90;
35 | }
36 |
37 | p{
38 | margin: 10px 0;
39 | }
40 |
41 | b{
42 | font-weight:600;
43 | }
44 | label{
45 | line-height: 1.7em;
46 | font-weight: 600;
47 | }
48 | input, button{
49 | font-size: 16px;
50 |
51 | }
52 |
53 | input[type="text"]{
54 | height: 24px;
55 | border-radius: 3px 0 0 3px;
56 | border: solid 1px #dddddd;
57 | padding: 12px 16px;
58 | width: calc(100% - 145px);
59 | background-color: #f5f5f5;
60 | color: #333333;
61 | font-size: 16px;
62 | margin: 0;
63 |
64 | }
65 | button{
66 | height: 50px;
67 | border-radius: 0 3px 3px 0;
68 | background-color: #453c90;
69 | color: #fff;
70 | font-family: "Source Sans Pro", sans-serif;
71 | padding: 4px 20px;
72 | border:0;
73 |
74 | }
75 |
76 |
77 | #header{
78 | text-align: center;
79 | background-color: #ffffff;
80 | padding: 20px;
81 | border-bottom: 1px solid #dddddd;
82 | box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
83 | z-index:1000
84 |
85 | }
86 |
87 |
88 | #instructions{
89 | position: fixed;
90 | background-color: #fff;
91 | padding: 10px 20px;
92 | top: 280px;
93 | width: 300px;
94 | left: calc(50% - 160px);
95 | z-index: 100;
96 | border-radius: 3px;
97 | box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.4);
98 | }
99 |
100 | .hidden{
101 | display:none;
102 | }
103 | .warning{
104 | color:#d40058;
105 | font-weight:400;
106 | }
107 | form{
108 | margin-top: 20px;
109 | text-align: left;
110 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OS Data Hub API Demos
2 |
3 | This repo contains working examples of how to use some of the products provided by the [OS Data Hub](https://osdatahub.os.uk/).
4 | The OS Data Hub is a service providing access to Ordnance Survey data as part of the [Open MasterMap Implementation Programme](https://www.ordnancesurvey.co.uk/business-and-government/products/open-mastermap.html).
5 |
6 | *Please note that the OS Maps API provided by the OS Data Hub is separate from the [OS Maps API for Enterprise](https://developer.ordnancesurvey.co.uk/os-maps-api-enterprise).
7 | For help with OS Maps API for Enterprise see the separate [API docs](https://apidocs.os.uk/docs/os-maps-overview) and [demos](https://github.com/OrdnanceSurvey/OS-Maps-API).*
8 |
9 | ## Software requirements
10 |
11 | All of the examples work with current web browsers. Internet Explorer is not supported.
12 |
13 | The airports examples also require [Node.JS](https://nodejs.org).
14 |
15 | ## Using the demos
16 |
17 | Each of the demos needs an API key to access the OS Data Hub APIs.
18 |
19 | Register for API keys using the [OS Data Hub](https://osdatahub.os.uk/):
20 | - Sign up to the OS Data Hub, and create a project
21 | - Add the OS Maps API, OS Features API, OS Vector Tile API and the OS Linked Identifiers API to your project
22 | - Copy the API key from the project page
23 |
24 | Note that some of the demos will allow you to zoom in to Premium data levels.
25 | If your OS Data Hub account is on the OS OpenData plan then these Premium Data requests will fail.
26 | To gain Premium data access, please refer to the [API Plans & Pricing page in the OS Data Hub](https://osdatahub.os.uk/plans).
27 |
28 | ### OS Features API, OS Maps API, OS Vector Tile API and OS Linked Identifiers API examples
29 |
30 | These examples are relatively simple, and are a good place to start understanding how to integrate the OS Data Hub APIs into a web application.
31 |
32 | These examples use plain HTML, CSS and JavaScript. You can run them by opening the index.html in each folder, or you can serve the examples using a web server, for example [live-server](https://www.npmjs.com/package/live-server).
33 |
34 | ### Airports examples
35 |
36 | The airports examples are a little more complex.
37 | Each displays a map provided by the OS Maps API, and overlays the map with features loaded from the OS Features API.
38 | We search for features that are airports within the current extent of the map, and draw the feature geometry on top of the map.
39 | Each airport is clickable, allowing you to see the additional feature properties that were returned from the WFS query.
40 |
41 | These examples demonstate two approaches for providing OS Data Hub API access to a web application, without sharing your API key with the browser.
42 |
43 | #### Airports-APIKey
44 | The Airports API Key example uses a small server to serve the web application and to act as a proxy for the OS Data Hub APIs.
45 | This proxy allows you to embed an API key into the server without exposing the API key to the end users of the application.
46 | To run the sample, install [Node.JS](https://nodejs.org) and then run the following commands from the `Airports-APIKey` directory:
47 |
48 |
49 | npm install
50 | npm start <API key>
51 |
52 |
53 | Note: A production application would need to add extra protection to the server, to ensure that the only people able
54 | to make API calls through the proxy are legitimate users of your application. Failure to do so would allow malicious
55 | users to make API requests with your API key, even though they do not have direct access to it.
56 |
57 | #### Airports-OAuth
58 | The Airports OAuth example uses a small server to serve the web application and to provide access to an access token for the OS Data Hub APIs.
59 | This approach allows you to embed an API key and secret into the server without exposing them the end users of the application.
60 | To run the sample, install [Node.JS](https://nodejs.org) and then run the following commands from the `Airports-OAuth` directory:
61 |
62 |
63 | npm install
64 | npm start <API key> <API secret>
65 |
66 |
67 | Note: A production application would need to add extra protection to the server, to ensure that the only people able
68 | to get the access token are legitimate users of your application. Failure to do so would allow malicious users to make
69 | API requests with the token, even though they do not have direct access to the API key and secret.
70 |
71 |
72 | ## License
73 |
74 | These demos are released under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0.html)
75 |
--------------------------------------------------------------------------------