Interactive map ID-SK

Interactive map - ukážka mapového komponentu 1

(open in a new window)

Code

Markup

<div data-module="idsk-interactive-map" class="idsk-interactive-map" id="map-id">
    <h2 class="govuk-heading-l">Počet zaočkovaných ľudí (1. aj 2. dávkou)</h2>
    <div class="idsk-interactive-map__header">
        <div class="idsk-interactive-map__header-controls">
            <div class="idsk-interactive-map__header-radios">
                <div class="govuk-form-group">
                    <div class="govuk-radios govuk-radios--inline">
                        <div class="govuk-radios__item idsk-intereactive-map__radio-map">
                            <input class="govuk-radios__input" name="interactive-radios-a" id="interactive-radios-a-1" type="radio" value="map" checked>
                            <label class="govuk-label govuk-radios__label" for="interactive-radios-a-1">Mapa</label>
                        </div>
                        <div class="govuk-radios__item idsk-intereactive-map__radio-table">
                            <input class="govuk-radios__input" name="interactive-radios-a" id="interactive-radios-a-2" type="radio" value="table" >
                            <label class="govuk-label govuk-radios__label" for="interactive-radios-a-2">Tabuľka</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="idsk-interactive-map__header-selects">
                <div class="govuk-form-group">
                    <div class="govuk-label-wrapper">
                        <label class="govuk-label" for="time-period-map-id"><strong>Obdobie</strong></label>
                    </div>
                    <select class="idsk-interactive-map__select-time-period govuk-select" id="time-period-map-id" name="time-period-map-id">
                        <option value="30">Posledný mesiac</option>
                        <option value="90">Posledné 3 mesiace</option>
                        <option value="180">Posledných 6 mesiacov</option>
                        <option value="" selected="selected">Celé obdobie</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="idsk-interactive-map__body">
        <div class="idsk-interactive-map__map">
            <iframe class="idsk-interactive-map__map-iframe" data-src="/vzory/interactive-map-sample" src="/vzory/interactive-map-sample" title="Príkladová mapa na demonštráciu koponentu - interaktívna mapa"></iframe>
        </div>
        <div class="idsk-interactive-map__table">
            <iframe class="idsk-interactive-map__table-iframe" data-src="/vzory/interactive-table-sample" title="Príkladová tabuľka na demonštráciu koponentu - interaktívna mapa"></iframe>
        </div>
    </div>
    <div class="idsk-interactive-map__meta">
        <a class="govuk-link idsk-interactive-map__meta-data" title="Stiahnuť údaje (CSV, 42 kb)" href="/public/assets/data/korona.gov.sk.csv" download>Stiahnuť údaje (CSV, 42 kb)</a>
        <span class="idsk-interactive-map__meta-source">Zdroj: NCZI</span>
    </div>
</div>

Macro

{% from "interactive-map/macro.njk" import idskInteractiveMap %}

{{ idskInteractiveMap({
  "uniqueId": "map-id",
  "title": "Počet zaočkovaných ľudí (1. aj 2. dávkou)",
  "mapIframeSrc": "/vzory/interactive-map-sample",
  "mapIframeTitle": "Príkladová mapa na demonštráciu koponentu - interaktívna mapa",
  "tableIframeSrc": "/vzory/interactive-table-sample",
  "tableIframeTitle": "Príkladová tabuľka na demonštráciu koponentu - interaktívna mapa",
  "radioControlsName": "interactive-radios-a",
  "dataSource": "NCZI",
  "dataDownload": {
    "text": "Stiahnuť údaje (CSV, 42 kb)",
    "link": "/public/assets/data/korona.gov.sk.csv"
  }
}) }}

Interactive map - ukážka mapového komponentu 2

(open in a new window)

Code

Markup

