Webové komponenty

Mapový komponent

Zobrazenie údajov v mape pomáha používateľom lepšie pochopiť prezentované údaje. Vždy poskytnite prezentované údaje tak, aby boli prístupné aj používateľom so zrakovým znevýhodnením.

Mapový komponent použite, keď chcete používateľom zobrazovať nejaký jav vzťahujúci sa k priestoru (napr. počet zaočkovaných proti COVID-19 na Slovensku v krajoch).

Obsah:

Z čoho sa skladá mapový komponent?

Interaktívna mapa sa skladá z:

1. nadpisu,
2. prepínaču pre výber zobrazenia v mape alebo prostredníctvom tabuľkového zobrazenia údajov,
3. rozbalovacieho poľa/polí pre výber atribútov,
4. názvu mapy podľa vybraného atribútu,
5. mapového okna s interaktívnou mapou respektíve tabuľkového zobrazenia údajov,
6. vysvetliviek,
7. linku pre stiahnutie zdrojových údajov,
8. označenia zdroja údajov.

Ako funguje interaktívna mapa?

Prepínač

Prepínačom je možné prepínať medzi mapovým a tabuľkovým zobrazením údajov. V takejto forme sú údaje prístupné aj pre zrakovo znevýhodnených používateľov.

Rozbaľovacie okná

V interaktívnej mape môžete použiť podľa rozsahu prezentovaných údajov 1 alebo 2 rozbaľovacie pole.

Ako použiť 1 rozbaľovacie pole?

Ak chcete používateľovi prezentovať iba jeden jav, tak v rozbaľovacom poli mu umožnite vybrať viaceré pohľady na tento jav. Napríklad obdobie: prírastok za predchádzajúci deň, prírastok za posledný mesiac alebo pomery ku populácii : počet zaočkovaných na 100 000 obyvateľov, na milión obyvateľov a podobne.

Nadpis mapy bude v iba jeden, hlavný, pretože zobrazujete iba jeden jav.

Počet zaočkovaných ľudí (1. aj 2. dávkou)

Stiahnuť údaje (CSV, 42 kb) Zdroj: NCZI

            
<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>

Ako použiť 2 rozbaľovacie polia?

Ak chcete používateľovi prezentovať viacero javov v jednej interaktívnej mape, hlavný nadpis musí vystihovať tieto javy - napríklad Koronavírus na Slovensku, a sním súvisiace javy. Ak to nie je možné, vytvorte pre každý jav samostatnú mapu. Nesnažte sa za každých okolností pridať všetko do jednej mapy, priveľa javov a informácií môže pôsobiť neprehľadne a používateľ môže byť zmätený alebo niečo prehliadnuť.

V jednom rozbaľovacom okne bude napríklad “obdobie” ako je uvedené vyššie a v druhom rozbaľovacom okne mu ponúknite daný jav. Po vybratí daného javu sa zobrazí skekundárny nadpis nad mapovým oknom, aby používateľ vedel, ktorý jav sa mu práve zobrazuje.

Koronavírus na Slovensku

za celé obdobie

Stiahnuť údaje (CSV, 42 kb) Zdroj: NCZI

            
<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>

Tabuľkové zobrazenie údajov v mape

Ak si používateľ zvolí tabuľkové zobrazenie údajov, tie sa zobrazia namiesto mapového okna. Tieto údaje sa zobrazia podľa zvolených atribútov podľa možností v rozbaľovacích oknách. Údaje v tabuľke je možné zoraďovať.

Koronavírus na Slovensku

za celé obdobie

Stiahnuť údaje (CSV, 42 kb) Zdroj: NCZI

            
<div data-module="idsk-interactive-map" class="idsk-interactive-map" id="map-id-2">
    <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-c" id="interactive-radios-c-1" type="radio" value="map" >
                            <label class="govuk-label govuk-radios__label" for="interactive-radios-c-1">Mapa</label>
                        </div>
                        <div class="govuk-radios__item idsk-intereactive-map__radio-table">
                            <input class="govuk-radios__input" name="interactive-radios-c" id="interactive-radios-c-2" type="radio" value="table" checked>
                            <label class="govuk-label govuk-radios__label" for="interactive-radios-c-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-2"><strong>Obdobie</strong></label>
                    </div>
                    <select class="idsk-interactive-map__select-time-period govuk-select" id="time-period-map-id-2" name="time-period-map-id-2">
                        <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-2"><strong>Ukazovateľ</strong></label>
                    </div>
                    <select class="idsk-interactive-map__select-indicator govuk-select" id="indicator-map-id-2" name="indicator-map-id-2">
                        <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>

Vysvetlivky

Po kliknutí na mapu sa používateľovi zobrazia údaje s popisom. Ak je potrebné pridať aj vysvetlivky, umiestnite ich v rámci mapového okna alebo pod mapové okno v súlade s kartografickými principmi.

Zdrojové údaje a zdroj údajov

Vždy pridajte k interaktívnej mape aj zdrojové údaje. Použite štandardné, strojovo spracovateľné údajové formáty ako napríklad csv, JSON, XML. Môžete dať používateľom na výber z viacerých formátov.

Uvádzajte, kto alebo čo je zdrojom údajov, ktoré prezentuje.

Rozšírené príklady pre mapový komponent

• Rozšírené príklady mapového komponentu