Scalable Geographical map visualization for the web

WorldMap.js is a javascript library based on D3.js to visualize json data or spreadsheets on a map by plotting graphs, markers, text, images, arcs and bubbles. It also has some basic GIS functionality such as loading and drawing objects in Geojson format.

The library is fully customisable allowing you to set almost all the styles of the map. You can customize the map style, the objects on the map and the animations by setting custom values into the Worldmap object. You can also choose which data you want to display by selecting specific columns or attributes in the table panel.

You can choose from more than 26 projections and 30 countries, and select your data sources form a csv and json file a javascript variable or a table.

  • 6 default map styles and the option to create your own
  • 8 plugins (cloropleth, bubbles, pulse, text, images, arcs, bar chart, stacked bar)
  • Table view and edit/draw plugin
  • All color schemes and sizes can be easily modified
  • CSV, JSON and javascript object compatible

BASED ON D3, JQUERY AND BOOTSTRAP

The WorldMap.js library is powered by some of the latest versions of Bootstrap, jQuery and and D3.js.

WorldMap makes it easy to generate D3-based maps by wrapping the code required to construct the entire globe or projection. You don’t need to write D3 code anymore just load an object.

  • Source code examples
  • Tutorials on how to work with the library
  • Styling guides for creating new visualisations
  • Free and open source

DOWNLOADS & INSTALLATION

Download WorldMap.v1.css | Download WorldMap.v1.js
Files+Dependencies: WorldMap.js.all.zip

To use the library and the plugins you will need to load the stylesheet file and the javascript file into your website or computer. You will also have to load the following dependencies (or you can download them in the zip above and manually add them).

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
 <script src="//d3js.org/queue.v1.min.js"></script> 

For a correct load, you should put the javascript file right before the body tag and the WorldMap object.

<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",
   });


  • Examples and Code

WorldMap.js Default values.

Check bellow for the default values of the visualisation.

var defaultsettings = {
    elementid: "body",  // html container of the map
    width: $( window ).width(),  // The size of the map, default is window size
    height: $( window ).height(),
    mapstyle: {  // To syle the map
        ocean: "#4A5B62",
        region: "#F3F3F3",
        border : "#ffffff",
        globe: "lightblue"
    },
    project: {  // Proyection and zoom configurations
        name: "Mercator",
        zoomlevel: 1,
        zoomarea:false,
        center: [38,-97]
    },
    dataType: false, // Type of data (csv or json)
    dataurl: false, // location of the csv or json file
    data: [], // The data
    plugin: false, // The plugin (cloropleth, bubbles, pulse, arcs, text, images, barchart)
    keys: ["default","Data","color","size"],
    graticule: 'false', // show graticule
    editpanel: 'true', // show edit
    showtable: 'true', // show table
    animate: 'false', 
    delay: 500, 
    animduration: 1000,
    colorscale: d3.scale.category20(),
    defaultfill: "#4682B4", // default color for the objects
    defaultsize: 30, // default size for the objects
    font: {  // font style for the text
        family: 'ANTON',
        color: false,
        size : false
    },
    image: { // image url and size
        url: 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png',
        width: 30,
        height : 30
    },
    antartica:false, // show antartica
    zoomable:true, // allow zooming
    shownames:false, // show country/region names
    region:false, // Select the country in 2 letter code
    player:false // show player

    }
        



WorldMap.js data input formats.

Check bellow for the data input formats. They only apply for the javascript input options. Data load from the table created (csv or json) doesn't require any formatting, just to select the appropriate column.

When specifying a country the codes can be, name, 2 letter code, 3 letter code and numeric.

//Cloropleth format color

[{"location":"AFG","color":"#F60E0E"},{"location":"AGO","color":"#0EF663"},{"location":"ALB","color":"#BC0EF6"},{"location":"ARE","color":"#F6DF0E"},{"location":"ARG","color":"#0E5FF6"},{"location":"ARM","color":"#0EF62D"}]

//Cloropleth format gradient (set the color in the object under defaultfill:)

[{"location":"AG", area:44},
{"location":"DZ", area:238174},
{"location":"AZ", area:8260},
{"location":"AL", area:2740},
{"location":"AM", area:2820},
{"location":"AO", area:124670},
{"location":"AS", area:20},
{"location":"AR", area:273669},
{"location":"AU", area:768230},
{"location":"BH", area:71}]


// Bubbles and pulse format

[ {name: 'Bubble 1', coordinates: [21.32,  -7.32], size: 45, color: 'red'},
 {name: 'Bubble 2', coordinates: [12.32, 27.32], size: 25, color: 'blue'},
 {name: 'Bubble 3', coordinates: [0.32, 23.32], size: 35, color: 'magenta'},
 {name: 'Bubble 4', coordinates: [-31.32, 23.32], size: 55, color: 'black'}]


//Barchart and Stackedbar format

[{"location":"AFG","2008":"14487.21683","2009":"3613.37333","2010":"3117.170779"},{"location":"AGO","2008":"2014.401013","2009":"9924.408216","2010":"154.4986071"},{"location":"ALB","2008":"4079.154455","2009":"16582.25541","2010":"3377.846283"},{"location":"ARE","2008":"13798.98219","2009":"10222.43894","2010":"14935.56198"},{"location":"ARG","2008":"16823.42243","2009":"4667.990667","2010":"14900.90889"},{"location":"ARM","2008":"2436.276018","2009":"19398.35665","2010":"18885.26967"}]


