Skip to content
GWT Wrapper for jQuery Vector Map Library (jqvmap)
Branch: development
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


GWT Wrapper for jQuery Vector Map Library (jqvmap)


Download vmap-JavaScript files

You need to download one of the jquery.vmap.*.js files from the GitHub repository. And at least one jquery.vmap.{country}.js file from the maps/ folder. Put those files somewhere on your webserver, so that your GWT application can fetch them. And make sure that jQuery is available.


Add a new dependency to you pom.xml


Inherit the GWT module

No matter if you use this library with Maven or as JAR file, you need to inherit the GWT module in your projectName.gwt.xml. Add the folling line to your module file.

<inherits name='com.roamsys.GWTJQVMap'/>

Set path to vmap-JavaScript files

Tell the gwt-jqvmap library where to find the vmap-Javascript files on you webserver.

VMap.setJQVMapURL(staticsURL + "js/jquery.vmap.packed.js");
VMap.setMapURL(staticsURL + "js/");

Keep in mind that fetching the files and initiating all the vmap stuff will need some time. So make sure jQuery is initiated before you initate the first instance of the VMap class.


The type of data for the map

public class StatisticData {
    private String isoCountryCode;
    private int population;

    public StatisticData(final String isoCountryCode, final int population) {
        this.isoCountryCode = isoCountryCode;
        this.population = population;

    public String getISOCountryCode() {
        return isoCountryCode;

    public int getPopulation() {
        return population;

Assign some data to the map

// VMap is defined in an uiBinder template
@UiField VMap<StatisticData> map;

public SettingsWidget() {

    final List<StatisticData> listOfStaticData = new ArrayList<StatisticData>();
    listOfStaticData.add(new StatisticData("ru", 143600000));
    listOfStaticData.add(new StatisticData("de",  80767000));
    listOfStaticData.add(new StatisticData("lu",    550000));

    map.setValues(listOfStaticData, new VMapCountryColorResolver<SettingsWidget.StatisticData>() {

        public String getISOCountryCode(final StatisticData item) {
            return item.getISOCountryCode();

        public String getRGBColorCode(final StatisticData item) {
            final int population = item.getPopulation();
            if (population < 100000) {
                return "#00FF00"; // green
            } else if (population < 1000000) {
                return "#FF7700"; // orange
            } else {
                return "#FF0000"; // red

    map.addRegionClickHandler(new VMapEventHandler<SettingsWidget.StatisticData>() {

        public void onEvent(final String isoCode, final String regionName, final Map<String, StatisticData> isoCodeToDataMapping) {
            final StatisticData item = isoCodeToDataMapping.get(isoCode);
            if (item == null) {
                Window.alert("There is no information provided for " + regionName + " (" + isoCode + ")");
            } else {
                Window.alert(regionName + " (" + isoCode + ") has a population of " + item.getPopulation());
You can’t perform that action at this time.