Simple Interactive Points Effect

Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more information on that point; the background image becomes completely opaque. This concept could be fitting for some kind of map assisted story telling, like a travel piece or similar.

Since this component resizes fluidly, we have to set everything relative, including the pin positions. For that we are using an SVG layer that resizes according to the static (map) image. The pins were placed in Adobe Illustrator on top of the map. Then we take the SVG code and add it to the following structure (the “points” SVG):

<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>

Every point has also a tooltip that we show when hovering:

When clicking on one of the points, some content gets shown and the associated image will become completely opaque.

The following options can be set:

/**
 * PointsMap options/settings.
 */
PointsMap.prototype.options = {
	// Maximum opacity that the background element of 
	// a point can have when active (mouse gets closer to it)
	maxOpacityOnActive : 0.3,
	// The distance from the mouse pointer to 
	// a point where the opacity of the background element is 0
	maxDistance : 100, 
	// If viewportFactor is different than -1, then maxDistance 
	// will be overwritten by [point´s parent width / viewportFactor]
	viewportFactor : 9,
	// When the mouse is [activeOn]px away from 
	// one point, its image gets opacity = point.options.maxOpacity.
	activeOn : 30
};

Credits

• Map by OpenStreetMap®. OpenStreetMap® is open data, licensed under the Open Data Commons Open Database License (ODbL) by the [OpenStreetMap Foundation (OSMF)](OpenStreetMap Foundation). Read more here: https://www.openstreetmap.org/copyright
• Location pin icon made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY
• Vintage London images by Stockholm Transport Museum, London, England album.
• Lunar.js by Todd Motto: SVG class module for has/add/remove/toggleClass

• ChromeSupported
• FirefoxSupported
• Internet ExplorerSupported from version 11
• SafariSupported
• OperaSupported

We hope you enjoy this little component and find it useful!