Settings

Include Maps Javascript

Basic World Map

var map = new Datamap({

element: document.getElementById("world-map")

});

</script>

See example world map here.

Basic Map Config

var map = new Datamap({

scope: 'world',

element: document.getElementById('container1'),

geographyConfig: {

popupOnHover: false

}

});

USA Map

var map = new Datamap({

element: document.getElementById('map'),

scope: 'usa'

});

Specific Country Map

var map = new Datamap({

scope: 'shn',

element: document.getElementById('country-map'),

setProjection: function(element) {

var projection = d3.geo.equirectangular()

.center([-5.75, -16])

.scale(30000)

.translate([element.offsetWidth / 2, element.offsetHeight / 2]);

var path = d3.geo.path()

.projection(projection);

return {path: path, projection: projection};

})

</script>

Custom Maps

Import custom topojson file from url. By specifying a dataUrl, Datamaps will attempt to fetch that resource as TopoJSON. If you are using a custom map, you'll probably want to specify your own setProjection method as well.

var map = new Datamap({

element: document.getElementById('container'),

geographyConfig: {

dataUrl: '/custom.json'

scope: 'custom',

setProjection: function(element, options) {

var projection, path;

projection = d3.geo.albersUsa()

.center([long, lat])

.scale(element.offsetWidth)

.translate([element.offsetWidth / 2, element.offsetHeight / 2]);

}

path = d3.geo.path()

.projection( projection );

return {path: path, projection: projection};

}

});

Map Colors

Any hex, color name or rgb/rgba value

var map = new Datamap({

element: document.getElementById('map'),

fills: {

defaultFill: 'rgba(23,48,210,0.9)'

}

});

Element

Id of the element that the map will render to.

element: document.getElementById('map-div')

Height & Width

height: 200,

width: 300,

Responsive

Set responsive true or false to adjust the map to different device screen sizes. Set responsive to true and then listen for resize events on window, and call Datamaps.prototype.resize. Avoid setting the height and width of the container with hard pixel values, instead use percent values. (use 50% instead of 500px. If the aspect ratio of your custom map is not the default 16:9 (0.5625), you should use the aspectRatio option to set it appropriately (eg. 0.3 for a 3:1 aspect ratio).

var map = new Datamap({

element: document.getElementById('container'),

responsive: true

});

var map = new Datamap({

element: document.getElementById('responsive-map'),

responsive: true

});

// Pure JavaScript

window.addEventListener('resize', function() {

map.resize();

});

// Alternatively with d3

d3.select(window).on('resize', function() {

map.resize();

});

// Alternatively with jQuery

$(window).on('resize', function() {

map.resize();

});

Map Zoom

You can override the default projection by setting your own setProjection(element) function.

var map = new Datamap({

scope: 'world',

element: document.getElementById('container1'),

setProjection: function(element) {

var projection = d3.geo.equirectangular()

.center([19, -3])

.rotate([4.4, 0])

.scale(400)

.translate([element.offsetWidth / 2, element.offsetHeight / 2]);

var path = d3.geo.path()

.projection(projection);

return {path: path, projection: projection};

Map Events

All events are bubbled up to the root svg element and to listen to events, use the done callback.

var map = new Datamap({

element: document.getElementById('container'),

done: function(datamap) {

datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {

alert(geography.properties.name);

});

}

});

Scope

Currently supports 'usa' and 'world', however with custom map data you can specify your own

scope: 'world'

Projections

projection: 'equirectangular'

Projection	Code
Orthographic Projection	projection: 'orthographic'
Conic Conformal	projection: 'conicConformal'
Conic Equal Area	projection: 'conicEqualArea'
Conic Equidistant	projection: 'conicEquidistant'
Azimuthal Equal Area	projection: 'azimuthalEqualArea'
Azimuthal Equidistant	projection: 'azimuthalEquidistant'
Stereographic	projection: 'stereographic'
Gnomonic	projection: 'gnomonic'
Equirectangular	projection: 'equirectangular'
Mercator	projection: 'mercator'
Transverse Mercator	projection: 'transverseMercator'
Albers USA	projection: 'albersUsa'

View all map projections here.

Set Custom Projection

Edit the latitude, longitude and scale to center on your specific area. You can use the rotate and translate to position the map however you want. The setProjection option takes 2 arguments, element as a DOM element, options as the original options you passed in. It should return an object with two properties: path as a d3.geo.path, projection as a d3.geo.projection.

setProjection: function(element) {

var projection = d3.geo.equirectangular()

.center([longitude, latitude])

.rotate([4.4, 0])

.scale(200)

.translate([element.offsetWidth/2, element.offsetHeight/2]);

var path = d3.geo.path()

.projection(projection);

return {path: path, projection: projection};

}

Callback Function

Execute callback function upon map load

done: function() {}

Geography Config

geographyConfig: {

}

Hide Antarctica

Options: true, false

hideAntarctica: false

Hide Alaska & Hawaii (USA Only)

Options: true, false

hideHawaiiAndAlaska: true

Rotate Map

Coordinates paired as [longitude, latitude]

rotation: [97,-30]

Country Borders & Opacity

geographyConfig: {

borderWidth: 1,

borderOpacity: 1,

borderColor: '#FDFDFD'

fillOpacity: 0.75,

}

Popup Tooltip

Data from the array can also be added to the hover popup for example: '+data.numberOfThings+'

geographyConfig: {

popupTemplate: function(geo, data) {

return ['<div class="hoverinfo">'+geo.properties.name+'</div>'].join('');

popupOnHover: true

}

Disable Popup

geographyConfig: {

highlightOnHover: false,

popupOnHover: false

}

Highlight Border

highlightOnHover: true,

highlightFillColor: '#FC8D59',

highlightBorderColor: 'rgba(250, 15, 160, 0.2)',

highlightBorderWidth: 2,

highlightBorderOpacity: 1

Country Fill Colors

Values map to the "fillKey" of [data] or [bubbles]

fills: {

bubbleMax: "#8F2C4B",

bubbleMin: "#8F5974",

defaultFill: "#859EDE",

MIN: "#d7eebd",

LOW: "#8fd3bd",

MEDIUM: "#45aec0",

HIGH: "#317bb4",

MAX: "#084182",

RGB: "rgba(0,244,244,0.9)"

}

Map Data

dataUrl: 'data.csv',

dataType: 'csv',

data: {

NY: {

fillKey: 'min'

}

Update Data on Timeout

window.setTimeout(function() {

map.updateChoropleth({

TX: {

fillKey: 'max'

}

})

}, 1500)

Map Labels

Adding labels will display the topojson id on the map in the location.

map.labels();

// For custom options

map.labels({

fontSize: 10,

fontFamily: Verdana,

labelColor: "#222",

lineWidth: 1,

});

// Custom Map Labels

// Keys are uppercase 2 letter state codes. Values will be substituted for default label text

newLabels = {'AK':'Alaska', 'AL':'123'};

map.labels({'customLabelText': newLabels});

Map Graticules

map.graticule();

Map Arcs

arcConfig: {

strokeColor: '#DD1C77',

strokeWidth: 1,

arcSharpness: 1,

animationSpeed: 600

}

Set Great Arc

map.arc([{

origin: {

latitude: 61,

longitude: -149

destination: {

latitude: -22,

longitude: -43

}

}], {

greatArc: true,

animationSpeed: 2000

});

View map arcs here.

Map Bubbles

For further customization, you can set these properties on each bubble to override the options parameter (or default options):

bubblesConfig: {

animate: true, // false

borderWidth: 2,

borderColor: '#FFFFFF',

borderOpacity: 0.8,

fillOpacity: 1,

popupOnHover: true,

popupTemplate: function(geography, data) {

return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';

}

Center Map Bubbles

map.bubbles([

{centered: 'USA', fillKey: 'min', radius: 10},

{centered: 'AUS', fillKey: 'max', radius: 15}

], {})

Erase Map Bubbles

map.bubbles([])

View map bubbles here.

Complete Map Options

var defaultOptions = {

//currently supports 'usa' and 'world', however with custom map data you can specify your own

scope: 'world',

//returns a d3 path and projection functions

setProjection: setProjection,

//style of projection to be used. try "mercator"

projection: 'equirectangular',

//callback when the map is done drawing

done: function() {},

fills: {

//the keys in this object map to the "fillKey" of [data] or [bubbles]

defaultFill: '#ABDDA4',

lt50: "rgba(0,244,244,0.9)",

gt50: "red"

geographyConfig: {

//if not null, datamaps will fetch the map JSON (currently only supports topojson)

dataUrl: null,

hideAntarctica: true,

borderWidth: 1,

borderColor: '#FDFDFD',

//this function should just return a string

popupTemplate: function(geography, data) {

return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';

//disable the popup while hovering

popupOnHover: true,

highlightOnHover: true,

highlightFillColor: '#FC8D59',

highlightBorderColor: 'rgba(250, 15, 160, 0.2)',

highlightBorderWidth: 2

bubblesConfig: {

borderWidth: 2,

borderColor: '#FFFFFF',

popupOnHover: true,

popupTemplate: function(geography, data) {

return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';

fillOpacity: 0.75,

highlightOnHover: true,

highlightFillColor: '#FC8D59',

highlightBorderColor: 'rgba(250, 15, 160, 0.2)',

highlightBorderWidth: 2,

highlightFillOpacity: 0.85

arcConfig: {

strokeColor: '#DD1C77',

strokeWidth: 1,

arcSharpness: 1,

animationSpeed: 600

}

};

<defs>

</pattern>

</pattern>

</pattern>

</pattern>

</linearGradient>

</pattern>

</radialGradient>

</radialGradient>

</radialGradient>

</feGaussianBlur>

</feOffset>

</feFuncA>

</feComponentTransfer>

</feMergeNode>

</feMergeNode>

</feMerge>

</filter>

</feGaussianBlur>

</feOffset>

</feFuncA>

</feComponentTransfer>

</feMergeNode>

</feMergeNode>

</feMerge>

</filter>

</defs>

</svg>