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

     1  {{- /*gotype: github.com/PDOK/gokoala/internal/engine.TemplateData*/ -}}
     2  {{ define "content" }}
     3  {{ if .Config.OgcAPI.Styles }}
     4    <hgroup>
     5      <h1 class="title" id="title">{{ .Config.Title }} - {{ i18n "Styles" }}</h1>
     6    </hgroup>
     7    <div class="row py-3">
     8      <div class="col-md-12">
     9        <p>
    10          {{ i18n "StylesText" }}
    11        </p>
    12      </div>
    13    </div>
    14    <div class="row">
    15      <div class="col-md-6">
    16        {{ $baseUrl := .Config.BaseURL }}
    17        {{ $defaultSrs := (index .Config.OgcAPI.Tiles.SupportedSrs 0)}}
    18        {{ $projections := dict "EPSG:28992" "NetherlandsRDNewQuad" "EPSG:3035" "EuropeanETRS89_LAEAQuad" "EPSG:3857" "WebMercatorQuad" }}
    19        {{ $defaultStyle := .Config.OgcAPI.Styles.Default }}
    20        <table class="table table-borderless table-sm w-auto">
    21          <tbody>
    22            <tr>
    23            {{ if and (eq (len .Config.OgcAPI.Styles.SupportedStyles) 1) (eq (len .Config.OgcAPI.Tiles.SupportedSrs) 1) }}
    24              <td class="w-auto text-nowrap fw-bold">
    25                Style
    26              </td>
    27              <td class="w-auto px-2">
    28                {{ (index .Config.OgcAPI.Styles.SupportedStyles 0).Title }} ({{ (get $projections $defaultSrs.Srs) }})
    29              </td>
    30            {{ else }}
    31              <td class="w-auto text-nowrap">
    32                <label for="styles" class="col-form-label fw-bold">Style</label>
    33              </td>
    34              <td class="w-auto px-2">
    35                {{ $supportedSrs := .Config.OgcAPI.Tiles.SupportedSrs }}
    36                <select id="styles" class="form-select">
    37                  {{ range $style := .Config.OgcAPI.Styles.SupportedStyles }}
    38                  {{ range $srs := $supportedSrs }}
    39                  {{ $projection := get $projections (index $srs).Srs }}
    40                  <option value='{"style":"{{ $style.ID }}__{{ lower $projection }}","proj":"{{ $projection }}"}'>{{ $style.Title }} ({{ get $projections (index $srs).Srs }})</option>
    41                  {{ end }}
    42                  {{ end }}
    43                </select>
    44              </td>
    45            {{ end }}
    46            </tr>
    47            <tr>
    48              <td class="w-auto text-nowrap fw-bold">
    49                URL
    50              </td>
    51              <td class="w-auto px-2">
    52                <a id="href-url" href="styles/{{ $defaultStyle }}__{{ get $projections $defaultSrs.Srs | lower }}"
    53                   aria-label="{{ i18n "View" }} style">
    54                   {{ $baseUrl }}/styles/{{ $defaultStyle }}__{{ get $projections $defaultSrs.Srs | lower }}
    55                </a>
    56              </td>
    57            </tr>
    58            <tr>
    59              <td class="w-auto text-nowrap fw-bold">
    60                {{ i18n "Format" }}
    61              </td>
    62              <td class="w-auto px-2">
    63                Mapbox style
    64              </td>
    65            </tr>
    66            <tr>
    67              <td class="w-auto text-nowrap fw-bold">
    68                Metadata
    69              </td>
    70              <td class="w-auto px-2">
    71                <a id="href-metadata" href="styles/{{ $defaultStyle }}__{{ get $projections $defaultSrs.Srs | lower }}/metadata"
    72                   aria-label="{{ i18n "View" }} style metadata">
    73                  {{ i18n "StyleMetadata" }}
    74                </a>
    75              </td>
    76            </tr>
    77          </tbody>
    78        </table>
    79      </div>
    80      <div class="col-md-6">
    81        <link rel="stylesheet" type="text/css" href="view-component/styles.css">
    82        <script type="text/javascript" src="view-component/main.js"></script>
    83        <script type="text/javascript" src="view-component/polyfills.js"></script>
    84        <script type="text/javascript" src="view-component/runtime.js"></script>
    85        <p>{{ i18n "StylingExample" }}:</p>
    86        <app-vectortile-view id="styles-vectortile-view" class="card vectortile-view"
    87          tile-url="{{ $baseUrl }}/tiles/{{ get $projections $defaultSrs.Srs }}"
    88          style-url="{{ $baseUrl }}/styles/{{ $defaultStyle }}__{{ get $projections $defaultSrs.Srs | lower }}?f=mapbox"
    89          center-x="5.3896944" center-y="52.1562499">
    90        </app-vectortile-view>
    91      </div>
    92    </div>
    93    <script>
    94      document.addEventListener('input', function (event) {
    95        // only operate on styles dropdown
    96        if (event.target.id !== 'styles') return;
    97        // update table fields
    98        const value = JSON.parse(event.target.value);
    99        const selectedStyle = value.style;
   100        const selectedProjection = value.proj;
   101        const urlHref = document.getElementById('href-url');
   102        const metadataHref = document.getElementById('href-metadata');
   103        urlHref.textContent = '{{ $baseUrl }}/styles/' + selectedStyle;
   104        urlHref.setAttribute('href', 'styles/' + selectedStyle);
   105        metadataHref.setAttribute('href', 'styles/' + selectedStyle + '/metadata');
   106        // update style-url in app-vectortile-view
   107        const viewer = document.getElementById('styles-vectortile-view')
   108        viewer.setAttribute('tile-url', '{{ $baseUrl }}/tiles/' + selectedProjection)
   109        viewer.setAttribute('style-url', '{{ $baseUrl }}/styles/' + selectedStyle + '?f=mapbox')
   110      }, false);
   111    </script>
   112    <noscript>Enable Javascript to display vector tiles viewer</noscript>
   113  {{ end }}
   114  {{ end }}