jVectorMap 2 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
  • Create Marker
  • 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/jvectormap/css/jquery-jvectormap.css"
    type="text/css" media="screen" />

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

<style>
    ul {
        padding: 0;
        list-style: none;
    }

    .jvectormap-legend .jvectormap-legend-tick-sample {
        height: 26px;
    }

    .jvectormap-legend-icons {
        background: white;
        border: black 1px solid;
    }

    .jvectormap-legend-icons {
        color: black;
    }
</style>

Create a container where you want to render map. Add 6 markers with checkboxes and add some buttons to do actions with map

<div id="wrapper">
    <div class="slider-wrapper theme-default">

        <div class="map" style="width: 800px; height: 500px"></div>
        <ul class="list-markers">
            <li data-marker-index="0"><label><input checked type="checkbox" /> Marker 1</label></li>
            <li data-marker-index="1"><label><input checked type="checkbox" /> Marker 2</label></li>
            <li data-marker-index="2"><label><input checked type="checkbox" /> Marker 3</label></li>
            <li data-marker-index="3"><label><input checked type="checkbox" /> Marker 4</label></li>
            <li data-marker-index="4"><label><input checked type="checkbox" /> Marker 5</label></li>
            <li data-marker-index="5"><label><input checked type="checkbox" /> Marker 6</label></li>
        </ul>
        <input type="button" value="Add all" class="button-add-all" />
        <input type="button" value="Remove all" class="button-remove-all" />
        <input type="button" value="Clear selected regions" class="button-clear-selected-regions" />
        <input type="button" value="Clear selected markers" class="button-clear-selected-markers" />
        <br style="margin: 10px 0;">
        <input type="button" value="Remove map" class="button-remove-map" />
        <input type="button" value="Change values" class="button-change-values" />
        <input type="button" value="Reset map" class="button-reset-map" />

    </div>
</div>

Include the JavaScript file jquery.vmap.js after jQuery

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/assets/jquery-1.8.2.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/js/jquery-jvectormap.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/lib/jquery-mousewheel.js">
</script>

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/jvectormap.js"></script>

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/abstract-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/abstract-canvas-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/abstract-shape-element.js">
</script>

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-group-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-canvas-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-shape-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-path-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-circle-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-image-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-text-element.js"></script>

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-group-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-canvas-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-shape-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-path-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-circle-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-image-element.js">
</script>

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/map-object.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/region.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/marker.js"></script>

<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vector-canvas.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/simple-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/ordinal-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/numeric-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/color-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/legend.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/data-series.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/proj.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/map.js"></script>

<script
    src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/assets/jquery-jvectormap-us-aea-en.js">
</script>