// arc format

[{origin:"ES",target:"US"},{origin:"US",target:"CL"},{origin:"CL",target:"AR"},{origin:"AR",target:"BR"},{origin:"BR",target:"EG"},{origin:"EG",target:"BE"}]

// you can also specify custom coordinates for the origin and target


[{origin:[21.32,  -7.32],target:[12.32, 27.32]},{origin:[12.32, 27.32],target:"[-31.32, 23.32]"}]

// Text format

[{"location":"AFG","text":"14487.21683","size":"20","color":"red"},{"location":"AGO","text":"2014.401013","size":"15","color":"blue"},{"location":"ALB","text":"4079.154455","size":"18","color":"black"},{"location":"ARE","text":"13798.98219","size":"15","color":"green"},{"location":"ARG","text":"16823.42243","size":"30","color":"pink"},{"location":"ARM","text":"2436.276018","size":"35","color":"yellow"}]

// OR

[{"latitude":29.9510658,"longitude":-90.0715323,"text":"14487.21683","size":"20","color":"red"},{"latitude":40.65,"longitude":-73.95,"text":"2014.401013","size":"15","color":"blue"},{"latitude":42.2808256,"longitude":-83.7430378,"text":"4079.154455","size":"18","color":"black"},{"latitude":34.0522342,"longitude":-118.2436849,"text":"13798.98219","size":"15","color":"green"},{"latitude":28.5383355,"longitude":-81.3792365,"text":"16823.42243","size":"30","color":"pink"},{"latitude":40.4406248,"longitude":-79.9958864,"text":"2436.276018","size”:”25","color":"yellow"}]


// IMAGE FORMAT

[{"latitude":29.9510658,"longitude":-90.0715323,"image":"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png","width":"20","height":"20"},{"latitude":40.65,"longitude":-73.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":28.5383355,"longitude":-81.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"}]


WorldMap.js Regional and projection options.

Check bellow for the default values for the regional and projection options.

// Regional and projection options

var projectionnames={
 "Aitoff": d3.geo.aitoff(),
  "Boggs Eumorphic": d3.geo.boggs(),
  "Craster Parabolic (Putnins P4)": d3.geo.craster(),
  "Cylindrical Equal-Area": d3.geo.cylindricalEqualArea(),
  "Eckert I": d3.geo.eckert1(),
  "Eckert III": d3.geo.eckert3(),
  "Eckert IV": d3.geo.eckert4(),
  "Eckert V": d3.geo.eckert5(),
  "Equidistant Cylindrical (Plate Carrée)": d3.geo.equirectangular(),
  "Fahey": d3.geo.fahey(),
  "Foucaut Sinusoidal": d3.geo.foucaut(),
  "Gall (Gall Stereographic)": d3.geo.cylindricalStereographic(),
  "Ginzburg VIII (TsNIIGAiK 1944)": d3.geo.ginzburg8(),
  "Kavraisky VII": d3.geo.kavrayskiy7(),
  "Larrivée": d3.geo.larrivee(),
  "McBryde-Thomas Flat-Pole Sine (No. 2)": d3.geo.mtFlatPolarSinusoidal(),
  "Mercator": d3.geo.mercator(),
  "Miller Cylindrical I": d3.geo.miller(),
  "Mollweide": d3.geo.mollweide(),
  "Natural Earth": d3.geo.naturalEarth(),
  "Nell-Hammer": d3.geo.nellHammer(),
  "Robinson": d3.geo.robinson(),
  "Sinusoidal": d3.geo.sinusoidal(),
  "van der Grinten (I)": d3.geo.vanDerGrinten(),
  "Wagner VI": d3.geo.wagner6(),
  "Wagner VII": d3.geo.wagner7(),
  "Winkel Tripel": d3.geo.winkel3(),
  "Orthographic": d3.geo.orthographic() 
    
}
var regionnames={
  "US": "us.json",
  "CL": "chile.json",
  "AR": "argentina.json",
  "BR": "brazil.json",
  "ES": "espana.json",
  "JP": "japan.json",
  "DE": "germany.json",
  "CN": "china.json",
  "GB": "uk.json",
  "IT": "italy.json",
  "IN": "india.json",
  "INdistricts": "indiadistricts.json",
  "FR": "france.json",
  "PK": "pakistan.json",
  "NL": "netherlands.json",
  "IE": "ireland.json",
  "ZA": "southafrica.json",
  "DK": "denmark.json",
  "TR": "turkey.json",
  "PT": "portugal.json",
  "SE": "sweden.json",
  "NZ": "newzealand.json",
  "PH": "philippines.json",
  "FI": "finland.json",
  "PL": "poland.json",
  "DZ": "algeria.json",
  "AZ": "azerbaijan.json",
  "PE": "peru.json",
  "MX": "mexico.json",
  "RU": "russia.json",
  false: "worldtemplate.json"
    
};