Overview

Vector js is a lightweight Javascript library for creating interactive maps and pretty data visualization.

CSS
<!-- vector map css -->
<link href="assets/libs/jsvectormap/css/jsvectormap.min.css" rel="stylesheet" type="text/css"> //html file
<script src="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}"></script> // laravel file
Javascript
<!-- Vector map-->
<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script> //html file
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script> //html file
<script src="{{ URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js') }}"></script> // laravel file
<script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script> // laravel file
Initjs (Custom js)
<!-- vector-maps init -->
<script src="assets/js/pages/vector-maps.init.js"></script> //html file
<script src="{{ URL::asset('build/js/pages/vector-maps.init.js') }}"></script> // laravel file
Examples:
Title Javascript
Markers 
function getChartColorsArray(chartId) {
console.log(chartId);
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).
getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf(",") === -1) {
var color = getComputedStyle(document.documentElement).
getPropertyValue(newValue);
if (color) return color; else return newValue;;
} else {
var val = value.split(',');
if(val.length == 2){
    var rgbaColor = getComputedStyle(document.documentElement).
    getPropertyValue(val[0]);
    rgbaColor = "rgba("+rgbaColor+","+val[1]+")";
    return rgbaColor;
} else {
    return newValue;
}
}
});
}
}

// world map with line & markers

var vectorMapWorldLineColors = getChartColorsArray
        ("world-map-line-markers");
var worldlinemap = new jsVectorMap({
map: "world_merc",
selector: "#world-map-line-markers",
zoomOnScroll: false,
zoomButtons: false,
markers: [{
name: "Greenland",
coords: [72, -42]
},
{
name: "Canada",
coords: [56.1304, -106.3468]
},
{
name: "Brazil",
coords: [-14.2350, -51.9253]
},
{
name: "Egypt",
coords: [26.8206, 30.8025]
},
{
name: "Russia",
coords: [61, 105]
},
{
name: "China",
coords: [35.8617, 104.1954]
},
{
name: "United States",
coords: [37.0902, -95.7129]
},
{
name: "Norway",
coords: [60.472024, 8.468946]
},
{
name: "Ukraine",
coords: [48.379433, 31.16558]
},
],
lines: [{
from: "Canada",
to: "Egypt"
},
{
from: "Russia",
to: "Egypt"
},
{
from: "Greenland",
to: "Egypt"
},
{
from: "Brazil",
to: "Egypt"
},
{
from: "United States",
to: "Egypt"
},
{
from: "China",
to: "Egypt"
},
{
from: "Norway",
to: "Egypt"
},
{
from: "Ukraine",
to: "Egypt"
},
],
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapWorldLineColors,
fillOpacity: 1,
},
},
lineStyle: {
animation: true,
strokeDasharray: "6 3 6",
},
})
World Vector Map with Markers 
var vectorMapWorldMarkersColors = getChartColorsArray("world-map-line-markers");
var worldemapmarkers = new jsVectorMap({
map: 'world_merc',
selector: '#world-map-markers',
zoomOnScroll: false,
zoomButtons: false,
selectedMarkers: [0, 2],
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapWorldMarkersColors,
fillOpacity: 1,
},
},
markersSelectable: true,
markers:[
{ name: "Palestine", coords: [31.9474,35.2272] },
{ name: "Russia", coords: [61.524,105.3188] },
{ name: "Canada", coords: [56.1304,-106.3468] },
{ name: "Greenland", coords: [71.7069,-42.6043] },
],
markerStyle:{
initial: { fill: "#038edc" },
selected: { fill: "red" }
},
labels: {
markers: {
render: function(marker){
return marker.name
}
}
}
})
World Vector Map with Image Markers 
var vectorMapWorldMarkersImageColors = getChartColorsArray("world-map-markers-image");
var worldemapmarkersimage = new jsVectorMap({
map: 'world_merc',
selector: '#world-map-markers-image',
zoomOnScroll: false,
zoomButtons: false,
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapWorldMarkersImageColors,
fillOpacity: 1,
},
},
selectedMarkers: [0, 2],
markersSelectable: true,
markers:[
{ name: "Palestine", coords: [31.9474,35.2272] },
{ name: "Russia", coords: [61.524,105.3188] },
{ name: "Canada", coords: [56.1304,-106.3468] },
{ name: "Greenland", coords: [71.7069,-42.6043] },
],
markerStyle: {
initial: {
image: "assets/images/logo-sm.png"
}
},
labels: {
markers: {
render: function(marker){
return marker.name
}
}
}
})
USA Vector Map 
var vectorMapUsaColors = getChartColorsArray("usa-vectormap");
var usmap = new jsVectorMap({
map: 'us_merc_en',
selector: "#usa-vectormap",
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapUsaColors,
fillOpacity: 1,
},
},
zoomOnScroll: false,
zoomButtons: false,
})
Canada Vector Map 
var vectorMapCanadaColors = getChartColorsArray("canada-vectormap");
var canadamap = new jsVectorMap({
map: 'canada',
selector: "#canada-vectormap",
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapCanadaColors,
fillOpacity: 1,
},
},
zoomOnScroll: false,
zoomButtons: false,
})
Russia Vector Map 
var vectorMapRussiaColors = getChartColorsArray("russia-vectormap");
var russiamap = new jsVectorMap({
map: 'russia',
selector: "#russia-vectormap",
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapRussiaColors,
fillOpacity: 1,
},
},
zoomOnScroll: false,
zoomButtons: false,
})
Spain Vector Map 
var vectorMapSpainColors = getChartColorsArray("spain-vectormap");
var spainmap = new jsVectorMap({
map: 'spain',
selector: "#spain-vectormap",
regionStyle: {
initial: {
stroke: "#9599ad",
strokeWidth: 0.25,
fill: vectorMapSpainColors,
fillOpacity: 1,
},
},
zoomOnScroll: false,
zoomButtons: false,
})
© Skote.