Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK Frontend
  2. Interactive map

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">
                        <fieldset class="govuk-fieldset">
                            <legend>Prepínač</legend>
                        <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>
                        </fieldset>
                    </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">
                        <fieldset class="govuk-fieldset">
                            <legend>Prepínač</legend>
                        <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>
                        </fieldset>
                    </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"
  }
}) }}