JLSchaap.github.io/recorditems.html at master · JLSchaap/JLSchaap.github.io · GitHub

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
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>OGC API Records - Items Metadata Viewer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2em;
    }

    img.preview {
      margin-top: 1em;
      max-width: 100%;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>PDOK Metadata Viewer</h1>
  <div id="output">Laden...</div>
   <div id="previewContainer"></div>


  <script>
    function getParameterByName(name) {
      const url = new URL(window.location.href);
      return url.searchParams.get(name);
    }

    async function fetchData() {
      const id = getParameterByName('id');
      if (!id) {
        document.getElementById('output').innerText = 'Geen ID opgegeven in de URL. Gebruik ?id=...';
        return;
      }

      const apiUrl = `https://api.pdok.nl/catalogus/v1-demo/collections/metadata:main/items/${id}`;

      try {
        const response = await fetch(apiUrl);
        if (!response.ok) throw new Error(`Fout bij ophalen: ${response.status}`);
        const data = await response.json();

        // Toon metadata
        document.getElementById('output').innerHTML = `
          <h2>${data.properties?.title || 'Geen titel'}</h2>
          <p>${data.properties?.description || 'Geen beschrijving beschikbaar.'}</p>
        `;

          document.getElementById('output').innerHTML = `<h2>Resultaat voor ID: ${id}</h2><pre>${JSON.stringify(data, null, 2)}</pre>`;


        const previewLink = data.links?.find(link =>
          link.protocol === "WWW:LINK-1.0-http--image-thumbnail"
        );
        if (previewLink?.href) {
          const img = document.createElement('img');
          img.src = previewLink.href;
          img.alt = "Preview afbeelding";
          img.className = "preview";
          document.getElementById('previewContainer').appendChild(img);
        }

      } catch (error) {
        document.getElementById('output').innerText = `Fout: ${error.message}`;
      }
    }

    fetchData();
  </script>
</body>
</html>