A Lightweight JavaScript Library For Creating Interactive Vector Maps | Jsvectormap

jsVectorMap is a lightweight JavaScript library for creating interactive maps, supports all modern browsers and IE9 +. A regular JS library to display an interactive, dynamic, and vector world map on a page.

More Features:

• Clickable countries and regions
• Custom tags, labels, and tooltips
• Smooth panning and zooming
• Custom patterns
• A friendly touch

How to make use of it:

1. Load the jsvectormap.css and jsvectormap.js on the HTML web page.

<link rel="stylesheet" href="./dist/css/jsvectormap.css" />
<script src="./dist/js/jsvectormap.min.js"></script>

2. Create a placeholder for the vector map.

<div id="map"></div>

3. Load map information into the doc.

<script src="./dist/maps/world.js"></script>
<script src="./dist/maps/canada.js"></script>

4. Render a map of the world with clickable areas.

var map = new JsVectorMap({
    map: 'world', // 'canada', ...
    selector: '#map', 
})

5. Config the map with the next parameters:

var map = new JsVectorMap({
    map: 'world',
    backgroundColor: 'tranparent',
    draggable: true,
    zoomButtons: true,
    zoomOnScroll: true,
    zoomOnScrollSpeed: 3,
    zoomMax: 12,
    zoomMin: 1,
    zoomAnimate: true,
    showTooltip: true,
    zoomStep: 1.5,
    bindTouchEvents: true,
    focusOn: {}, // focus on regions on page load
    /**
     * Markers options
     */
    markers: null, // Set of markers to add to the map during initialization
    series: null, // Object with two keys: markers and regions. Each of which is an array of series configs to be applied to the respective map elements.
    markersSelectable: false,
    markersSelectableOne: false,
    markerStyle: {
      // Marker style
      initial: {
        r: 7,
        fill: 'black',
        fillOpacity: 1,
        stroke: '#FFF',
        strokeWidth: 5,
        strokeOpacity: .65
      },
      hover: {
        fill: '#3cc0ff',
        stroke: '#5cc0ff',
        cursor: 'pointer',
        strokeWidth: 2
      },
      selected: {
        fill: 'blue'
      },
      selectedHover: {}
    },
    // Marker Label style
    markerLabelStyle: {
      initial: {
        fontFamily: 'Verdana',
        fontSize: 12,
        fontWeight: 'bold',
        cursor: 'default',
        fill: 'black'
      },
      hover: {
        cursor: 'pointer'
      }
    },
    /**
     * Region styles
     */
    regionsSelectable: false,
    regionsSelectableOne: false,
    regionStyle: {
      // Region style
      initial: {
        fill: '#e3eaef',
        fillOpacity: 1,
        stroke: 'none',
        strokeWidth: 0,
        strokeOpacity: 1
      },
      hover: {
        fillOpacity: .7,
        cursor: 'pointer'
      },
      selected: {
        fill: '#000'
      },
      selectedHover: {}
    },
    // Region label style
    regionLabelStyle: {
      initial: {
        fontFamily: 'Verdana',
        fontSize: '12',
        fontWeight: 'bold',
        cursor: 'default',
        fill: '#35373e'
      },
      hover: {
        cursor: 'pointer'
      }
    } 
})

6. Set deal with a specified area.

map.setFocus({ 
  region: 'RU', 
  animate: true 
})

7. add markers to the map on the web page load.

var markers = [
    {
      name: 'Palestine',
      coords: [31.5, 34.8],
    },
    {
      name: 'Russia',
      coords: [61, 105],
    },
    {
      name: 'Geenland',
      coords: [72, -42],
    },
    {
      name: 'Canada',
      coords: [56, -106],
    },
];
var map = new JsVectorMap({
    map: 'world',
    selector: '#map',
    regionsSelectable: true,
    markersSelectable: true,
    labels: {
      markers: {
        render: function (index) {
          return markers[index].name
        }
      }
    },
    markers: markers
})

// or
map.addMarker('RU', {
  name: 'Russia',
  coords: [61, 105],
  label: 'Russia',
  offset: [15, 10]
})

8. Event handlers.

var map = new JsVectorMap({
    onRegionSelected: function (index, isSelected, selectedRegions) {
      console.log(index, isSelected, selectedRegions);
    },
    onMarkerSelected: function (code, isSelected, selectedMarkers) {
      console.log(code, isSelected, selectedMarkers)
    },
    onRegionTooltipShow: function (tooltip, code) {
      if (code === 'RU') {
        tooltip.selector.innerHTML = tooltip.text() + ' <b>(Hello Russia)</b>'
      }
    },
    onMarkerTooltipShow: function (tooltip, index) {
      tooltip.selector.innerHTML = '<h5 class="mb-0">'+tooltip.text()+'</h5>' + '<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><small class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</small>'
    },
})

JavaScript Library For Interactive Vector Maps, Jsvectormap Plugin/Github

See Demo And Download

Official Website(themustafaomar): Click Here

This superior jQuery/javascript plugin is developed by themustafaomar. For extra Advanced Usages, please go to the official website.