WorldMaps.js Cloropleth example and code

The following code is an example cloropleth with the mercator projection, and a custom style. Press play for it to show, or click on the table to select the cloropleth plugin, the location column and the data column. You can also test the charts by selecting one or multiple columns of data and the location.


 <div id="mapcontainer" align="center"> <!-- You can place the container wherever you want, but it has to be before loading the code-->
<link rel="stylesheet" href="css/worldmap.v1.css"> 
<script src="js/worldmap.v1.js"></script>
<script>


   var createmap = new Worldmap({  
    elementid: "#mapcontainer",
     mapstyle: {   // Change the map style
       ocean: "#4A5B62",
        region: "#F3F3F3",
        border : "#ffffff"
    },
    project: {  
        name: "Mercator",
        //zoomlevel: 6 // If you want it to zoom into an area
        //zoomarea:[-122.417, 37.775] 
                           },
   // showtable:false, // Hide Table
   // editpanel:false,  // Hide Edit
   dataType: 'csv',
   dataurl: 'countriesdata.csv', // location of the file
   defaultfill: "steelblue", // default fill color
   defaultsize: 30,
   player: true // show player
   }); 
 
// Adds the button an 
 
$(document).ready(function(){
     $("#playeranim").click(function() {
   setTimeout(function(){createmap.update([{"location":"US","color":"darkgreen"},{"location":"MX","color":"brown"},{"location":"CO","color":"#BC0EF6"},{"location":"CU","color":"#F6DF0E"},{"location":"AR","color":"#0E5FF6"},{"location":"CL","color":"#0EF62D"},{"location":"BR","color":"#0E5FF6"}],"cloropleth")}, 4000);
 
});});

  </body>