How to Create/Make Responsive World Map jVectorMap Using jQuery

Posted by & filed under CSS, HTML5, JAVASCRIPT, JQUERY, jVectorMap, Twitter Bootstrap.

How to create responsive jVector World Map using jQuery

Please refer my previous tutorial Learn jVectorMap in 5 Minutes, which covers basics jVectorMap from scratch.

Following are the list jVectorMap video tutorials.

  1. Learn jVectorMap in 5 Minutes
  2. How to Create/Make Responsive jVectorMap
  3. How to create custom jVectorMap Using QGIS & jVectorMap Converter

Add Outer Container </div> for jVectorMap:

To make Responsive jVectorMap, we need to add Outer Container </div> for jVectorMap container. Also remove the fixed inline styles from jVectorMap container. In the index.html file we created in previous tutorial, change the jVectorMap container into like this.

If the outer container of the jVectorMap is responsive, then jVectorMap automatically become responsive.
<div class="map-container">
     <div id="world-map" class="jvmap-smart"></div>
</div>

Add Responsive CSS Media Query for jVectorMap Container:

Add following CSS media styles to the jVectorMap outer container. That automatically makes jVectorMap become responsive.

.map-container{
    height: 300px;
}

.jvmap-smart{
    width: 100%; 
    height: 100%;  
}
.text-center{
    text-align:center;
    font-weight: 300;
    font-size: 2rem;
}
.map-container:after, .clearfix{
    display: block;
    content: '';
    clear: both;
}

@media only screen and (min-width: 576px) {
    .map-container{
        height: 350px;
    }
}
@media only screen and (min-width: 768px) {
    .map-container{
        height: 400px;
    }
}
@media only screen and (min-width: 992px) {
    .map-container{
        height: 500px;
    }
}
@media only screen and (min-width: 1200px) {
    .map-container{
        height: 600px;
    }
}

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!