JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="map" style="display: flex;"></div>

	<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.circle {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='13px' height='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Map-Pin-Icon/Orange-Copy'%3E%3Cg id='Map-Pin-Icon'%3E%3Cpath d='M3.90604 7.68C6.06329 7.68 7.81208 5.96077 7.81208 3.84C7.81208 1.71923 6.06329 0 3.90604 0C1.74879 0 0 1.71923 0 3.84C0 5.96077 1.74879 7.68 3.90604 7.68Z' transform='translate(2.604027 1.92)' id='Oval' fill='%23FFF' stroke='none'/%3E%3Cpath d='M12.3691 6.27729C12.3691 2.78466 9.61525 0 6.2079 0C2.75388 0 0 2.78466 0 6.27729C0 9.86431 3.6874 14.1121 6.2079 16C8.7284 14.0177 12.3691 9.9115 12.3691 6.27729ZM8.99573 5.86667C8.99573 4.36959 7.71344 3.2 6.18456 3.2C4.60637 3.2 3.3734 4.36959 3.3734 5.86667C3.3734 7.31696 4.60637 8.53333 6.18456 8.53333C7.71344 8.53333 8.99573 7.31696 8.99573 5.86667Z' id='Shape' fill='%23EF7622' fill-rule='evenodd' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: center center;
  background-size: contain;
  opacity: .5;
}

.rect {
  fill: red;
  opacity: .5;
}

.shapes {
  position: relative;
  overflow: visible;
}

.shapes>g {
  transition: all .2s ease-in-out;
}

.shapes:hover>g {
  opacity: 1;
  transform: scale(2);
  transform: translate(-7px, -32px) scale(2);
  transform-origin: 0% 0%;
  position: absolute;
}

.shapes:hover .shadow {
  fill-opacity: 0.446428567;
}

.shapes:hover::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  color: #000;
  border-radius: 50%;
  bottom: 0;

}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 100px;
  height: 80px;
  padding: 2px;
  font: 12px sans-serif;
  color: #fff;
  background: #000;
  border: 0px;
  pointer-events: none;
}

div.tooltip::before {
  position: absolute;
}

JavaScript

function mapMarker(fill) {
  var mapmarker = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  var path1 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  var path2 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  var path3 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  var g1 = document.createElementNS("http://www.w3.org/2000/svg", "g");
  var g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");

  mapmarker.setAttribute('class', 'marker');
  // mapmarker.setAttribute('viewbox', '0 0 13 16');
  // mapmarker.setAttribute('width', '13px');
  // mapmarker.setAttribute('height', '16px');

  path1.setAttribute('d', 'M6.94737 13.44C10.7843 13.44 13.8947 10.4314 13.8947 6.72C13.8947 3.00865 10.7843 0 6.94737 0C3.11044 0 0 3.00865 0 6.72C0 10.4314 3.11044 13.44 6.94737 13.44Z');
  path1.setAttribute('transform', 'translate(4.630859 3.359863)');
  path1.setAttribute('fill', '#FFF');
  path1.setAttribute('stroke', 'none');

  path2.setAttribute('d', 'M22 10.9853C22 4.87316 17.1019 0 11.0415 0C4.89811 0 0 4.87316 0 10.9853C0 17.2625 6.55849 24.6962 11.0415 28C15.5245 24.531 22 17.3451 22 10.9853ZM16 10.2668C16 7.64688 13.7193 5.6001 11 5.6001C8.19298 5.6001 6 7.64688 6 10.2668C6 12.8048 8.19298 14.9334 11 14.9334C13.7193 14.9334 16 12.8048 16 10.2668Z');
  path2.setAttribute('fill', fill);
  path1.setAttribute('fill-rule', 'evenodd');
  path2.setAttribute('stroke', 'none');

  path3.setAttribute('d', 'M7.5 5C11.6421 5 15 3.88071 15 2.5C15 1.11929 11.6421 0 7.5 0C3.35786 0 0 1.11929 0 2.5C0 3.88071 3.35786 5 7.5 5Z');
  path3.setAttribute('fill', fill);
  path3.setAttribute('stroke', 'none');
  path3.setAttribute('transform', 'translate(3.816406 27)');
  path3.setAttribute('fill-opacity', '0');
  path3.setAttribute('class', 'shadow');

  g2.appendChild(path3);
  g2.appendChild(path2);
  g2.appendChild(path1);
  g1.appendChild(g2)
  mapmarker.appendChild(g1);
  return mapmarker;
}

//Width...