maptalks table.

The maptalks.table.js plug-in is mainly used to create a table on the map container, which contains two types, respectively, custom tables and dynamic tables, The former manual editing data, the latter data is bound to a layer.

Feature

1. Add interactive table for maps.
2. Output table screenshot through "map.toDataURL()".
3. Support drag and mouse event listener.

Installing

<script src="dist/maptalks.table.min.js">

or

npm install maptalks-table

Demo

Maptalks Table Demo

Table Class

API

new maptalks.Table(options);

var myTalbe = new maptalks.Table({
    'title': 'title',
    'columns': [
        {header:'Name', dataIndex: 'name', type: 'string'},
        {header:'Birth', dataIndex: 'birth', type: 'data'},
        {header:'Age', dataIndex: 'age', type: 'number'},
        {header:'Marry', dataIndex: 'marry', type: 'boolean', trueText:'Yes', falseText: 'No'}
    ],
    'data': [
        {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'},
        {name:'Peter', birth:'1985-5-1', age: 30, marry: 'true'},
        {name:'Mary', birth:'2000-6-1', age: 15, marry: 'false'}
    ],
    'headerSymbol' :{
        'lineColor': '#ffffff',
        'fill': '#4e98dd',
        'textFaceName': 'monospace',
        'textSize': 12,
        'textFill': '#ebf2f9',
        'textWrapWidth': 100
    },
    'symbol': {
        'lineColor': '#ffffff',
        'fill': '#4e98dd',
        'textFaceName': 'monospace',
        'textSize': 12,
        'textFill': '#ebf2f9',
        'textWrapWidth': 100
    },
    'position': {
        'x': 121.489935,
        'y': 31.24432
    },
    'width': 300,
    'height': 300,
    'draggable': true,
    'editable': true,
    'header': true,
    'order': true,
    'startNum' : 1,
    'dynamic': false,
    'layerId' : null
});

Create table.

toJSON()

myTable.toJSON();

Convert table object to JSON string.

initByJson(jsonStr)

myTable.initByJson(jsonStr);

Initialize table from JSON string.

addTo(layer)

myTable.addTo(layer);

Add table to maptalks's layer.

hide()

myTable.hide;

Hide table.

show()

myTable.show();

Display table.

remove()

myTable.remove();

Remove table from layer.

setCoordinates(coordiante)

myTable.setCoordinates({
    'x': 121.489935,
    'y': 31.24432
});

Setting the position where table display.

setStartNum(num)

myTable.setStartNum(6);

Setting table start number。

animate(style, options, callback)

myTable.animate(style, options, callback);

Setting table animate show or hide effect.

getMap()

myTable.getMap();

Get this map which table add to.

getLayer()

myTable.getLayer();

Get this layer which table add to.

getCenter()

myTable.getCenter();

Get table coordinate.

setTableStyle(attr, value, isGlobal)

myTable.setTableStyle('markerFill', '#00ff00', true);

Change table style.

addRow(rowNum, data, below)

myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'}, true);

Add new row.

updateRow(rowNum, data)

myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'});

Update row.

removeRow(rowNum)

myTable.addRow(1);

Remove row.

moveRow(rowNum, direction)

myTable.addRow(1, 'down');

Move row up or down.

addCol(colNum, data, right)

myTable.addCol(1, {header:'Name', dataIndex: 'name', type: 'string'}, true);

Add new column.

removeCol(colNum)

myTable.removeCol(1);

Remove column.

moveCol(colnum, direction)

myTable.moveCol(1, 'left');

Move column left or right.

Events

mouseover mouseout mousedown click dblclick contextmenu hide remove dragstart dragend moving dragging symbolchange edittextstart edittextend orderchanged

myTable.on('click', function(){alert('Your click table')});

Monitor table events for event handling.