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.
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.
You can also check our other development ChatCompose: ChatBots for Conversational Marketing.
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).
For a correct load, you should put the javascript file right before the body tag and the WorldMap object.
- 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" };