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 na Vaše webové stránky. Mapa je vytvořena bez použití tagu <map> a <area> a to čistě pomocí JavaScriptu.
Script je určen pouze pro nekomerční účely. Pokud chcete využít script ve vašem projektu, prosím kontaktujte mě.

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 velikost, a pro použití jsem musel složitě přepočítavat souřadnice a moje webové aplikace si s nimi nerozuměla. 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ázka

Použití

Použití mapy je velice jednoduché. Pro běh je zapotřebí jQuery knihovna.
Do webové stránky stačí nalinkovat tyto dva soubory:

<link href="http://www.tomashubik.cz/blog/interaktivni_mapa/t_h_map.css" rel="stylesheet" type="text/css" title="styles"/> 
<script type="text/javascript" src="http://www.tomashubik.cz/blog/interaktivni_mapa/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 v naší webové aplikaci.

$(document).ready(function() { 
  $('#div_my_map').createMap();
});

Obsluha událostí je následující:

//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(""); 
  } 
});

Cena

Cena scriptu se odvíjí od počtu domén a na které webové stránkce je mapa využita. Cena pro jeden projekt na jedné doméně je 800 Kč bez přípravy grafiky. Pokud chcete připravit grafiku podle vaší webové aplikace, cena je 1 200 Kč.
Chcete li použít mapu na více doménách, nebo ji prodávat se svým produktem, neváhejte mě kontaktovat. Mapu jsem schopen upravit podle vašich požadavků

Závěr

Toť vše. Díky tomuto jednoduchému scriptu si můžete snadno zobrazit interaktinví mapu na vaší webové stránce.
Script je určen pouze pro nekomerční účely. Pokud chcete využít script ve vašem projektu, prosím kontaktujte mě.