Map

For vector maps we use the plugin from jvectormap. This plugin is lightweight and does not depend on jquery.

Example

			              
					            <div id="worldmap" class="w-full" style="min-height: 18rem"></div>
				            
				          

Don't forget to call and editing map value

			              
					            <script src="vendors/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="vendors/jsvectormap/dist/maps/world.js"></script>
<!-- Maps -->
<script>
const worldmap = document.getElementById('worldmap');
if ( worldmap != null) {
  const map = new jsVectorMap({
    selector: "#worldmap",
    map: "world",
    visualizeData: {
      scale: ['#eeeeee', '#3b82f6'],
      values: {
        IN: 259,
        US: 220,
        ID: 175,
        CA: 160,
        BR: 175,
        AR: 155,
        ES: 235,
        UK: 227,
        RU: 176,
        // ...
      }
    }
  });
}
</script>
				            
				          

Demo config available in src/js/vendor.js function myMaps();

For more documentation read in https://jvm-docs.vercel.app/docs/introduction