var options1 = {
    id: "demo1",
    view: {
        lon: 108.277199,
        lat: 14.058324,
        zoom: 5
    },
    data: {
        plain: [
            {
                city: "Ho Chi Minh",
                area: "2096 km²",
                country: "Viet Nam",
                coordinate: [106.6438, 10.8142] // Array [lon, lat] or object {lon: 106.6438, lat: 10.8142}
            }, {
                city: "Manchester",
                area: "115.6 km²",
                country: "UK",
                coordinate: [-2.242631, 53.480759]
            }
        ],
        keys: {
            name: "city",
            coor: "coordinate",
            value: ["area", "country"]
        }
    },
    layer: {
        type: "Tile"
    }
};
var map = new C9.Map(options1);
map.draw();

//createObject create an object and can style for it, but data must be followed c9 defined: {name:, coor:, value:}
map.createObject({
    data: {
        name: "Ha Noi",
        coor: [105.834160, 21.027764],
        value: {
            area: '3329 km²',
            country: 'Viet Nam'
        }    
    },
    style: {
        imgSrc: 'link/to/img',
        scale: 0.2
    }
});

//use addData to add objects, cannot set style these objects
map.addData({
    plain: {
        name: "Ho Chi Minh - Ha Noi",
        distance: "1730 km",
        coordinate: [[106.6438, 10.8142], [105.834160, 21.027764]]
    },
    keys: {
        coor: "coordinate",
        value: "distance"
    }
});

//set style for created object, structure of data (object.get('data')): {name:, coor:, value:}
map.getObjects().forEach(function(o) {
    if (o.get('data').value.distance == "1730 km")
        map.setStyle({obj: o, style: {strokeColor: 'red'}})
});

var dnCoor = /* border coordinate of Da Nang */;
map.createObject({
    data: {
        name: "Da Nang",
        coor: dnCoor,
        value: {
            area: '1285 km²',
            country: 'Viet Nam'
        }    
    },
    style: {
        fillColor: 'rgba(255, 0, 0, 0.2)',
        strokeColor: 'red'
    }
});