<script>
    jQuery(function () {
        var markers = [
                [61.18, -149.53],
                [21.18, -157.49],
                {
                    latLng: [40.66, -73.56],
                    name: 'New York City',
                    style: {
                        r: 8,
                        fill: 'yellow'
                    }
                },
                {
                    latLng: [41.52, -87.37],
                    style: {
                        fill: 'red',
                        r: 10
                    }
                },
                {
                    latLng: [35.22, -80.84]
                },
                {
                    latLng: [31.52, -87.37]
                }
            ],
            values1 = [408, 512, 550, 781],
            values2 = [1, 2, 3, 4],
            values3 = {
                '4': 'bank',
                '5': 'factory'
            };

        var map = new jvm.Map({
            container: jQuery('.map'),
            map: 'us_aea_en',
            labels: {
                regions: {
                    render: function (code) {
                        var doNotShow = ['US-RI', 'US-DC'];

                        if (doNotShow.indexOf(code) === -1) {
                            return code.split('-')[1];
                        }
                    },
                    offsets: function (code) {
                        return {
                            'CA': [-10, 10],
                            'ID': [0, 40],
                            'OK': [25, 0],
                            'LA': [-20, 0],
                            'FL': [45, 0],
                            'KY': [10, 5],
                            'VA': [15, 5],
                            'MI': [30, 30],
                            'AK': [50, -25],
                            'HI': [25, 50]
                        } [code.split('-')[1]];
                    }
                },
                markers: {
                    render: function (index) {
                        return 'Marker ' + index;
                    }
                }
            },
            markers: markers,
            series: {
                markers: [{
                    attribute: 'fill',
                    scale: ['#C8EEFF', '#0071A4'],
                    normalizeFunction: 'polynomial',
                    values: values1,
                    legend: {
                        vertical: true
                    }
                }, {
                    attribute: 'r',
                    scale: [5, 20],
                    normalizeFunction: 'polynomial',
                    values: values2
                }, {
                    attribute: 'image',
                    scale: {
                        bank: {
                            url: 'assets/icon-bank.png',
                            offset: [10, 10]
                        },
                        factory: {
                            url: 'assets/icon-factory.png',
                            offset: [10, 10]
                        }
                    },
                    values: values3,
                    legend: {
                        horizontal: true,
                        cssClass: 'jvectormap-legend-icons',
                        title: 'Business type'
                    }
                }],
                regions: [{
                    scale: {
                        red: '#ff0000',
                        green: '#00ff00'
                    },
                    attribute: 'fill',
                    values: {
                        "US-KS": 'red',
                        "US-MO": 'red',
                        "US-IA": 'green',
                        "US-NE": 'green'
                    },
                    legend: {
                        horizontal: true,
                        title: 'Color'
                    }
                }, {
                    values: {
                        "US-NY": 'blue',
                        "US-FL": 'blue'
                    },
                    attribute: 'fill'
                }, {
                    scale: {
                        redGreen: 'assets/bg-red-green.png',
                        yellowBlue: 'assets/bg-yellow-blue.png'
                    },
                    values: {
                        "US-TX": 'redGreen',
                        "US-CA": 'yellowBlue'
                    },
                    attribute: 'fill',
                    legend: {
                        horizontal: true,
                        cssClass: 'jvectormap-legend-bg',
                        title: 'Pattern',
                        labelRender: function (v) {
                            return {
                                redGreen: 'Low',
                                yellowBlue: 'High'
                            } [v];
                        }
                    }
                }]
            },
            regionsSelectable: true,
            markersSelectable: true,
            markersSelectableOne: true,
            selectedRegions: JSON.parse(window.localStorage.getItem(
                'jvectormap-selected-regions') || '[]'),
            selectedMarkers: JSON.parse(window.localStorage.getItem(
                'jvectormap-selected-markers') || '[]'),

            onMarkerTipShow: function (event, tip, index) {
                tip.html(tip.html() + ' (modified marker)');
            },
            onMarkerOver: function (event, index) {
                console.log('marker-over', index);
            },
            onMarkerOut: function (event, index) {
                console.log('marker-out', index);
            },
            onMarkerClick: function (event, index) {
                console.log('marker-click', index);
            },
            onMarkerSelected: function (event, index, isSelected, selectedMarkers) {
                console.log('marker-select', index, isSelected, selectedMarkers);
                if (window.localStorage) {
                    window.localStorage.setItem(
                        'jvectormap-selected-markers',
                        JSON.stringify(selectedMarkers)
                    );
                }
            },

            onRegionTipShow: function (event, tip, code) {
                tip.html(tip.html() + ' (modified)');
            },
            onRegionOver: function (event, code) {
                console.log('region-over', code, map.getRegionName(code));
            },
            onRegionOut: function (event, code) {
                console.log('region-out', code);
            },
            onRegionClick: function (event, code) {
                console.log('region-click', code);
            },
            onRegionSelected: function (event, code, isSelected, selectedRegions) {
                console.log('region-select', code, isSelected, selectedRegions);
                if (window.localStorage) {
                    window.localStorage.setItem(
                        'jvectormap-selected-regions',
                        JSON.stringify(selectedRegions)
                    );
                }
            },
            onViewportChange: function (e, scale, transX, transY) {
                console.log('viewportChange', scale, transX, transY);
            }
        });

        jQuery('.list-markers :checkbox').change(function () {
            var index = jQuery(this).closest('li').attr('data-marker-index');

            if (jQuery(this).prop('checked')) {
                map.addMarker(index, markers[index], [values1[index], values2[index], values3[
                    index]]);
            } else {
                map.removeMarkers([index]);
            }
        });
        jQuery('.button-add-all').click(function () {
            jQuery('.list-markers :checkbox').prop('checked', true);
            map.addMarkers(markers, [values1, values2, values3]);
        });
        jQuery('.button-remove-all').click(function () {
            jQuery('.list-markers :checkbox').prop('checked', false);
            map.removeAllMarkers();
        });
        jQuery('.button-clear-selected-regions').click(function () {
            map.clearSelectedRegions();
        });
        jQuery('.button-clear-selected-markers').click(function () {
            map.clearSelectedMarkers();
        });
        jQuery('.button-remove-map').click(function () {
            map.remove();
        });
        jQuery('.button-change-values').click(function () {
            map.series.regions[1].clear();
            map.series.regions[1].setValues({
                "US-TX": "black",
                "US-CA": "black"
            });
        });
        jQuery('.button-reset-map').click(function () {
            map.reset();
        });
    });
</script>

Source Code

Download

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