svg minimap v2

by Petr Haluza

HTML

<div id="hap-minimap-holder">
<div id="map-hint">Klikni pro výběr kraje</div>
<div id="info-box"></div>
<div id="hap-minimap-box">
<svg id="hap-minimap" width="100%" height="100%" viewBox="0 0 600 330" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
 
  
<path id="20" class="region" data-region="Slovensko" fill="#C49393" d="M599.772 222.812s-6.532 1.285-7.496-1.285c-.964-2.57 3.427-9.852 3.427-9.852s-1.499-12.743-2.57-13.171c-1.071-.428-9.531-1.071-10.602-.964-1.071.107.856-4.576-.137-4.757-4.284-.781-8.322-11.52-8.43-14.518-.107-2.998-5.033-4.069-5.033-4.069s-5.354 6.425-7.281 7.817c-1.928 1.392-5.569 1.071-6.533 2.249-.963 1.178-3.605 11.226-6.103 13.492-2.195 1.991-8.888.108-8.888.108s-6.961 2.927-8.46 1.07c-1.499-1.856 1.106-9.798-.536-12.207-1.641-2.41-9.316-2.249-9.316-2.249l-14.135-3.213-60.61 46.475-68.642 33.625s-3.234 28.558-2.463 29.448c6.211 7.175-7.264 14.385-5.782 28.164.21 1.96 5.033 3.105 5.033 3.105l1.071 4.605 2.784 2.784 220.809.107-.107-106.764Z" style=";stroke:#fff;stroke-width:5px"></path>
<path id="01" class="region" data-region="Středočeský" fill="#7791a7" d="m451.382 123.182.3.9-.1.9-1 1.6-.5 1.2-.1 1.9.4 1.4 1 1.8.8 2.1 1.3 9.3.1 2.3-.2 1.9-.5 1.3-1.3 2.3-1.2 1.8-.9 3-.2 3.4.2 1.5.3.9.4.2 7.3 3.2.9.6.9.9 1.3 2 .6 1.9.4 2.6.5 1.2.8.9.8.4h2.1l2.8-.6 1.3.1 4 .9 6.1-.7h1.1l.9.5 1.3 1.1.6 1.3.5 1.3.5 4v3.1l.4 1.9.6 2.4 2.3 6.6.3 1.3-.5 1.5-.6 1-2.4 2.5-.2.7-.1 1.1.8 1.3 2.4 1.6 1.1 1.2 1.4 1.7 1.9 2.9.6 1.4.1 1-.4.6-2.4 2.4-.6 1.4v1.2l.8 3.8v.8l-.3 3.2-1.4-.1-3 .8-2.7 1.3-.7 1.1 1.7 2.7 1.1 1.1 3.4 2.3 5 1.6 1.1.7 5.4 5.2 1.1.9 2 .5 1 .5 1.1.9 1.4 1.7.2 1.1-.9 2.7-.1.9-.1 4.6-.5 2.6-.7 2.2-.6 2.4-.2 1.8-.2 1.9.1 2.4-.2 1.2-.6.6-1.5.5-1.6 1.5-1.2 2.2-.5 1.8-.6 3.7-.4 1-.5.8-.9.8-1.2.6-2 .4-3.8-.6-.9.5-5.2 4.7-5.2 2-6 3.6-1.2.2-.8-.2-1.9-1.2-.8-.1-1.2.4-1.2 1.3-.8 1.8-.4...

CSS

/* jen demo */
body, *{font-family:arial; box-sizing:border-box}

.hover {fill:#7791a7}


/* HAP minimap v2 */
#hap-minimap-holder { width:100%; display:flex; justify-content:center; align-items:center; padding: .5em;}
#hap-minimap-box { max-width:300px; position: relative; z-index: 1;}
#hap-minimap-box:after { content: ""; box-shadow: -10px -10px 10px white inset; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}

#map-hint { position: absolute; z-index: 2; background: white; padding: 2px 5px; font-size: 12px; border: 2px solid #5d7182; opacity: .75; border-radius: 4px;}

#hap-minimap path:hover,
#hap-minimap path.hover { fill:#8FB73F;cursor:pointer;}
#hap-minimap path:active { fill:#8FB73F}
#hap-minimap path.empty,
#hap-minimap text.empty { fill:#88A4BC;cursor:initial; pointer-events:none}
#hap-minimap .enabled { fill:#8FB73F !important;}
#hap-minimap text { fill:rgb(230,240,250); font-size:28px}
#hap-minimap text:hover { fill:#8Ff73F;cursor:pointer;}

#hap-minimap svg text::selection { background: none; }

#info-box { display: none; position: absolute; top: 0px; left: 0px; z-index: 2; font-size: 13px; background-color: #ffffff; border: 2px solid #678197; border-radius: 3px; padding: 3px 7px;}
/* /HAP minimap v2 */

JavaScript

$("path, text").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('region'));
  var hoverId = $(this).attr("id");
  document.getElementById(hoverId).classList.add("hover");
});

$("path, text").mouseleave(function(e) {
  $('#info-box').css('display','none');
  var hoverId = $(this).attr("id");
  document.getElementById(hoverId).classList.remove("hover");
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

$("#hap-minimap").hover(function(e) {
	$('#map-hint').css('display','none');
});


//  JEN DEMO *******************


//selecting individual states
$("path").add("text").click(function() {
  var string = $(this).attr("id");
  var state = string
  var id = "#" + $(this).attr("id");
  var labelvar = document.getElementById("selected").value;
  if ($(id).hasClass("enabled")) {
    $(id).removeClass("enabled");
    if (labelvar.indexOf(state) != -1) {
      var index = labelvar.indexOf(state);
      if (index != 0) {
        var charArray = labelvar.split('');
        var test = charArray.splice(index - 1, 3, '', '', '');
        var newString = charArray.join('');
        document.getElementById("selected").value = newString
      } else {
        var charArray = labelvar.split('');
        var test = charArray.splice(index, 3, '', '', '');
        var newString = charArray.join('');
        document.getElementById("selected").value = newString
      }

    }
  } else {
    $(id).addClass("enabled");
    var labelvar = document.getElementById("selected");
    if (labelvar.value === '') {
      labelvar.value = string;
    } else {
      labelvar.value = labelvar.value + "," + string;
    }
  }
});

//clear all
$("#clear").click(function() {
  let labelvar = document.getElementById("selected");
  labelvar.value = '';
  $("path").removeClass("enabled");
 ...