USA Map – jQVMap Plugin

jQVMap Plugin is a javascript library that allows creating maps showing states of the United States. You can zoom in or zoom out to see different areas of the map. You can also drag on the map to see different sections and hover to see the names of states.

Features:

  • Zoom In or Zoom out
  • Drag on the map
  • Hover the mouse over each state
  • Fully responsive and works great on every device (Desktop, Tablet, Mobile)

Live Demo

How to Use

Add css of jqvmap library after bootstrap library.

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/dist/jqvmap.css"
    type="text/css" media="screen" />

Add the css declarations of the jqvmap library in the style tag

<style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    #vmap {
        width: 100%;
        height: 100%;
        background-color: red;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* Setup basic CSS for Label */
    .jqvmap-pin {
        font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
        cursor: default;
        pointer-events: none;
    }

    /* Hide Whichever Labels you want */

    #jqvmap1_ri_pin,
    #jqvmap1_dc_pin,
    #jqvmap1_de_pin,
    #jqvmap1_md_pin {
        display: none;
    }

    /* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */

    #jqvmap1_ak_pin {
        margin-top: -2%;
    }

    #jqvmap1_ca_pin {
        margin-left: -2%;
    }

    #jqvmap1_ct_pin {
        margin-top: -0.25%;
        margin-left: -0.25%;
    }

    #jqvmap1_fl_pin {
        margin-left: 5%;
    }

    #jqvmap1_id_pin {
        margin-top: 3%;
        margin-left: -1%;
    }

    #jqvmap1_ky_pin {
        margin-left: 2%;
    }

    #jqvmap1_la_pin {
        margin-left: -2%;
    }

    #jqvmap1_mi_pin {
        margin-top: 4%;
        margin-left: 3%;
    }

    #jqvmap1_ma_pin {
        margin-top: -0.25%;
    }

    #jqvmap1_mn_pin {
        margin-top: 2%;
        margin-left: -2%;
    }

    #jqvmap1_nh_pin {
        margin-top: 1%;
        margin-left: -0.25%;
    }

    #jqvmap1_nj_pin {
        margin-top: 1%;
    }

    #jqvmap1_ok_pin {
        margin-left: 2%;
    }

    #jqvmap1_va_pin {
        margin-left: 2%;
    }

    #jqvmap1_wv_pin {
        margin-left: -1%;
        margin-top: 1%;
    }

    /* Add responsibe support to resize labels for difference screen sizes */

    @media only screen and (min-width: 320px) {
        .jqvmap-pin {
            font-size: 6px;
        }
    }

    @media only screen and (min-width: 480px) {
        .jqvmap-pin {
            font-size: 8px;
        }
    }

    @media only screen and (min-width: 640px) {
        .jqvmap-pin {
            font-size: 10px;
        }
    }

    @media only screen and (min-width: 800px) {
        .jqvmap-pin {
            font-size: 12px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .jqvmap-pin {
            font-size: 14px;
        }
    }
</style>

Create a container where you want to render map

<div id="vmap" style="width: 700px; height: 500px;"></div>

Include the JavaScript file jquery.vmap.js after jQuery

<script type="text/javascript"
    src="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/dist/jquery.vmap.js"></script>

Include the JavaScript file jquery.vmap.usa.js after jquery.vmap.js file

<script type="text/javascript"
    src="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/dist/maps/jquery.vmap.usa.js" charset="utf-8">
</script>

Call vectorMap method from jqvmap library and add configuration as below:

<script>
    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap({
            map: 'usa_en',
            borderWidth: 0.25,
            showLabels: true
        });
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.