JQVMap
jQuery Vector Map Library
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                // Loads world map by default
                jqvmap: true,

                // certain maps can be loaded like so
                jqvmap: {
                    maps: ['usa', 'brazil']
                }
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div id="vmap" class="h-300px"></div>
jQuery( function() {
  jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: 'transparent',
    color: '#C4CBE8',
    hoverOpacity: 0.7,
    selectedColor: '#586EBE',
    enableZoom: false,
    showTooltip: false,
    values: {
      "af": "16.63",
      // ...
    },
    scaleColors: ['#C4CBE8', '#9DAAD9', '#7688C9', '#586EBE'],
    normalizeFunction: 'polynomial'
  });
});

{title}