Map with Markers

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/panzoom.min.js"></script>
<div class="floorplan-component-wrapper">
  <div class="floor-wrapper-holder">
    <div class="floor-wrapper panzoom-parent active">
      <div class="floor-container panzoom">
        <img class="floor-image" src="http://cdn.fliplet.local/v1/media/files/4/contents?auth_token=eu--session--2a8f20438489e4068a057f5e0f5458c0-880-611-7346" />

        <!-- Markers -->
        <div id="marker-0" class="marker active">
          <i class="fa fa-circle" style="color: #195e9e; font-size: 24px;"></i>
          <div class="active-state" style="background-color: #195e9e;"></div>
        </div>

      </div>
      <div class="zoom-controls-holder">
        <div class="zoomIn">
          <i class="fa fa-plus"></i>
        </div>
        <div class="zoomOut off">
          <i class="fa fa-minus"></i>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.floorplan-component-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

.floor-wrapper-holder {
  width: 100%;
  height: 100%;
}

.floor-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}

.floor-wrapper.active {
  display: block;
}

.floor-container {
  position: relative;
  transform-origin: 0px 0px 0px;
}

.zoomIn,
.zoomOut {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: #333333;
  border-radius: 50%;
  cursor: pointer;
}

.zoomIn {
  bottom: 95px;
}

.zoomOut {
  bottom: 50px;
}

.zoomIn.off,
.zoomOut.off {
  opacity: 0.1;
  cursor: default;
}

/* .floor-container img {
  max-width: none;
  width: 100%;
  height: auto;
} */

.marker {
  position: absolute !important;
  z-index: 9;
  top: 150px;
  left: 150px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker .active-state {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}

.marker.active .active-state {
  display: block;
  -webkit-animation: pulse 1.2s ease-out infinite none;
  animation: pulse 1.2s ease-out infinite none;
}

@keyframes pulse {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(3);
    opacity: 0;
  }
}

JavaScript

var area = document.querySelector('.panzoom');
var image = document.querySelector('.panzoom img');

var screenWidth = $('body').outerWidth();
var screenHeight = $('body').outerHeight();
var elemWidth = image.naturalWidth;
var elemHeight = image.naturalHeight;

var widthRatio = screenWidth / elemWidth
var heightRatio = screenHeight / elemHeight

var screenRatio = screenHeight / screenWidth;
var elemRatio = elemHeight / elemWidth;


var transformMatrix;
var baseZoom;


if (elemRatio > screenRatio) {
  console.log('height ratio')

  baseZoom = heightRatio;
  transformMatrix = [(screenWidth - elemWidth * baseZoom) / 2, 0];
} else {
  console.log('width ratio')

  baseZoom = widthRatio;
  transformMatrix = [0, (screenHeight - elemHeight * baseZoom) / 2]
}

$('.marker').css({
  'transform': 'scale(' + 1 / baseZoom + ') translate3d(0,0,0)'
});

$(area).css({
  width: $(image).width(),
  height: $(image).height(),
  // transform: 'matrix(' + baseZoom + ', 0, 0, ' + baseZoom + ', ' + transformMatrix + ')'
});

function initPanZoom() {
  // jQuery Panzoom
  /*  var $panzoom = $(".floor-container").panzoom({
     minScale: 1,
     maxScale: 4,
     increment: 0.25,
     $zoomIn: $('.zoomIn'),
     $zoomOut: $('.zoomOut'),
     panOnlyWhenZoomed: true,
     contain: 'invert'
   });
   
   $panzoom.parent().on('mousewheel.focal', function( e ) {
     e.preventDefault();
     var delta = e.delta || e.originalEvent.wheelDelta;
     var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
     $panzoom.panzoom('zoom', zoomOut, {
       increment: 0.25,
       animate: false,
       focal: { clientX: e.clientX, clientY: e.clientY }
     });
   });
   
   $panzoom.on('panzoomchange', function(e, panzoom, transform) {
     $('.marker').css({
       'transform': 'scale(' + 1 / transform[0] + ') translate3d(0,0,0)'
     });
   });
    */
  // OG Panzoom

  var pz = panzoom(area, {
    maxZoom: 4,
    minZoom: baseZoom,
    autocenter: true,
    bounds: {
      top: 100,
     ...