WorldMap.js Arcs example and code

The following code is an example arcs map with the Eckert IV projection, and a custom style. Press play for it to show the arcs.


 <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: "#ffffff",
        region: "lightgreen",
        border : "#ffffff"
    },
    project: {  
        name: "Eckert IV",
        //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() {
  createmap.update([{origin:"US",target:"ES"},{origin:"US",target:"CL"},{origin:"MX",target:"CO"},{origin:"AR",target:"BR"},{origin:"US",target:"CA"}],"arcs");
});});

  </body>