github.com/PDOK/gokoala@v0.50.6/internal/ogc/features/templates/feature.go.html (about)

     1  {{- /*gotype: github.com/PDOK/gokoala/internal/engine.TemplateData*/ -}}
     2  {{define "content"}}
     3  {{ $cfg := .Config }}
     4  {{ $baseUrl := $cfg.BaseURL }}
     5  <script>
     6      function crsChange(value) {
     7          const url = new URL(window.location.href);
     8          url.searchParams.set('crs', value);
     9          window.location.href = url.toString();
    10      }
    11  </script>
    12  
    13  <hgroup>
    14      <h1 class="title h2" id="title">{{ .Config.Title }} - {{ if and .Params.Metadata .Params.Metadata.Title }}{{.Params.Metadata.Title }}{{ else }}{{ .Params.CollectionID }}{{ end }}</h1>
    15  </hgroup>
    16  
    17  <section class="row py-3">
    18      <div class="col-md-8 col-sm-12">
    19          <div class="row mb-2">
    20              <label for="srs-select" class="col-sm-2 col-form-label fw-bold">{{ i18n "Projection" }}</label>
    21              <div class="col-sm">
    22                  <select id="srs-select" class="form-select" onchange="crsChange(this.value)">
    23                      <option value="http://www.opengis.net/def/crs/OGC/1.3/CRS84" selected>
    24                          http://www.opengis.net/def/crs/OGC/1.3/CRS84
    25                      </option>
    26                      {{ range $index, $srs := .Config.OgcAPI.Features.ProjectionsForCollection $.Params.CollectionID }}
    27                      <option value=http://www.opengis.net/def/crs/EPSG/0/{{ trimPrefix "EPSG:" $srs }}>http://www.opengis.net/def/crs/EPSG/0/{{ $srs }}</option>
    28                      {{ end }}
    29                  </select>
    30              </div>
    31          </div>
    32      </div>
    33  
    34      <div class="col-md-8 col-sm-12">
    35          <table class="table table-striped">
    36              <thead>
    37              <tr>
    38                  <th colspan="2">{{ .Params.FeatureID }}</th>
    39              </tr>
    40              </thead>
    41              <tbody>
    42              {{ range $key, $value := .Params.Properties }}
    43              <tr>
    44                  <td class="w-25">{{ $key }}</td>
    45                  <td>{{ $value }}</td>
    46              </tr>
    47              {{ end }}
    48              </tbody>
    49          </table>
    50      </div>
    51  
    52      <div class="col-md-4 col-sm-12">
    53          <link rel="stylesheet" type="text/css" href="view-component/styles.css">
    54          <script type="text/javascript" src="view-component/main.js"></script>
    55          <script type="text/javascript" src="view-component/polyfills.js"></script>
    56          <script type="text/javascript" src="view-component/runtime.js"></script>
    57          <app-feature-view id="viewer" background-map="{{ $cfg.OgcAPI.Features.Basemap }}" show-bounding-box-button="false"></app-feature-view>
    58          <script type="module">
    59              const url = new URL(window.location.href)
    60              url.searchParams.set('f', 'json');
    61              const viewer = document.getElementById('viewer');
    62              viewer.setAttribute('items-url', url);
    63  
    64              if (url.searchParams.get('crs') !== null) {
    65                  let crs = url.searchParams.get('crs');
    66                  document.getElementById('srs-select').value = crs;
    67                  viewer.setAttribute('projection', crs)
    68              }
    69          </script>
    70          <noscript>Enable Javascript to view features on a map</noscript>
    71      </div>
    72  </section>
    73  {{end}}