DashByte - Premium Dashboard Template

Maps and Icons

Vector Maps

A vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. Read the Official JQVMap Documentation for a full list of instructions and other options.

World Map

Below is a basic example of displaying the world map.

$('#vmap').vectorMap({
  map: 'world_en',
  backgroundColor: '#fff',
  borderColor: '#fff',
  color: '#5f748a',
  selectedColor: null,
  hoverColor: null,
  hoverOpacity: 0.8,
  enableZoom: false,
  showTooltip: false
});

Enable Zoom

Whether to enable map zoom ( true or false, defaults to true).

$('#vmap2').vectorMap({
  map: 'world_en',
  backgroundColor: '#fff',
  borderColor: '#fff',
  color: '#5f748a',
  selectedColor: null,
  hoverColor: null,
  hoverOpacity: 0.8,
  enableZoom: true,
  showTooltip: false
});

Show Tooltip

Whether to show tooltips on mouseover (true or false, defaults to true).

$('#vmap3').vectorMap({
  map: 'world_en',
  backgroundColor: '#fff',
  borderColor: '#fff',
  color: '#5f748a',
  selectedColor: null,
  hoverColor: null,
  hoverOpacity: 0.8,
  enableZoom: false,
  showTooltip: true
});

Map By Country

In this example, we are showing map of the United States.

$('#vmap4').vectorMap({
  map: 'usa_en',
  backgroundColor: '#fff',
  borderColor: '#fff',
  color: '#5f748a',
  selectedColor: null,
  hoverColor: null,
  hoverOpacity: 0.8,
  enableZoom: false,
  showTooltip: true
});

Selected Region

In this example, we are showing pre selected region in country of United States.