Интерактивные маркеры на карте

<section class="interactive-points" id="interactive-1" tabindex="0">
	<img class="static" src="img/map.png" alt="Map of London" />
	<div class="backgrounds">
		<div class="background__element" style="background-image: url(img/1.jpg)"></div>
		<div class="background__element" style="background-image: url(img/2.jpg)"></div>
		<!--...-->
	</div>
	<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
		<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
		<path class="point" d="..."/>
		<!--...-->
	</svg>
	<div class="points-tooltips">
		<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
		<div class="point-tooltip"><!--...--></div>
		<!--...-->
	</div>
	<div class="points-content">
		<div class="point-content">
			<h3 class="point-content__title">The Rupert Connection</h3>
			<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
			<p class="point-content__text">Descended from astronomers...</p>
		</div>
		<div class="point-content">
			<!--...-->
		</div>
		<!--...-->
	</div>
</section>

/**
 * Настройки PointsMap.
 */
PointsMap.prototype.options = {
	// Максимальная непрозрачность фона при приближении мыши к маркеру
	maxOpacityOnActive : 0.3,
	// Расстояние от мыши до маркера когда непрозрачность фона равна 0
	maxDistance : 100,
	// Если viewportFactor не равен -1, то maxDistance
	// будет рассчитываться [ширина родительского элемента / viewportFactor]
	viewportFactor : 9,
	// Если курсор мыши на [activeOn]px дальше от
	// маркера, то непрозрачность её изображение будет равна point.options.maxOpacity.
	activeOn : 30
};