Leveraging the power of jVectorMap

Question

Leveraging the power of jVectorMap

Currently, I am implementing jVectormap for a project involving offices located in the USA, Netherlands, and Singapore. Is there a way to display only these specific countries on the map, while still being able to place markers indicating the office locations? Additionally, is it possible to make these marker locations clickable with links leading to another page?

javascript jvectormap

Answer 1

Answer №1

If you want to display only 3 countries, there are two methods you can try out.

First option is to update the jvectormap-world-mill file by including only the countries of your interest. This way, jvector will show only those specific countries. You can still utilize markers with this method.
Alternatively, you can use a standard world map and distinguish the 3 countries you want to highlight by giving them a contrasting color while coloring the rest in white or light grey.

The default color setting is as follows:

regionStyle: {
 initial: {
  //Default color for countries (light grey)
  fill: '#E5E5E5',
 }
}

To specify colors for your chosen countries, use this code:

   series: {
    regions: [{
     //Color for Dark countries
     scale: ['#bac0c6', '#9f2742'],
     normalizeFunction: 'linear',
     values: regions.reduce(function(p, c){
      p[c.name] = c.status;
      return p;
     },{}
    ),
   }]
  }

The regions data is defined like so:

var regions = [
 {name: 'AT', status: 0, link:'disable'},

On my blog at , I have implemented the second approach. Feel free to explore the code if you need clarification. I am using multiple colors to represent countries, hence the use of the reduce function. However, you can opt for simpler assignment of values if needed.

Answer 2

If you want to display only 3 countries, there are two methods you can try out.

First option is to update the jvectormap-world-mill file by including only the countries of your interest. This way, jvector will show only those specific countries. You can still utilize markers with this method.
Alternatively, you can use a standard world map and distinguish the 3 countries you want to highlight by giving them a contrasting color while coloring the rest in white or light grey.

The default color setting is as follows:

regionStyle: {
 initial: {
  //Default color for countries (light grey)
  fill: '#E5E5E5',
 }
}

To specify colors for your chosen countries, use this code:

   series: {
    regions: [{
     //Color for Dark countries
     scale: ['#bac0c6', '#9f2742'],
     normalizeFunction: 'linear',
     values: regions.reduce(function(p, c){
      p[c.name] = c.status;
      return p;
     },{}
    ),
   }]
  }

The regions data is defined like so:

var regions = [
 {name: 'AT', status: 0, link:'disable'},

On my blog at , I have implemented the second approach. Feel free to explore the code if you need clarification. I am using multiple colors to represent countries, hence the use of the reduce function. However, you can opt for simpler assignment of values if needed.

Leveraging the power of jVectorMap

Answer №1

Similar questions

Effortless Numerical Calculation for Trio Input Fields

Is there a way for me to collaborate on a footer control with a different website?

Having issues with retrieving latitude and longitude data from the Geocoding API in Node.js when using the OpenWeather API

Fetch Timeout Issue in React Native

creating a fresh window using AJAX in Ext JS

What is the best way to incorporate currency formatting into a table using sumtr and datatables?

Concealing a button once the collapse feature is toggled in Bootstrap

Why does updating state lead to a re-rendering loop while setting state does not encounter the same issue?

What is the best way to verify values in Vuejs based on their length?

Utilize Bootstrap modal to input information into the DataTables library

Do you have an index.d.ts file available for canonical-json?

Having difficulties updating a value in Angular through a function written in HTML- it refuses to update

Tips for utilizing the Apollo cache consistently during page transitions in NextJs

Tips for Avoiding Database Overflow Due to Excessive AJAX Spam Requests

Choose an element by its specific data attribute

Below are the steps to handle incorrect input after receiving only one letter:

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

Utilizing square brackets in Node.js for working with URLs

I am struggling with sending post requests in Node.js

Implementing user-driven filtering in a React table