interaktivní mapa ČR

Úvod: Script můžete použít pouze pro nekomerční účely. V případě, že máte zájem mapu využít ve Vašem komerčním projektu, neváhejte mě kontaktovat emailem nebo kontakním formulářem.

V Dnešním článku se nebude jednat o tutoriál, ale o ukázku použití mého scriptu na vytvoření interaktivní mapy České Republiky. Mapa je vytvořena bez použití tagu <map> a <area> a to čistě pomocí JavaScriptu.

Na internetu jsem našel několik podobných interaktivních map, ale jedním s hlavních problémů bylo, že měly pevně nastavenou velikostu, a pro použití jsem musel složitě přepočítavat souřadnice. Proto jsem se rozhodl zveřejnit svůj script, který do libovolného prvku na stránce o libovolné velikosti vloží interaktivní mapu České Republiky.
Ukázky: Rozměry

Použití: Použití mapy je velice jednoduché. Pro běh je zapotřebí jQuery knihovna.
Do stránky stačí nalinkovat tyto dva soubory:
<link href="http://www.tomashubik.cz/blog/map/t_h_map.css" rel="stylesheet" type="text/css" title="styles" />

<script type="text/javascript" src="http://www.tomashubik.cz/blog/map/t_h_map.js"></script>

Poté vytvoříme <div>, který musí mít jako atribut class nastaveno t_h_map_container. Například takto:
<div class="t_h_map_container" id="div_my_map"></div>

Nakonec už jen zavoláme javascript, který vytvoříme mapu.
1 $(document).ready(function() {
   $('#div_my_map').createMap();
 });
Události:
//Pole našich krajů
var regions = ["Karlovarský kraj", "Ústecký kraj", "Liberecký kraj", "Královehradecký kraj", "Pardubický kraj", "kraj Vysočina", "Jihomoravský kraj", "Jihočeský kraj", "Plzeňský kraj", "Středočeský kraj", "Praha", "Olomoucký kraj", "Moravskoslezský kraj", "Zlínský kraj"];

//Výběr pomocí kliknutí
$('#div_my_map').bind('regionSelection', function(e, regionId) {
  if (regionId != null){
    alert("Vybrali jste si "+regions[regionId]);
  }
});

//Výběr pomocí najetí
$('#div_my_map').bind('regionHovered', function(e, regionId) {
  if (regionId != null){
    $("#div_region_hover_caption").html(regions[regionId]);
  }else{
    $("#div_region_hover_caption").html("");
  }
});