<div data-module="idsk-interactive-map" class="idsk-interactive-map" id="map-id-1">
    <h2 class="govuk-heading-l">Koronavírus na Slovensku</h2>
    <div class="idsk-interactive-map__header">
        <div class="idsk-interactive-map__header-controls">
            <div class="idsk-interactive-map__header-radios">
                <div class="govuk-form-group">
                    <div class="govuk-radios govuk-radios--inline">
                        <div class="govuk-radios__item idsk-intereactive-map__radio-map">
                            <input class="govuk-radios__input" name="interactive-radios-b" id="interactive-radios-b-1" type="radio" value="map" checked>
                            <label class="govuk-label govuk-radios__label" for="interactive-radios-b-1">Mapa</label>
                        </div>
                        <div class="govuk-radios__item idsk-intereactive-map__radio-table">
                            <input class="govuk-radios__input" name="interactive-radios-b" id="interactive-radios-b-2" type="radio" value="table" >
                            <label class="govuk-label govuk-radios__label" for="interactive-radios-b-2">Tabuľka</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="idsk-interactive-map__header-selects">
                <div class="govuk-form-group">
                    <div class="govuk-label-wrapper">
                        <label class="govuk-label" for="time-period-map-id-1"><strong>Obdobie</strong></label>
                    </div>
                    <select class="idsk-interactive-map__select-time-period govuk-select" id="time-period-map-id-1" name="time-period-map-id-1">
                        <option value="30">Posledný mesiac</option>
                        <option value="90">Posledné 3 mesiace</option>
                        <option value="180">Posledných 6 mesiacov</option>
                        <option value="" selected="selected">Celé obdobie</option>
                    </select>
                </div>
                <div class="govuk-form-group">
                    <div class="govuk-label-wrapper">
                        <label class="govuk-label" for="indicator-map-id-1"><strong>Ukazovateľ</strong></label>
                    </div>
                    <select class="idsk-interactive-map__select-indicator govuk-select" id="indicator-map-id-1" name="indicator-map-id-1">
                        <option value="">Celkový stav</option>
                        <option value="dose1">Počet zaočkovaných 1. dávkou</option>
                        <option value="dose2">Počet zaočkovaných 2. dávkou</option>
                    </select>
                </div>
            </div>
        </div>
        <h3 class="govuk-heading-m">
            <span class="idsk-interactive-map__current-indicator"></span> za <span class="idsk-interactive-map__current-time-period">celé obdobie</span>
        </h3>
    </div>
    <div class="idsk-interactive-map__body">
        <div class="idsk-interactive-map__map">
            <iframe class="idsk-interactive-map__map-iframe" data-src="/vzory/interactive-map-sample" src="/vzory/interactive-map-sample" title="Príkladová mapa na demonštráciu koponentu - interaktívna mapa"></iframe>
        </div>
        <div class="idsk-interactive-map__table">
            <iframe class="idsk-interactive-map__table-iframe" data-src="/vzory/interactive-table-sample" title="Príkladová tabuľka na demonštráciu koponentu - interaktívna mapa"></iframe>
        </div>
    </div>
    <div class="idsk-interactive-map__meta">
        <a class="govuk-link idsk-interactive-map__meta-data" title="Stiahnuť údaje (CSV, 42 kb)" href="/public/assets/data/korona.gov.sk.csv" download>Stiahnuť údaje (CSV, 42 kb)</a>
        <span class="idsk-interactive-map__meta-source">Zdroj: NCZI</span>
    </div>
</div>

Macro

{% from "interactive-map/macro.njk" import idskInteractiveMap %}

{{ idskInteractiveMap({
  "uniqueId": "map-id-1",
  "title": "Koronavírus na Slovensku",
  "mapIframeSrc": "/vzory/interactive-map-sample",
  "mapIframeTitle": "Príkladová mapa na demonštráciu koponentu - interaktívna mapa",
  "tableIframeSrc": "/vzory/interactive-table-sample",
  "tableIframeTitle": "Príkladová tabuľka na demonštráciu koponentu - interaktívna mapa",
  "radioControlsName": "interactive-radios-b",
  "indicatorOptions": [
    {
      "title": "Celkový stav",
      "value": ""
    },
    {
      "title": "Počet zaočkovaných 1. dávkou",
      "value": "dose1"
    },
    {
      "title": "Počet zaočkovaných 2. dávkou",
      "value": "dose2"
    }
  ],
  "dataSource": "NCZI",
  "dataDownload": {
    "text": "Stiahnuť údaje (CSV, 42 kb)",
    "link": "/public/assets/data/korona.gov.sk.csv"
  }
}) }}