svg minimap v2-test

by Petr Haluza

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:400,500,700"></script>
   <h4><img src="/images/icons/delivery2.png"> Osobní odběr</h4>
											<h5>Zvolte výdejní místo.</h5>
											
											
<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="99" 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="14" class="region" data-region="Zlínský" fill="#7791a7" d="m931.982 384.082-.3 8-8.9 7.1-19.9 7.7-4.3 4.2-3.6 5.8-2.7 6.8-1.9 7.5-.5 6 .2 11.5-1 4.9-3.1 5.2-4.3 4.1-4.9 2.2-7.9-.6-3.6.6-3.1 2-1.9 3.9-1 3.3-1.1 7-1.2 3.1-2.7 2.6-2.8.2-3.2-.5-3.6.6-2.4 2-5.1 8.8-2.6 2.1-12 4.8-1.1-5.1-1.4-4-.9-1.8-1.2-1.4-1.4-1-8-2.3-.9-.7-.5-1-.4-2.4-.8-2.1-.9-1.6-.6-.5-3.4-1.4-4.3-.6-4.7 2.6-1.2.2-1.1-.1-.9-.6-1.6-2.4-2.7-2.2-5.2-2.2-.5-3.2-.7-2.4-.6-.9-.7-.5-9.1-1.9-6.1-2.8-.8-.7-.6-.9-.3-1.2.4-7-.1-1.5-.4-1.1-.8-.6-1.1-.1-7.2 2.5h-2.6l-2.7-1.2-1.1-.9-.8-1-.3-1.1.2-1 2.3-2 3.8-5.5.7-.7...

CSS

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

.hover {fill:#7791a7}


/* HAP minimap v2 */
#hap-minimap-holder { width:100%; max-width: 360px; display:flex; justify-content:center; align-items:center; padding: .5em;}
#hap-minimap-box { width:100%; 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:white; font-size:24px; user-select: none;}
#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 */

ul { margin:0; padding: 0; display: flex; flex-direction: column; overflow:hidden; flex-wrap:nowrap}
li[data-area] {opacity:0; height:0; transition: all .2s; white-space: nowrap;}
li[data-area].on {opacity:1; height:22px; order:-1}
li[data-area] { display:flex; gap: 5px}

JavaScript

// ovládání barviček a tooltipu mapy
$("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');
});



//vybrat oblast klikem
$("path").add("text").click(function() {
  var string = $(this).attr("id");
  var state = string
  var id = "#" + $(this).attr("id");
	var clickedId = $(this).attr('id');
	$('li[data-area="' + clickedId + '"]').toggleClass('on');
  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;
    }
  }
	  $('li[data-area]:not(.on)').each(function() { // Odebere atribut 'checked' u mista, které skryju...