Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Create Clickable Image Overlays

Are you an organization with multiple locations? Here's how to make a custom map to showcase more information about your business on your map feature.

Whether you have multiple business locations and would like to display them on a customized map or create an interactive infographic that lets users click on certain points on an image, you can do that easily with Bootstrap.

How to create clickable overlays for your images

There's a feature that comes with Bootstrap called Popovers, and in this tutorial, we'll show how to use popovers to create interactive maps. While you can use any image (i.e. infographic, photograph) for this, we're using a map. Maps are one of the best features business websites can add; they establish authority and brand recognition.

First, we start by adding Popper.js to our html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Keep in mind that we need to put popper.js before bootstrap.js otherwise, it will not work. Next, we enable popovers using Javascript. There are two ways to enable popovers.

One way to initialize popovers is by selecting them by their data-toggle attribute:

$(function () {
  $('[data-toggle="popover"]').popover()
})

If you have some styles that may interfere with a popover, you specify a custom container so that the popovers initialize inside that element only:

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Next, we create our html map with locations:

HTML

class

We specify a different class name for each location on the html file so that we can refer to them on our CSS file and specify a different horizontal and vertical alignment for each location.

data-content

This is the content value inside our popover.

data-placement

With the data-placement attribute, you can choose where you want the popover to appear in relation to its element. You can place them on the top, right, bottom or left side of an element.

data-toggle

In order to activate the popover feature, we need to set the data-toggle attribute to "popover."

data-trigger

Using the data-trigger with a focus value will display the popover when a user clicks on an element and close the popover when the user clicks on a different element.

title

Sets the title for the popover. If you don't wish to put a title, you can leave it blank.

CSS

.map {
    background-color: #0d1d2d;
    background-image: url("https://raw.githubusercontent.com/solodev/clickable-map-overlay/master/images/background.png");
    background-position: center;
    background-repeat: repeat;
    position: relative;
    background-attachment: fixed;
}
a.btn:before {
    font-family: FontAwesome;
    content: "\f041";
    display: inline-block;
    vertical-align: middle;
}
.map img {
    margin-top: -10%;
    position: relative;
    z-index: 3;
}
.map button.btn.pop, .map a.btn.pop {
    z-index: 5;
    position: absolute;
    color: #23303f;
    min-width: 0;
}
.map button.btn.pop:focus, .map a.btn.pop:focus {
    box-shadow: unset;
    outline: 0;
    border: 0;
}
.map button.btn.pop.default-popup, .map a.btn.pop.default-popup {
    z-index: -1;
    right: 30%;
}
.map button.btn.pop.lunarxp-launch-site, .map a.btn.pop.lunarxp-launch-site {
    left: 9%;
    top: 30%;
}
.map button.btn.pop.lunarxp-control-center, .map a.btn.pop.lunarxp-control-center {
    left: 14%;
    top: -17%;
}
.map button.btn.pop.lunarxp-rocket-factory, .map a.btn.pop.lunarxp-rocket-factory {
    left: 11%;
    top: -2%;
}
.map button.btn.pop.lunarxp-colony-xp-1, .map a.btn.pop.lunarxp-colony-xp-1 {
    left: 44%;
    bottom: 22%;
}
.map button.btn.pop.lunarxp-colony-hab-1, .map a.btn.pop.lunarxp-colony-hab-1 {
    right: 37%;
    top: 25%;
}
.map button.btn.pop.lunarxp-colony-orbiter-1, .map a.btn.pop.lunarxp-colony-orbiter-1 {
    right: 15%;
    top: 4%;
}
.map button.btn.pop.lunar-xplorer, .map a.btn.pop.lunar-xplorer {
    right: 25%;
    bottom: 30%;
}
.map button.btn.pop.florida, .map a.btn.pop.florida {
    right: 16%;
    bottom: 14%;
    transform: rotate(60deg);
    padding: 10px 44px;
}

Javascript

'use strict';
jQuery(document).ready(function($){
    $('[data-toggle="popover"]').popover({
    container: 'section.map'
  });
	$("#showPop").popover('show');
 
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
            //the 'is' for buttons that trigger popups
            //the 'has' for icons within a button that triggers a popup
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });

});

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev