JVectorMap#

Jvectormap is a library that allows you to use maps on your dashboards. In our standard implementation, we currently provide allow displaying a map, and with a scale on city name, display a number by city.

Official library documentation : https://jvectormap.com/

• Sample code in JSON
• Request
• Response
• Options
• Going further

#Sample code in JSON

The sample code below should be pasted in an Application dashboard to use the JVectorMap library.

{
  "type": "chart",
  "col": 0,
  "row": 1,
  "sizeX": 12,
  "sizeY": 20,
  "title": "",
  "chart": {
    "dynamic-parameters": [
      "datepicker"
    ],
    "component": "jvectormap",
    "options": {
      "map": "fr_regions_mill"
    },
    "request": {
      "data": {
        "fields": {
          "qte": [
            "sum"
          ],
          "ca": [
            "sum"
          ]
        }
      },
      "scale": {
        "fields": [
          "city"
        ]
      }
    }
  }
}

#Request

There are two conditions that need to be respected in order to have a correct JVectorMap request.

#First condition

The request must contain at least one data, it can be multiple like in the previous sample

"data": {
  "fields": {
    "qte": [
      "sum"
    ],
    "ca": [
      "sum"
    ]
  }
},

That data will appear on each point of the map (marker)

#Second condition

The request must contain at least one scale, it will be use to compute marker

The value generated by the scale will be send through the google geocoding api : https://www.npmjs.com/package/geocoding

If the value generate valid lat, lng coordinates, the marker will apear with the data associated

"scale": {
  "fields": [
    "city"
  ]
}

#Response

A correct answer with my previous example look like that

{
    "scales": {
        "city": "Bordeaux"
    },
    "data": {
        "qte": {
            "sum": [
                {
                    "city": "Bordeaux",
                    "value": 18073
                }
            ]
        },
        "ca": {
            "sum": [
                {
                    "city": "Bordeaux",
                    "value": 190987.45
                }
            ]
        }
    }
},
{ .....

That answer will display a marker on Bordeaux (looking the position of the city with google geocoding) and with 2 value : sum qte, and sum ca

#Options

options.map : Allow the user to select a map

List of all maps

#Going further

Of course that library give you a sample of usage. But jvectormap offer much more feature

Looking the code in "forepaas/jvectormap/FpJvectormap.jsx" and the documentation to create your own chart component you can customize it.