Create New Control

It is very easy to create a new Control class. Only thing you need to do is extend maptalks.control.Control and add necessary methods:

• buildOn: required, to create Control's HTML DOM Element.
• onAdd: optional, a callback method when the control is added to map.
• onRemove: optional, a callback method when the control is removed from map, can be used to do some cleanup.

An example:

  const options = {
    'position' : 'top-right',
    'content'  : 'My Control'
  };
  
  export default class MyControl extends maptalks.control.Control {
    buildOn(map) {
      var dom = document.createElement('div');
      dom.className = 'my-control';
      dom.innerText = this.options.content;
      return dom;
    }

    onAdd() {
      console.log('added');
    }

    onRemove() {
      console.log('removeed');
    }
  }
  
  MyControl.mergeOptions(options);

Check out the live demo here.

The abstract Control class has some useful methods, please refer to Control's API for more details.