Olympic map

by Max Shu

HTML

<div id="svg-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2000 1202" style="enable-background:new 0 0 2000 1202; width: 100%;" xml:space="preserve">
<defs>
	<pattern id="redHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
		<rect x="0" y="0" width="10" height="10"
		style="stroke: none; fill: #E73E47;" />
		<line x1="0" y1="0" x2="0" y2="10" style="stroke:#FFFFFF; stroke-width:10; opacity: 0.5;" />
	</pattern>
	<pattern id="roseHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
		<rect x="0" y="0" width="10" height="10"
		style="stroke: none; fill:#FBDED5;" />
		<line x1="0" y1="0" x2="0" y2="10" style="stroke:#FFFFFF; stroke-width:10; opacity: 0.5;" />
	</pattern>
</defs>
<path class="stroke" d="M747.2,370.1l9.1,18.2l9.1,9.1h9.1V361l9.1-9.1l9.1-9.1l9.1-9.1 l-9.1-9.1h-18.2v9.1l-9.1,9.1l-9.1-9.1l-9.1,9.1v9.1h9.1v18.2H747.2z M819.9,333.8l9.1-9.1h9.1l9.1-9.1h36.4l9.1-9.1l9.1,9.1H929 l9.1-9.1v-9.1l-9.1-9.1h-9.1v9.1h-27.3l-9.1-9.1h-18.2l-9.1,9.1H829v9.1h-9.1l-9.1,9.1h-9.1v9.1l9.1,9.1H819.9z M701.8,388.3v-9.1 l-9.1-9.1h-9.1l-9.1,9.1l9.1,9.1H701.8z M1883.2,915.4l-9.1-9.1h-9.1v-9.1l-9.1-9.1V870l-9.1-9.1l9.1-9.1h9.1l9.1,9.1v-9.1 l-9.1-9.1h-9.1l-9.1-9.1l-18.2-18.2h-9.1l-9.1-9.1h-9.1v-18.2l-9.1-9.1h-9.1V770l-9.1-9.1l-9.1-9.1h-9.1v9.1h9.1l9.1,9.1v9.1h-9.1 v9.1l9.1,9.1l9.1,9.1v9.1l9.1,9.1h9.1l9.1,9.1v9.1l18.2,18.2v9.1l27.3,27.3v9.1l9.1,9.1l9.1,9.1v18.2h9.1v-18.2h18.2l-9.1-9.1 H1883.2z M1974.1,615.5h-9.1l9.1-9.1v-9.1l9.1-9.1h-9.1l-9.1-9.1v-9.1l-9.1-9.1l9.1-9.1l9.1-9.1l-9.1-9.1h-9.1l-9.1-9.1l-9.1-9.1 v-9.1h9.1v-9.1l-9.1-9.1l-9.1,9.1l-9.1-9.1v-9.1l-9.1-9.1l-9.1,9.1v9.1l-9.1-9.1v-9.1l-9.1-9.1v-9.1l-18.2-18.2v-9.1h9.1v-27.3 l9.1,9.1h9.1l-9.1-9.1v-18.2l9.1-9.1V361h27.3l-9.1-9.1v-18.2l-9.1-9.1v-27.3l-9.1-9.1V252h-9.1v-9.1h9.1l9.1-9.1h9.1v-9.1h-18.2...

CSS

html, body {
  font-size: 10px;
  font-family: Verdana, Arial, sans-serif;
}

svg .stroke {stroke: #FFFFFF; stroke-width:2; fill:none;}
svg .region {fill: url(#redHatch);}
svg .region:hover {fill: #E73E47;}

#svg-container {
display: inline-block;
position: relative;
width: 90%;
left: 5%;
padding-bottom: 38%; /*change according to ratio img w - img h */
vertical-align: middle;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

#description {
  position: absolute;
  min-width: 15rem;
  min-height: 10rem;
  display: none;
}
.icon {
  width: 8rem;
  height: 8rem;
  font-size: 3rem;
  border-radius: 50%;
  // background-color: #005782;
  color: #fff;
  text-align: center;
  line-height: 8rem;
  margin: 0 auto;
}
.regionName {
  height: auto;
  color: #E73E47;
  font-size: 1.5rem;
  line-height: 2rem;
  background-color: #fff;
  padding: .5rem 1rem;
}

JavaScript

var map = document.getElementById('svg-container');
var desc = document.getElementById('description');
var descH = desc.clientHeight;

map.addEventListener("mousemove", function(e){
  var m = map.getBoundingClientRect();
  var x = e.clientX - m.left;
  var y = e.clientY - m.top;
  
  desc.style["top"] = y - descH/2 + "px";
  desc.style["left"] = x + 30 + "px";
  
});
  
$('.region').each(function(){
  $(this).on('mouseover', function(){
    var imgsrc = $(this).data("icon");
    var name = $(this).data("name");
    $('#description').show();
    $('.icon').css('background-image', 'url(' + imgsrc + ')');
    $('.regionName').html(name);
  });
  $(this).on("mouseleave", function(){
    $('#description').hide();
  });
});