Vector Maps
Maps below are powered by jVectorMap - a fast and easy plugin to display vector maps of the world.
World map
Basic example of vector map.
<div id="world_map_marker_1" class="h-400p"></div>
<!-- Vector Maps JS -->
<script src="vendors/vectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-de-merc.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-es-merc.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-us-aea-en.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-us-lcc-en.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-ru-mill.js"></script>
<script src="dist/js/vectormap-init.js"></script>
var mapData = {
"US": 298,
"SA": 200,
"AU": 760,
"IN": 2000000,
"GB": 120,
};
if( $('#world_map_marker_1').length > 0 ){
$('#world_map_marker_1').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
regionStyle : {
initial : {
fill : '#E6E9EB'
},
hover: {
"fill-opacity": 0.5,
}
},
markerStyle: {
initial: {
r: 12,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#007D88',
'stroke-width' : 2,
'stroke-opacity': 1
},
hover: {
r: 10,
'fill': '#007D88',
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
},
},
markers : [{
latLng : [21.00, 78.00],
name : 'INDIA : 350'
},
{
latLng : [-33.00, 151.00],
name : 'Australia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 250'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#99CBCF',
"SA": '#99CBCF',
"AU": '#99CBCF',
"IN": '#99CBCF',
"GB": '#99CBCF',
},
attribute: 'fill'
}]
},
hoverColor: '#c9dfaf',
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
});
}
Regions selection
Select regions and markers by user or programmatically.
<div id="regions_selection" class="h-400p"></div>
if( $('#regions_selection').length > 0 ){
var map_2,
markers = [
{latLng: [52.50, 13.39], name: 'Berlin'},
{latLng: [53.56, 10.00], name: 'Hamburg'},
{latLng: [48.13, 11.56], name: 'Munich'},
{latLng: [50.95, 6.96], name: 'Cologne'},
{latLng: [50.11, 8.68], name: 'Frankfurt am Main'},
{latLng: [48.77, 9.17], name: 'Stuttgart'},
{latLng: [51.23, 6.78], name: 'Düsseldorf'},
{latLng: [51.51, 7.46], name: 'Dortmund'},
{latLng: [51.45, 7.01], name: 'Essen'},
{latLng: [53.07, 8.80], name: 'Bremen'}
],
cityAreaData = [
887.70,
755.16,
310.69,
405.17,
248.31,
207.35,
217.22,
280.71,
210.32,
325.42
]
map_2 = new jvm.Map({
container: $('#regions_selection'),
map: 'de_merc',
regionsSelectable: true,
markersSelectable: true,
markers: markers,
backgroundColor: 'transparent',
markerStyle: {
initial: {
r: 12,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#007D88',
'stroke-width' : 2,
'stroke-opacity': 1
},
hover: {
r: 10,
'fill': '#007D88',
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
},
selected: {
r: 10,
'fill': '#007D88',
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
}
},
regionStyle: {
initial: {
fill: '#E6E9EB'
},
hover: {
"fill-opacity": 0.5,
},
selected: {
fill: '#99CBCF'
}
},
series: {
markers: [{
attribute: 'r',
scale: [8],
values: cityAreaData
}]
},
onRegionSelected: function(){
if (window.localStorage) {
window.localStorage.setItem(
'jvectormap-selected-regions',
JSON.stringify(map_2.getSelectedRegions())
);
}
},
onMarkerSelected: function(){
if (window.localStorage) {
window.localStorage.setItem(
'jvectormap-selected-markers',
JSON.stringify(map_2.getSelectedMarkers())
);
}
}
});
map_2.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ) );
map_2.setSelectedMarkers( JSON.parse( window.localStorage.getItem('jvectormap-selected-markers') || '[]' ) );
}
Random colors
Set colors directly for the map. The map is painted to the random colors upon loading.
<div id="random_colors" class="h-400p"></div>
if( $('#random_colors').length > 0 ){
var palette = ['#298DFF', '#99EECC', '#FF3333', '#F6A9D2', '#9AE859'];
var generateColors = function(){
var colors = {},
key;
for (key in map.regions) {
colors[key] = palette[Math.floor(Math.random()*palette.length)];
}
return colors;
},
map;
map = new jvm.Map({
map: 'ru_mill',
backgroundColor: 'transparent',
container: $('#random_colors'),
series: {
regions: [{
attribute: 'fill'
}]
}
});
function generateColor() {
map.series.regions[0].setValues(generateColors());
}
generateColor();
setInterval(function(){
map.series.regions[0].setValues(generateColors());
}, 1500);
}
Reverse projection
Convert pixel coordinates on map to the respective latitude and longitude coordinates.
<div id="reverse_projection" class="h-400p"></div>
if( $('#reverse_projection').length > 0 ){
var map_1,
markerIndex = 0,
markersCoords = {};
map_1 = new jvm.Map({
map: 'us_aea_en',
backgroundColor: 'transparent',
regionStyle : {
initial : {
fill : '#E6E9EB'
},
hover: {
"fill-opacity": 0.5,
}
},
markerStyle: {
initial: {
r: 8,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#007D88',
'stroke-width' : 2,
'stroke-opacity': 1
},
hover: {
r: 10,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#007D88',
'stroke-width' : 2,
'stroke-opacity': 1
},
selected: {
r: 10,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#007D88',
'stroke-width' : 2,
'stroke-opacity': 1
}
},
container: $('#reverse_projection'),
onMarkerTipShow: function(e, label, code){
map_1.tip.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map_1.removeMarkers([code]);
map_1.tip.hide();
}
});
map_1.container.click(function(e){
var latLng = map_1.pointToLatLng(
e.pageX - map_1.container.offset().left,
e.pageY - map_1.container.offset().top
),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
markersCoords[markerIndex] = latLng;
map_1.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
}
Region labels
Use static labels to render state code. By default labels are rendered in the center of region.
<div id="region_labels" class="h-400p"></div>
if( $('#region_labels').length > 0 ){
new jvm.Map({
map: 'us_aea_en',
backgroundColor: 'transparent',
container: $('#region_labels'),
regionStyle : {
initial : {
fill : '#E6E9EB'
},
hover: {
"fill-opacity": 0.5,
}
},
regionLabelStyle: {
initial: {
'font-family': 'inherit',
fill: '#007D88'
},
hover: {
fill: '#1F2327'
}
},
labels: {
regions: {
render: function(code){
var doNotShow = ['US-RI', 'US-DC', 'US-DE', 'US-MD'];
if (doNotShow.indexOf(code) === -1) {
return code.split('-')[1];
}
},
offsets: function(code){
return {
'CA': [-10, 10],
'ID': [0, 40],
'OK': [25, 0],
'LA': [-20, 0],
'FL': [45, 0],
'KY': [10, 5],
'VA': [15, 5],
'MI': [30, 30],
'AK': [50, -25],
'HI': [25, 50]
}[code.split('-')[1]];
}
}
}
});
}
Map legends
Create map legends automatically based on values available for specific scale.
<div id="map_legends" class="h-400p"></div>
if( $('#map_legends').length > 0 ){
new jvm.Map({
container: $('#map_legends'),
backgroundColor: 'transparent',
regionStyle : {
initial : {
fill : '#E6E9EB'
},
hover: {
"fill-opacity": 0.5,
}
},
map: 'us_aea_en',
markers: [
[61.18, -149.53],
[21.18, -157.49],
[40.66, -73.56],
[41.52, -87.37],
[35.22, -80.84],
[31.52, -87.37]
],
markerStyle: {
initial: {
fill: '#007D88',
r: 5,
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
},
hover: {
fill: '#007D88',
r: 5,
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
},
selected: {
fill: '#1F2327',
r: 5,
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
}
},
series: {
markers: [{
attribute: 'fill',
scale: ['#edf9fe', '#007D88'],
normalizeFunction: 'polynomial',
values: [408, 512, 550, 781],
legend: {
vertical: true
}
},{
attribute: 'image',
scale: {
bank: 'dist/img/icon-bank.png',
factory: 'dist/img/icon-factory.png'
},
values: {
'4': 'bank',
'5': 'factory'
},
legend: {
horizontal: true,
cssClass: 'jvectormap-legend-icons',
title: 'Business type'
}
}],
regions: [{
scale: {
blue: '#298DFF',
teal: '#007D88'
},
attribute: 'fill',
values: {
"US-KS": 'blue',
"US-MO": 'blue',
"US-IA": 'teal',
"US-NE": 'teal'
},
legend: {
horizontal: true,
title: 'Color'
}
},{
scale: {
redGreen: 'dist/img/bg-red-green.png',
yellowBlue: 'dist/img/bg-yellow-blue.png'
},
values: {
"US-TX": 'redGreen',
"US-CA": 'yellowBlue'
},
attribute: 'fill',
legend: {
horizontal: true,
cssClass: 'jvectormap-legend-bg',
title: 'Pattern',
labelRender: function(v){
return {
redGreen: 'low',
yellowBlue: 'high'
}[v];
}
}
}]
}
});
}
Drill down
Click on the state shows a map of this state's counties.
<div id="drill_down" class="h-400p"></div>
if( $('#drill_down').length > 0 ){
new jvm.MultiMap({
container: $('#drill_down'),
maxLevel: 1,
main: {
map: 'us_lcc_en',
backgroundColor: 'transparent',
regionStyle : {
initial : {
fill : '#E6E9EB'
},
hover: {
"fill-opacity": 0.5,
}
},
},
mapUrlByCode: function(code, multiMap){
return 'vendors/vectormap/us/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
});
}