-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
324 lines (282 loc) · 20.1 KB
/
index.html
File metadata and controls
324 lines (282 loc) · 20.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<meta charset="utf-8">
<title>Publishing planning data on your website | Planning Data</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta name="color-scheme" content="light">
<link rel="stylesheet" href="https://www.planning.data.gov.uk/static/stylesheets/application.css">
</head>
<body class="govuk-template__body">
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="govuk-header app-header" role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container app-header__container">
<div class="govuk-header__logo app-header__logo">
<a href="https://www.planning.data.gov.uk" class="govuk-header__link govuk-header__link--homepage">
<span class="app-header__logotype">Planning Data</span>
</a>
</div>
</div>
</header>
<div class="govuk-width-container">
<nav aria-label="Breadcrumb" class="govuk-breadcrumbs govuk-!-margin-top-3">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="https://www.planning.data.gov.uk">Planning Data</a>
</li>
<li class="govuk-breadcrumbs__list-item" aria-current="page">Publishing planning data on your website</li>
</ol>
</nav>
<main class="govuk-main-wrapper" id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
```
<h1 class="govuk-heading-xl">Publishing planning data on your website</h1>
<p class="govuk-body-l">These pages show four example patterns for how a local planning authority can publish planning data on their website.</p>
<p class="govuk-body">The Ministry of Housing, Communities and Local Government (MHCLG) publishes <a class="govuk-link" href="https://digital-land.github.io/specification/">data specifications</a> that set out the fields and formats local planning authorities should use when publishing planning datasets. These patterns show how that data can then be presented to the public.</p>
<p class="govuk-body">The first three patterns are illustrated using Article 4 Directions as the example dataset. The fourth shows how a more complex group of related datasets can be presented together, using Local Plans as the example. All patterns can be applied to other planning datasets your authority publishes.</p>
<div class="govuk-inset-text">
These are example pages for demonstration purposes. West Brackenfield District Council is a fictional authority used to illustrate the patterns.
</div>
<h2 class="govuk-heading-l govuk-!-margin-top-8">URLs and how they are used</h2>
<p class="govuk-body">When you publish planning data, you need to provide URLs in your dataset that point back to your website. There are four types of URL involved.</p>
<style>
.url-diagram { border: 1px solid #b1b4b6; background: #fff; padding: 0; margin: 20px 0 30px; font-family: "GDS Transport", Arial, sans-serif; }
.url-diagram-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.url-diagram-main { padding: 24px; border-right: 1px solid #b1b4b6; }
.url-diagram-detail { padding: 24px; }
.url-diagram-main-top { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #b1b4b6; }
.url-diagram-detail-top { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #b1b4b6; }
.url-diagram-page { background: #f3f2f1; border: 1px solid #b1b4b6; padding: 16px; font-size: 14px; }
.url-diagram-page-title { font-weight: 700; font-size: 16px; margin-bottom: 10px; color: #0b0c0c; }
.url-diagram-page-body { background: #0b0c0c; height: 8px; border-radius: 1px; margin-bottom: 6px; }
.url-diagram-page-body.short { width: 70%; }
.url-diagram-page-body.med { width: 85%; }
.url-diagram-page-link { color: #1d70b8; text-decoration: underline; font-size: 13px; margin: 8px 0 4px; display: block; }
.url-diagram-page-link-body { background: #0b0c0c; height: 7px; border-radius: 1px; margin-bottom: 5px; }
.url-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 2px; color: #fff; margin-bottom: 6px; }
.url-tag--webpage { background: #4c2c92; }
.url-tag--documentation { background: #007a7a; }
.url-tag--document { background: #1d70b8; }
.url-tag--endpoint { background: #505a5f; }
.url-diagram-label { font-size: 13px; color: #505a5f; line-height: 1.4; margin-top: 4px; }
.url-diagram-label code { font-size: 12px; background: #f3f2f1; padding: 1px 4px; border-radius: 2px; color: #0b0c0c; word-break: break-all; }
.url-diagram-footer { padding: 16px 24px; background: #f3f2f1; border-top: 1px solid #b1b4b6; font-size: 13px; color: #505a5f; }
.url-diagram-footer code { font-size: 12px; background: #fff; padding: 1px 5px; border-radius: 2px; border: 1px solid #b1b4b6; color: #0b0c0c; word-break: break-all; }
@media (max-width: 640px) {
.url-diagram-row { grid-template-columns: 1fr; }
.url-diagram-main { border-right: none; border-bottom: 1px solid #b1b4b6; }
.url-diagram-main-top { border-bottom: 1px solid #b1b4b6; }
.url-diagram-detail-top { border-bottom: 1px solid #b1b4b6; }
}
.url-pattern-box { background: #f3f2f1; border-left: 4px solid #505a5f; padding: 12px 16px; margin: 12px 0 0; font-size: 14px; }
.url-pattern-box dt { font-weight: 700; font-size: 13px; color: #505a5f; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; margin-top: 10px; }
.url-pattern-box dt:first-child { margin-top: 0; }
.url-pattern-box dd { margin: 0 0 2px; }
.url-pattern-box code { font-size: 13px; background: #fff; padding: 2px 6px; border-radius: 2px; border: 1px solid #b1b4b6; color: #0b0c0c; word-break: break-all; display: inline-block; }
</style>
<!-- Diagram -->
<div class="url-diagram" role="img" aria-label="Diagram showing the three types of URL: webpage URL, documentation-url, and document-url">
<div class="url-diagram-row">
<div class="url-diagram-main">
<div class="url-diagram-main-top">
<span class="url-tag url-tag--webpage">Webpage URL</span>
<div class="url-diagram-label" style="margin-bottom:12px">The URL of the page on your website that contains information about this dataset — for example, your Article 4 Directions page.</div>
<div class="url-diagram-page">
<div class="url-diagram-page-title">Article 4 Directions</div>
<div class="url-diagram-page-body med"></div>
<div class="url-diagram-page-body short"></div>
<div class="url-diagram-page-body med"></div>
<span class="url-diagram-page-link">Direction 1 name</span>
<div class="url-diagram-page-link-body med"></div>
<div class="url-diagram-page-link-body short"></div>
<span class="url-diagram-page-link">Direction 2 name</span>
<div class="url-diagram-page-link-body"></div>
<div class="url-diagram-page-link-body short"></div>
<div style="margin-top:12px; padding-top:10px; border-top:1px solid #b1b4b6">
<div style="font-weight:700; font-size:13px; margin-bottom:6px; color:#0b0c0c">Data</div>
<span class="url-diagram-page-link">Direction areas (CSV)</span>
</div>
</div>
</div>
<div>
<span class="url-tag url-tag--endpoint">Endpoint URL</span>
<div class="url-diagram-label">The URL of the CSV or GeoJSON file itself — the direct download link for the data.</div>
</div>
</div>
<div class="url-diagram-detail">
<div class="url-diagram-detail-top">
<span class="url-tag url-tag--documentation">documentation-url</span>
<div class="url-diagram-label" style="margin-bottom:12px">The URL of the page (or anchor on a page) that introduces a specific record. Goes into your CSV in the <code>documentation-url</code> field. Each record must have a unique URL.</div>
<div class="url-diagram-page">
<div class="url-diagram-page-title">Direction 1 name</div>
<div class="url-diagram-page-body med"></div>
<div class="url-diagram-page-body short"></div>
<div class="url-diagram-page-body med"></div>
<div style="margin-top:12px; padding-top:10px; border-top:1px solid #b1b4b6">
<span class="url-diagram-page-link">Direction 1 document (PDF, 1.9MB)</span>
</div>
</div>
</div>
<div>
<span class="url-tag url-tag--document">document-url</span>
<div class="url-diagram-label">The URL of the legal document itself (the PDF). Goes in the <code>document-url</code> field in your CSV.</div>
</div>
</div>
</div>
<div class="url-diagram-footer">
<strong>From the <a href="https://www.planning.data.gov.uk/guidance/specifications/article-4-direction#article-4-direction-dataset" style="color:#1d70b8">Article 4 Direction data specification</a>:</strong> each record must have a unique <code>documentation-url</code>. You can use a separate page per record, or list several on one page with anchor links — for example <code>yourwebsite.gov.uk/article-4-directions#WBDC-A4D-001</code>.
</div>
</div>
<h2 class="govuk-heading-l govuk-!-margin-top-8">The four patterns</h2>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<h3 class="govuk-heading-m">
<a class="govuk-link" href="all-on-one-page.html">All on one page</a>
</h3>
<p class="govuk-body">All records are shown on a single page. Each record has its own section with an anchor link in a table of contents at the top.</p>
<p class="govuk-body"><strong>Best when</strong> you have a small number of records (fewer than 10) and users are likely to want to browse all of them at once.</p>
<dl class="url-pattern-box">
<dt>Webpage URL</dt>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions</code></dd>
<dt>documentation-url (per record)</dt>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions<strong>#WBDC-A4D-001</strong></code></dd>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions<strong>#WBDC-A4D-002</strong></code></dd>
</dl>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<h3 class="govuk-heading-m">
<a class="govuk-link" href="one-per-page.html">One per page</a>
</h3>
<p class="govuk-body">An index page lists all records with links to individual pages, one for each record containing the full detail.</p>
<p class="govuk-body"><strong>Best when</strong> each record has significant detail, or users are likely to search for a specific record by name or location.</p>
<dl class="url-pattern-box">
<dt>Webpage URL (index)</dt>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions</code></dd>
<dt>documentation-url (per record)</dt>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions/<strong>WBDC-A4D-001</strong></code></dd>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions/<strong>WBDC-A4D-002</strong></code></dd>
</dl>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<h3 class="govuk-heading-m">
<a class="govuk-link" href="finder.html">Using a finder</a>
</h3>
<p class="govuk-body">A filterable, searchable table allows users to find records by area, type, or date. This example also shows pagination for larger datasets.</p>
<p class="govuk-body"><strong>Best when</strong> you have a large number of records, or users need to filter by location, type, or date to find what they need.</p>
<dl class="url-pattern-box">
<dt>Webpage URL (finder)</dt>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions</code></dd>
<dt>documentation-url (per record)</dt>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions/<strong>WBDC-A4D-001</strong></code></dd>
<dd><code>westbrackenfield.gov.uk/planning/article-4-directions/<strong>WBDC-A4D-002</strong></code></dd>
<dt>Note</dt>
<dd>The finder itself is used to browse; each individual record still needs its own page or anchor URL for the <code>documentation-url</code> field.</dd>
</dl>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<h3 class="govuk-heading-m">
<a class="govuk-link" href="west-brackenfield-local-plans.html">Complex datasets</a>
</h3>
<p class="govuk-body">A richer page showing how multiple related datasets can be presented together, with tabbed navigation, a timetable visualisation, and open data downloads. Uses Local Plans (plan and plan-timetable datasets) as the example.</p>
<p class="govuk-body"><strong>Best when</strong> a topic spans several related datasets that users need to understand together, and where the relationships between the data matter as much as the individual records.</p>
<dl class="url-pattern-box">
<dt>Webpage URL</dt>
<dd><code>westbrackenfield.gov.uk/planning/local-plans</code></dd>
<dt>documentation-url (per plan)</dt>
<dd><code>westbrackenfield.gov.uk/planning/local-plans<strong>#WBDC-LP2042</strong></code></dd>
<dd><code>westbrackenfield.gov.uk/planning/local-plans<strong>#WBDC-LP2036</strong></code></dd>
</dl>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<h2 class="govuk-heading-l govuk-!-margin-top-8">About the examples</h2>
<p class="govuk-body">The first three patterns use Article 4 Direction data for the fictional West Brackenfield District Council, following the <a class="govuk-link" href="https://digital-land.github.io/specification/specification/article-4-direction/">Article 4 Direction data specification</a> published by MHCLG. Article 4 Directions make a good illustration because they vary in complexity, have clear geographic boundaries, and are a dataset many LPAs already publish in some form.</p>
<p class="govuk-body">The complex datasets example uses Local Plans data for the same fictional authority, covering the <a class="govuk-link" href="https://digital-land.github.io/specification/specification/plan/">plan and plan-timetable specifications</a>. This shows how a topic that spans multiple related datasets can be presented in a coherent, useful way for the public.</p>
<table class="govuk-table">
<caption class="govuk-table__caption govuk-table__caption--s">Article 4 Directions used in the first three examples</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Reference</th>
<th class="govuk-table__header" scope="col">Name</th>
<th class="govuk-table__header" scope="col">Confirmed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>WBDC-A4D-001</code></td>
<td class="govuk-table__cell">Brackenfield Old Town</td>
<td class="govuk-table__cell">14 March 2019</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>WBDC-A4D-002</code></td>
<td class="govuk-table__cell">Fenwick Road</td>
<td class="govuk-table__cell">22 July 2021</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>WBDC-A4D-003</code></td>
<td class="govuk-table__cell">Stonemoor Lane</td>
<td class="govuk-table__cell">5 November 2018</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>WBDC-A4D-004</code></td>
<td class="govuk-table__cell">Holt Green</td>
<td class="govuk-table__cell">9 February 2023</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>WBDC-A4D-005</code></td>
<td class="govuk-table__cell">Thornwick Business Park</td>
<td class="govuk-table__cell">17 September 2020</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>WBDC-A4D-006</code></td>
<td class="govuk-table__cell">Millgate Riverside</td>
<td class="govuk-table__cell">30 May 2022</td>
</tr>
</tbody>
</table>
<table class="govuk-table">
<caption class="govuk-table__caption govuk-table__caption--s">Local Plans data used in the complex datasets example</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Dataset</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>plan</code></td>
<td class="govuk-table__cell">Adopted, emerging, and superseded development plan documents for West Brackenfield</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><code>plan-timetable</code></td>
<td class="govuk-table__cell">Key stages for the preparation of each development plan document, including confirmed and planned dates</td>
</tr>
</tbody>
</table>
<p class="govuk-body govuk-!-font-size-14">All data published under the <a class="govuk-link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a>.</p>
</div>
</div>
```
</main>
</div>
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<div class="govuk-footer__meta-custom">
The <a class="govuk-footer__link" href="https://github.com/digital-land/documentation-url-examples/">software</a> and <a class="govuk-footer__link" href="https://github.com/digital-land/documentation-url-examples/">data</a> used to build these pages is <a class="govuk-footer__link" href="https://github.com/digital-land/documentation-url-examples/blob/master/LICENSE">open source</a>.
</div>
<svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
<path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"/>
</svg>
<span class="govuk-footer__licence-description">
All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script src="https://www.planning.data.gov.uk/static/javascripts/govuk/govuk-frontend.js"></script>
<script>window.GOVUKFrontend.initAll();</script>
</body>
</html>