WorldMap.js Images and text example and code

The following code is an example map with text and images with the Mercator projection, and the default style. Press play for it to show the images.

 <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",
    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
   
   data:[{"location":"RU","text":"14487.21683","size":"20","color":"black"},{"location":"CA","text":"14487.21683","size":"20","color":"white"},{"location":"BR","text":"2014.401013","size":"25","color":"white"},{"location":"GB","text":"4079.154455","size":"18","color":"black"},{"location":"GL","text":"13798.98219","size":"15","color":"green"},{"location":"MX","text":"16823.42243","size":"20","color":"blue"},{"location":"US","text":"2436.276018","size":"25","color":"yellow"}], // location of the file
   defaultfill: "steelblue", // default fill color
   plugin: 'text',
   defaultsize: 30,
   player: true // show player
   }); 
 
 //The button action
$(document).ready(function(){
     $("#playeranim").click(function() {
  createmap.update([{"latitude":29.9510658,"longitude":-130.0715323,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"20","height":"20"},{"latitude":20.65,"longitude":-163.95,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"15","height":"20"},{"latitude":42.2808256,"longitude":-83.7430378,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"18","height":"20"},{"latitude":34.0522342,"longitude":-118.2436849,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"15","height":"20"},{"latitude":68.5383355,"longitude":-181.3792365,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"30","height":"20"},{"latitude":40.4406248,"longitude":-79.9958864,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"35","height":"20"}],"images");
});});

  </body>