Map Options

Include Maps Javascript

<script src="https://sabalico.dev/maps/maps.min.js"></script>

Basic World Map

<div id="world-map" style="position: relative; width: 500px; height: 500px;"></div>

<script>

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

}

});

Specific Country Map

<script src="https://world-map.org/topojson/shn.js"></script>

<script>

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>

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.

responsive: true // false

var map = new Datamap({

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

responsive: true

});

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

map.resize();

});

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.

setProjection: function(element) {

var projection = d3.geo.equirectangular()

.center([-50, 50])

.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: {

}

Custom Maps

Import custom topojson file from url

dataUrl: null

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

borderWidth: 1,

borderOpacity: 1,

borderColor: '#FDFDFD'

fillOpacity: 0.75,

Popup Tooltip

popupTemplate: function(geo, data) {

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

},

// Disable popup on hover

popupOnHover: true

Highlight Border

highlightOnHover: true,

highlightFillColor: '#FC8D59',

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

highlightBorderWidth: 2,

highlightBorderOpacity: 1

Disable Popup

geographyConfig: {

popupOnHover: false,

highlightOnHover: false

}

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

map.labels({"fontSize": 10, labelColor: "#222"});

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

bubblesConfig: {

animate: true, // false

borderWidth: 2,

borderColor: '#FFFFFF',

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}

], {})

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

}

};

<!-- SVG gradients and filters used by bubbles -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inherit; width: 0; height: 0;">

<defs>

<!-- Horizontal Stripe pattern -->

<pattern id="horizontal-stripe" width="4" height="4" patternUnits="userSpaceOnUse">

<line x1="0" y1="2" x2="4" y2="2" stroke="blue" />

</pattern>

<!-- Vertical Stripe pattern -->

<pattern id="vertical-stripe" width="4" height="4" patternUnits="userSpaceOnUse">

<line x1="2" y1="0" x2="2" y2="4" stroke="green" />

</pattern>

<!-- Diagonal Stripe pattern -->

<pattern id="diagonal-stripe" patternTransform="rotate(45)" width="4" height="4" patternUnits="userSpaceOnUse">

<line x1="2" y1="0" x2="2" y2="4" stroke="#bada55" stroke-width="2" />

</pattern>

<!-- Circles pattern -->

<pattern id="circles" width="4" height="4" patternUnits="userSpaceOnUse">

<circle cx="2.5" cy="2.5" r="1.3" fill="green" />

</pattern>

<!-- Gradient pattern. Wouldn't really recommend this one. -->

<linearGradient id="gradient">

<stop offset="5%" stop-color="#F60" />

<stop offset="95%" stop-color="#FF6" />

</linearGradient>

<!-- Triangles pattern -->

<pattern id="triangle" width="8" height="8" patternUnits="userSpaceOnUse">

<polygon points="3,0 6,6 0,6" fill="purple" />

</pattern>

<!-- Red Radial Gradient -->

<radialGradient id="bad" cx="50%" cy="50%" r="50%" fx="65%" fy="35%">

<stop offset="0%" style="stop-color:#FFA196;stop-opacity:1" />

<stop offset="100%" style="stop-color:#FF3B30;stop-opacity:1" />

</radialGradient>

<!-- Yellow Radial Gradient -->

<radialGradient id="medium" cx="50%" cy="50%" r="50%" fx="65%" fy="35%">

<stop offset="0%" style="stop-color:#FFFF66;stop-opacity:1" />

<stop offset="100%" style="stop-color:#FFCC00;stop-opacity:1" />

</radialGradient>

<!-- Green Radial Gradient -->

<radialGradient id="good" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">

<stop offset="0%" style="stop-color:#B2FFCA;stop-opacity:1" />

<stop offset="100%" style="stop-color:#4CD964;stop-opacity:1" />

</radialGradient>

<filter id="dropShadow" x="-50%" y="-50%" width="250%" height="250%">

<feGaussianBlur in="SourceAlpha" stdDeviation="2">

</feGaussianBlur>

<!-- stdDeviation is how much to blur -->

<feOffset dx="1" dy="1" result="offsetblur">

</feOffset>

<!-- how much to offset -->

<feComponentTransfer>

<feFuncA type="linear" slope="0.75">

</feFuncA>

</feComponentTransfer>

<feMerge>

<feMergeNode>

</feMergeNode>

<!-- this contains the offset blurred image -->

<feMergeNode in="SourceGraphic">

</feMergeNode>

<!-- this contains the element that the filter is applied to -->

</feMerge>

</filter>

<filter id="bigShadow" x="-50%" y="-50%" width="250%" height="250%">

<feGaussianBlur in="SourceAlpha" stdDeviation="10">

</feGaussianBlur>

<!-- stdDeviation is how much to blur -->

<feOffset dx="3" dy="3" result="offsetblur">

</feOffset>

<!-- how much to offset -->

<feComponentTransfer>

<feFuncA type="linear" slope="1.5">

</feFuncA>

</feComponentTransfer>

<feMerge>

<feMergeNode>

</feMergeNode>

<!-- this contains the offset blurred image -->

<feMergeNode in="SourceGraphic">

</feMergeNode>

<!-- this contains the element that the filter is applied to -->

</feMerge>

</filter>

</defs>

</svg>

Sabalico Logo
Sabali Mail Logo
Sabali Analytics Logo
Senty Logo
World Map Logo
SEO Guide Logo
Keyword Tool Logo
Domain Search Logo
What is my IP Logo
My Device Logo
My Browser Logo
My Location Logo
Time Zone Logo
My Weather Logo
My Galaxy Logo
The Moon Logo
Flight Tracker Logo
Periodic Table Logo
Test Speed Logo
Website On Logo
Page Load Logo
Code Editor Logo
Format Code Logo
HTML Validator Logo
CSS Validator Logo
ASCII Table Logo
HTML Symbols Logo
Emoji Symbols Logo
File Save Logo
File Convert Logo
Encode File Logo
Sitemap Generator Logo
Generator Password Logo
QR Code Generator Logo
Barcode Generator Logo
Online Sign Logo
PDF Reader Logo
Thesaurus Online Logo
Dictionary Online Logo
Counter Word Logo
Text Convert Logo
Word Spinner Logo
Lorem Ipsum Generator Logo
Sprite Sheet Logo
Edit Picture Logo
Resize Image Logo
Image Compress Logo
Image Color Logo
Image Crop Logo
Combine Images Logo
Favicon Generator Logo
Color Palette Logo
Color Picker Logo
Color Mix Logo
Color Convert Logo
CSS Gradient Logo
rStatistics Logo
Free Data Logo
Random Data Logo
World Population Logo
Unit Convert Logo
Data Convert Logo
Coordinate Converter Logo
Temperature Convert Logo
Currency Convert Logo
Phone Country Logo
To-Do List Logo
Calendar Free Logo
Free Calculator Logo
Finance Calculator Logo
Loan Calculator Logo
Calculator Mortgage Logo
Stock Calculator Logo
Bond Calculator Logo
Tax Calculator Logo
Tip Calculator Logo
Gas Mileage Logo
Generator Meme Logo
Coronavirus Tracker Logo
2020 Election Logo

Warning: file_get_contents(https:sabali.co/maps/time-zones.js): failed to open stream: No such file or directory in /home/sabalico/public_html/addons/domains/world-map.org/maps/map-settings.php on line 546