How to Create/Make Responsive World Map jVectorMap Using jQuery

Posted 4:36 pm by muni & filed under CSS, HTML5, JAVASCRIPT, JQUERY, jVectorMap, Twitter Bootstrap.

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.

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