Js Vector Maps

  1. Maps
  2. Js Vector Maps
OverviewOfficial Website

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

CSS
<!-- vector map css -->
<link href="{{url_for('static' ,filename='libs/jsvectormap/dist/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css" />
Javascript
<!-- Vector map-->
<script src="{{url_for('static' ,filename='libs/jsvectormap/dist/js/jsvectormap.min.js')}}"></script>
<script src="{{url_for('static' ,filename='libs/jsvectormap/dist/maps/world-merc.js')}}"></script>
<script src="{{url_for('static' ,filename='libs/jsvectormap/dist/maps/us-merc-en.js')}}"></script>
<script src="{{url_for('static' ,filename='libs/jsvectormap/dist/maps/canada.js')}}"></script>
<script src="{{url_for('static' ,filename='libs/jsvectormap/dist/maps/russia.js')}}"></script>
<script src="{{url_for('static' ,filename='libs/jsvectormap/dist/maps/spain.js')}}"></script>
Initjs (Custom js)
<!-- vector-maps init -->
<script src="{{url_for('static' ,filename='js/pages/vector-maps.init.js')}}"></script>
Add Package
yarn add jsvectormap --save
Remove Package
yarn remove jsvectormap

Or you can remove package by removing specific package from package.json

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,
})
© Velzon.
Design & Develop by Themesbrand