var states = [
"Bratislava I",
"Bratislava II",
"Bratislava III",
"Bratislava IV",
"Bratislava V",
"Malacky",
"Pezinok",
"Senec",
"Dunajská Streda",
"Galanta",
"Hlohovec",
"Piešťany",
"Senica",
"Skalica",
"Považská Bystrica",
"Trnava",
"Bánovce nad Bebravou",
"Ilava",
"Bytča",
"Myjava",
"Nové Mesto nad Váhom",
"Partizánske",
"Zlaté Moravce",
"Prievidza",
"Púchov",
"Trenčín",
"Komárno",
"Levice",
"Topoľčany",
"Nitra",
"Nové Zámky",
"Šaľa",
"Čadca",
"Dolný Kubín",
"Kysucké Nové Mesto",
"Liptovský Mikuláš",
"Martin",
"Námestovo",
"Ružomberok",
"Turčianske Teplice",
"Tvrdošín",
"Stropkov",
"Žilina",
"Banská Bystrica",
"Banská Štiavnica",
"Brezno",
"Detva",
"Krupina",
"Krupina",
"Poltár",
"Revúca",
"Rimavská Sobota",
"Veľký Krtíš",
"Zvolen",
"Žarnovica",
"Žiar nad Hronom",
"Bardejov",
"Humenné",
"Košice IV",
"Kežmarok",
"Levoča",
"Medzilaborce",
"Poprad",
"Prešov",
"Sabinov",
"Snina",
"Stará Ľubovňa",
"Svidník",
"Vranov nad Topľou",
"Gelnica",
"Košice I",
"Košice II",
"Košice III",
"Košice - okolie",
"Michalovce",
"Rožňava",
"Sobrance",
"Spišská Nová Ves",
"Trebišov"
]
var styles = [
{
ids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 30, 31, 26, 15],
background: '#ece1cc',
hover: '#F5F5F5',
stroke: '#ffffff',
label: 'Mário Ledecký'
},
{
ids: [10, 11, 12, 13, 16, 19, 20, 21, 22, 25, 27, 28, 29, 44, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 58, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78],
background: '#d9c298',
hover: '#F5F5F5',
stroke: '#ffffff',
label: 'Mária Prídavková'
},
{
ids: [14, 17, 18, 23, 24, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 45, 56, 57, 59, 60, 61, 62, 63, 64, 65, 66, 67,68],
background: '#c6a465',
hover: '#F5F5F5',
stroke: '#ffffff',
label: 'Mária Prídavková'
}
]
/**
* Initializes the SVG map
*/
var svgMap = (function () {
/**
* SVG element
*/
var svgElement = null;
function resetBackground(color) {
// Return paths of svg element and setup random color for it
var paths = svgElement.getElementsByTagName("path");
//get items from htmlCollection
var items = Array.from(paths);
for (var i = 0; i < items.length; i++) {
items[i].style.fill = color || "#ffffff";
}
}
/**
* Changes bg color of SVG element
*/
function changeBackground(id, color) {
// Return paths of svg element
var paths = svgElement.getElementsByTagName("path");
if (paths[id]) {
paths[id].style.fill = color || "#ffffff";
}
}
function changeStroke(id, color) {
// Return paths of svg element
var paths = svgElement.getElementsByTagName("path");
if (paths[id]) {
paths[id].style.stroke = color || "#ffffff";
}
}
function hoverStyle(id, hoverColor, unhoverColor) {
// Return paths of svg element
var paths = svgElement.getElementsByTagName("path");
if (paths[id]) {
paths[id].addEventListener("mouseenter", function (e) {
e.target.style.fill = hoverColor;
});
paths[id].addEventListener("mouseleave", function (e) {
e.target.style.fill = unhoverColor;
});
}
}
function tooltip(id, tooltipRows, coefX, coefY, bgColor) {
var buffer = 2;
var width = 200;
var tooltip = document.querySelector(".svg-map-tooltip");
if (!tooltip) {
// create tooltip first time
tooltip = document.createElement("div");
tooltip.className = "svg-map-tooltip";
tooltip.style.display = "none";
tooltip.style.position = "fixed";
tooltip.style.width = "max-content";
tooltip.style.minWidth = "100px";
tooltip.style.maxWidth = width + "px";
tooltip.style.height = "auto";
tooltip.style.backgroundColor = bgColor || "red";
tooltip.style.padding = "0.25rem";
tooltip.style.borderRadius = "0.5rem";
tooltip.style.color = "#ffffff";
document.body.appendChild(tooltip);
}
// Return paths of svg element
var paths = svgElement.getElementsByTagName("path");
if (paths[id]) {
paths[id].addEventListener("mouseenter", function (e) {
e.stopPropagation();
var screenWidth = window.innerWidth;
var x = e.clientX + coefX + buffer
var y = e.clientY + coefY + buffer
for (var i = 0; i screenWidth) {
x = x - coefX - tooltip.clientWidth
}
tooltip.style.visibility = "visible"
tooltip.style.top = y + "px";
tooltip.style.left = x + "px";
});
paths[id].addEventListener("mouseleave", function (e) {
e.stopPropagation();
const tooltip = document.querySelector(".svg-map-tooltip");
tooltip.style.display = "none";
tooltip.style.top = "-1000px";
tooltip.style.left = "-1000px";
tooltip.textContent = "";
});
}
}
/**
* Initializes SVG map
* @param {Element} element - SVG element
*/
function init(element) {
svgElement = element;
}
return {
init: init,
svgElement: svgElement,
changeBackground: changeBackground,
changeStroke: changeStroke,
hoverStyle: hoverStyle,
tooltip: tooltip
};
})();
var legend = document.querySelector(".svg-map-legend");
function appendToLegend(style) {
var wrapper = document.createElement("div")
wrapper.style.padding='0.5rem'
wrapper.style.display="flex";
wrapper.style.alignItems="center";
var circle = document.createElement("div")
wrapper.appendChild(circle);
circle.style.display="inline-block";
circle.style.marginRight="5px";
circle.style.borderRadius="50%";
circle.style.width="20px";
circle.style.height="20px";
circle.style.backgroundColor=style.background;
var label = document.createElement('span')
label.textContent = style.label
wrapper.appendChild(label)
legend.style.display="flex"
legend.style.justifyContent="center"
legend.style.flexWrap="wrap"
legend.appendChild(wrapper);
}
var element = document.querySelector("#svg-map");
var svgElement = element;
svgMap.init(svgElement);
for (var i=0; i<styles.length; i++) {
appendToLegend(styles[i]);
for (var j=0; j<styles[i].ids.length; j++) {
svgMap.changeBackground(styles[i].ids[j], styles[i].background);
svgMap.changeStroke(styles[i].ids[j], styles[i].stroke);
svgMap.hoverStyle(styles[i].ids[j], styles[i].hover, styles[i].background);
svgMap.tooltip(styles[i].ids[j], [styles[i].label, states[styles[i].ids[j]]], 0, 0, "rgb(34, 34, 34)")
}
}