Interaktivní mapa ČR

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

Rozměr mapy:

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

$(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, na které 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šeho vzhledu, 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ě.

Pokud se Vám článek líbí, podpořte další tím, že dáte "Like" na Facebook nebo +1 na Google+ nebo nasdílíte tento článek dál. Jen na základně vaší zpětné vazby budu moci zjistit, zda-li mám psát dál, nebo ne.

Kontakt

Tomáš Hubík
Telefon+420 774 510 211
E-mailTomas.Hubik1@gmail.com
BydlištěOkres Opava
SkypeTomasHubik
74864131
SpolupracujiÚčetní Opava
Napište nám
Odeslat dotaz
Odeslat dotaz