Tile Maps

Overview

JavaScript tile maps allow you to convey information by geography about people, the economy, migrations, elections, trade and more using simple tiles. ZingChart offers almost 200 predefined maps to be used to represent most areas of the world. Browse the ZingChart Gallery for more examples.

Type and Options

ZingChart tile maps use the type attribute and the options object. In your chart object, add a type attribute and set the value to tilemap. Next, create an options object. Add a map property, and set it to a map name, e.g., USA. Refer to the list of maps for a full list of available maps by name.

https://app.zingsoft.com/demos/embed/CY56VME7
https://app.zingsoft.com/demos/embed/CY56VME7
var mapData = {
    type: 'tilemap',
    options:{
        map:'USA',
    },
};
https://app.zingsoft.com/demos/embed/
https://app.zingsoft.com/demos/embed/

Options Configuration

Use the options object to configure the tile map and its items with attributes like type, sizeFactor, tile, and more.

Type

Use the type attribute to display a specific shape for the tiles that represent your map. The type value options include: circle, square, and hex.

Note: The default for type is hex.

https://app.zingsoft.com/demos/embed/9LE32OU0
https://app.zingsoft.com/demos/embed/9LE32OU0
var mapData = {
    type: 'tilemap',
    options:{
        map: 'USA',
        type: 'circle'
    },
};

Size Factor

Use the sizeFactor attribute to scale the tiles that represent the map. The sizeFactor value options include: 0.1, 0.92, 1, etc.

Note: The default for sizeFactor is 0.9.

https://app.zingsoft.com/demos/embed/CG84Q9X9
https://app.zingsoft.com/demos/embed/CG84Q9X9
var mapData = {
    type: 'tilemap',
    options:{
        map: 'USA',
        type: 'square',
        sizeFactor: 1
    },
};

Tile

Use the tile object to customize the way the tiles look and feel. Some of the attributes for the tile object include: fillAngle, gradientColors, shadow, borderWidth, borderColor, shadowDistance, shadowAlpha, shadowColor, etc.

Note: More details for the tile object will be coming soon.

https://app.zingsoft.com/demos/embed/9DUFS1MA
https://app.zingsoft.com/demos/embed/9DUFS1MA
var mapData = {
    type: 'tilemap',
    options:{
        map: 'USA',
        type: 'square',
        sizeFactor: 1,
        tile: {
          borderWidth: 1,
          borderColor: '#000',
          shadow: 1,
          shadowDistance: 4,
          shadowAlpha: 0.75,
          shadowColor: '#999'
        }
    },
};

Groups

Use the groups attribute to apply features to specific groups of tiles. It accepts an array of objects where each object contains a specific rule. For more information on rules, click here.

Note: More details for the groups attribute will be coming soon.

https://app.zingsoft.com/demos/embed/JHOM2Z8X
https://app.zingsoft.com/demos/embed/JHOM2Z8X
var cdata = {
    type: 'tilemap',
    options: {
        map: 'USA',
        type: 'hex',
        sizeFactor: 1.1,
        data: data,
        tile: {
            borderWidth: 1,
            borderColor: '#fff'
        },
        groups:[
            {
                rule: '%value >= 0 && %value < 25',
                backgroundColor: '#89b92e',
                text: '0-25'
            },
            {
                rule: '%value >= 25 && %value < 50',
                backgroundColor: '#0392bb',
                text: '25-50'
            },
            {
                rule: '%value >= 50 && %value < 75',
                backgroundColor: '#cc3300',
                text: '50-75'
            },
            {
                rule: '%value >= 75 && %value < 100',
                backgroundColor: '#da9b04',
                text: '75-100'
            }
        ]
    }
};

Data

To enter data into the tile map, use the attribute data. The data attribute accepts a data set in the form of an array of objects. The index of each object is titled after the abreviated name of each tile based on the available regions of the specific map chosen. The object directly affects that tile.

data: [{obj1}, {obj2}, ..., {objN}]

To demonstrate how to add visual data to a tile map, the following example is given.

https://app.zingsoft.com/demos/embed/U47J30PM
https://app.zingsoft.com/demos/embed/U47J30PM
var IDS = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"];
var data = {};
for (var i=0;i<IDS.length;i++) {
    var p = ZC._i_(ZC._r_(10, 90));
    data[IDS[i]] = {
        value : 0,
        dataDem : p,
        dataRep : (100-p),
        gradientStops : [0.001, p/100 - 0.01, p/100 + 0.01, 0.999].join(' '),
    };
}

var cdata = {
    type: 'tilemap',
    options:{
        map:"USA",
        type:"hex",
        sizeFactor:1.1,
        tile:{
            fillAngle: 1,
            gradientColors: '#66f #66f #f66 #f66',
            shadow: 1,
            borderWidth: 1,
            borderColor: '#666',
            shadowDistance: 4,
            shadowAlpha: 0.75,
            shadowColor: '#999'        
        },
        data: data
    }
};

Further Customization

Further customize your tile maps by configuring a few important features. These make it easier to highlight exactly what you want to display.

Tooltip

The tooltip object makes the tile map much more descriptive. It can display information relating to each tile on the map. More information on the tooltip is available here.

https://app.zingsoft.com/demos/embed/BDRT8031
https://app.zingsoft.com/demos/embed/BDRT8031
var cdata = {
    type: 'tilemap',
    options:{
        map:"USA",
        type:"hex",
        sizeFactor:1.1,
        tile:{
            fillAngle: 1,
            gradientColors: '#66f #66f #f66 #f66',
            shadow: 1,
            borderWidth: 1,
            borderColor: '#666',
            shadowDistance: 4,
            shadowAlpha: 0.75,
            shadowColor: '#999'        
        },
        data: data
    },
    tooltip:{
        text: "<span style='font-size:21px;font-weight:bold'>%name</span><br><br><span style='color:#00f;font-size:17px'>Democrats:</span> %data-dem%<br><span style='color:#f00;font-size:17px'>Republicans:</span> %data-rep%",
        htmlMode: true,
        padding: 10,
        align: 'left',
        fontSize: 17,
        borderWidth: 1,
        borderColor: '#333',
        fontWeight: '600'
    }
};

Plot Area

With tile map charts, you may want to increase or decrease the size of the entire map. The plotarea object allows adjustments to be made to the entire plot. More information on the plotarea object is available here.

https://app.zingsoft.com/demos/embed/F82OKRF2
https://app.zingsoft.com/demos/embed/F82OKRF2
var cdata = {
    type: 'tilemap',
    options:{
        map:"USA",
        type:"hex",
        sizeFactor:1.1,
        tile:{
            fillAngle: 1,
            gradientColors: '#66f #66f #f66 #f66',
            shadow: 1,
            borderWidth: 1,
            borderColor: '#666',
            shadowDistance: 4,
            shadowAlpha: 0.75,
            shadowColor: '#999'        
        },
        data: data
    },
    tooltip:{
        text: "<span style='font-size:21px;font-weight:bold'>%name</span><br><br><span style='color:#00f;font-size:17px'>Democrats:</span> %data-dem%<br><span style='color:#f00;font-size:17px'>Republicans:</span> %data-rep%",
        htmlMode: true,
        padding: 10,
        align: 'left',
        fontSize: 17,
        borderWidth: 1,
        borderColor: '#333',
        fontWeight: '600'
    },
    plotarea: {
        margin: '10 10 40 10'
    }
};

Summary

Got a question about how tile maps work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.