Vektor

Celá mapa je tvořena vektorovým písmem, které umožňuje změny pomocí CSS stylů.

Body zájmů

Jednoduché přidávání libovolného počtu bodů zájmu, včetně přednastavených 110 největších měst ČR.


Co to vlastně je?

CEZET Map je znakový font, který umožnuje jednoduše vytvořit mapu České republiky za použití HTML a CSS. Každý kraj může být stylován zvlášť pomocí CSS stylů. Díky použití vektorové grafiky bude mapa na každém zařízení ostrá a kvalitní.

Jak se používá?

Každý kraj je znak v písmu, který je umístěn a velikostně přizpůsoben tak, aby při seskupení všech potřebných znaků došlo ke složení České Republiky. Pro kraje na mapě jsou použita malá písmena A-N. Na mapu lze také přidat bod zájmu. Tento bod se pozicuje procentuálně k rozměrům mapy.

Ukázky použití

Instalace přes Bower

bower install cezetmap

Přidání externích CSS souborů

Soubor cezetmap.css obsahuje základní stylování.
Soubor cezetmap.custom.css je vyhrazen pro uživatelské úpravy.

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" />
<link rel="stylesheet" href="cezetmap/css/cezetmap.custom.css" />

Přidání externích JS souborů pro podporu hover a click událostí (volitelné)

JavaScript není nutný pro zobrazení mapy v moderních prohlížečích!

Skripty na stránky umístěte, pokud potřebujete podporu interaktivních událostí (hover, click) a podporu pseudoselektoru pro prohlížeč Internet Explorer 7.

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>

<!-- podpora pro IE 7 a mensi -->
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"> </script> <![endif]-->

<!-- CEZET Map skripty -->
<script src="cezetmap/js/cezetmap.js"> </script>

Zobrazení krajů

Kraje: Zlínský, Moravskoslezský, Jihomoravský, Olomoucký, Vysočina, Pardubický, Královehradecký, Jihočeský, Hlavní město Praha, Středočeský, Liberecký, Plzeňský, Ústecký, Karlovarský.

Moravskoslezský kraj v následujícím výpisu zdrojového kódu bude klikatelný, pokud na stránky přidáte JavaScriptový soubor cezetmap.js.

Pokud potřebujete přidat popisky pro jednotlivé kraje, stačí přidat třídu .[název-kraje]_center – Tato třída má definované souřadnice pro střed kraje (nejedná se o přesný střed, ale o optimalizované souřadnice pro umístění popisku).

Ukázka použití: Demo s přehledem volební účasti.

<div class="cezetmap">
<ul class="kraje">
<li class="kraj zlinsky">Zlínský kraj</li>
<li class="kraj moravskoslezsky">
<a href="?kraj=moravskoslezsky" title="Moravskoslezský kraj">Moravskoslezský kraj</a>
</li>
<li class="kraj jihomoravsky">Jihomoravský kraj</li>
<li class="kraj olomoucky">Olomoucký kraj</li>
<li class="kraj vysocina">Vysočina</li>
<li class="kraj pardubicky">Pardubický kraj</li>
<li class="kraj kralovehradecky">Královehradecký kraj</li>
<li class="kraj jihocesky">Jihočeský kraj</li>
<li class="kraj hlavni-mesto-praha">Hlavní město Praha</li>
<li class="kraj stredocesky">Středočeský kraj</li>
<li class="kraj liberecky">Liberecký kraj</li>
<li class="kraj plzensky">Plzeňský kraj</li>
<li class="kraj ustecky">Ústecký kraj</li>
<li class="kraj karlovarsky">Karlovarský kraj</li>
</ul>
</div>

Vytvořili šikovní kluci a holky z Moravio.com

V Moravio se snažíme pracovní procesy neustále zjednodušovat a zlepšovat. Při každodenní práci se zamýšlíme, jak jednotlivé problémy a postupy řešit lépe a moderněji. Pokud si myslíme, že je náš projekt užitečný, rádi jej dáme k dispozici komunitě webových vývojářů.
Líbí se vám náš projekt? Sdílejte ho.

CEZET Map je dostupná pod licencí Creative Commons BY (Uveďte autora).

Jaromír Kavan, Tomáš Musiol, Patrik Illy & celé Moravio.

Geniální mapa, odvedli jste skvělou prácí! Děkujeme!

Dorazili jste do cíle.

Děkujeme za skvělou mapu.
Práce s ní byla opravdu jednoduchá a maximálně splnila naše požadavky.

CEZET Map se nám vážně povedla :) - Moravio

Naprosto jednoduché napojení na administraci webu. To se Vám povedlo kluci.

Googlil sem 3 hodiny, protoze sem zapomnel, kdo ty super mapy udelal.
Ale nakonec sem nasel. Super prace!

Skvělá mapa! Děkujeme.