How to use the geojs.event function in geojs

}

          // Other options that are simple properties
          const properties = ['bin', 'gcs', 'style', 'selectionAPI', 'visible']
          for (let property of properties) {
            if (options[property]) {
              feature[property](options[property]);
            }
          }

          // Events - note that we must explicitly bind to "this"
          if (options.enableTooltip) {
            // Add hover/tooltip - only click seems to work
            this._enableTooltipDisplay();
            feature.selectionAPI(true);
              feature.geoOn(geo.event.feature.mouseon, function(evt: any) {
                // console.debug('feature.mouseon');
                // console.dir(evt);
                this._tooltip.position(evt.mouse.geo);

                // Work from a copy of the event data
                let userData: any = Object.assign({}, evt.data);
                delete userData.__i;
                let jsData:string = JSON.stringify(
                  userData, Object.keys(userData).sort(), 2);
                // Strip off first and last lines (curly braces)
                let lines: string[] = jsData.split('\n');
                let innerLines: string[] = lines.slice(1, lines.length-1);
                this._preElem.innerHTML = innerLines.join('\n');
                this._tooltipElem.classList.remove('hidden');
              }.bind(this));
              feature.geoOn(geo.event.feature.mouseoff, function(evt: any) {

// console.debug('feature.mouseon');
                // console.dir(evt);
                this._tooltip.position(evt.mouse.geo);

                // Work from a copy of the event data
                let userData: any = Object.assign({}, evt.data);
                delete userData.__i;
                let jsData:string = JSON.stringify(
                  userData, Object.keys(userData).sort(), 2);
                // Strip off first and last lines (curly braces)
                let lines: string[] = jsData.split('\n');
                let innerLines: string[] = lines.slice(1, lines.length-1);
                this._preElem.innerHTML = innerLines.join('\n');
                this._tooltipElem.classList.remove('hidden');
              }.bind(this));
              feature.geoOn(geo.event.feature.mouseoff, function(evt: any) {
                //console.debug('featuremouseoff');
                this._preElem.textContent = '';
                this._tooltipElem.classList.add('hidden');
              }.bind(this));

              // feature.geoOn(geo.event.mouseclick, function(evt: any) {
              //   console.log('plain mouseclick, evt:');
              //   console.dir(evt);
              //   // this._tooltip.position(evt.geo);
              //   // this._tooltipElem.textContent = 'hello';
              //   // this._tooltipElem.classList.remove('hidden');
              // }.bind(this));

              //.geoOn(geo.event.zoom, resimplifyOnZoom);
          }  // if (options.data)

showLabels: false
                });
                layer.geoOn(geo.event.annotation.state, (e) => {
                    var prompt = bootbox.prompt({
                        title: 'Boundary dataset name',
                        value: 'Boundary',
                        callback: (name) => {
                            if (name !== null) {
                                events.trigger('m:dataset-drawn', name, layer.geojson().features[0].geometry);
                            }
                            layer.removeAllAnnotations();
                        }
                    });
                    prompt.find('.bootbox-body input').attr('maxlength', '250');
                });
                layer.geoOn(geo.event.annotation.mode, (e) => {
                    events.trigger('m:map-drawing-change', e.mode === 'rectangle');
                });
                this.drawDatasetLayer = layer;
            }
            this.drawDatasetLayer.mode('rectangle');
            // focus the map so user could immediately press esc to exit rectangle creating mode
            this.$('.geojs-map').focus();
        });

// (using a single image may require the ability to zoom out).
            clampBoundsX: false,
            clampBoundsY: false,
            center: {
                x: (bounds.left + bounds.right) / 2,
                y: (bounds.top + bounds.bottom) / 2},
            zoom: minZoom,
            discreteZoom: false,
            interactor: interactor,
            unitsPerPixel: Math.pow(2, maxZoom)
        };
        this._map = geo.map(mapParams);

        this._boundsFromQuery(router.getQuery('bounds'));
        this._syncViewport();
        this._map.geoOn(geo.event.pan, _.bind(this._onMouseNavigate, this));
        this.$('.h-visualization-body').empty().append(this._map.node());
    },

this.listenTo(events, 'm:draw-boundary-dataset', () => {
            if (!this.drawDatasetLayer) {
                var layer = this.map.createLayer('annotation', {
                    annotations: ['rectangle'],
                    showLabels: false
                });
                layer.geoOn(geo.event.annotation.state, (e) => {
                    var prompt = bootbox.prompt({
                        title: 'Boundary dataset name',
                        value: 'Boundary',
                        callback: (name) => {
                            if (name !== null) {
                                events.trigger('m:dataset-drawn', name, layer.geojson().features[0].geometry);
                            }
                            layer.removeAllAnnotations();
                        }
                    });
                    prompt.find('.bootbox-body input').attr('maxlength', '250');
                });
                layer.geoOn(geo.event.annotation.mode, (e) => {
                    events.trigger('m:map-drawing-change', e.mode === 'rectangle');
                });
                this.drawDatasetLayer = layer;

_.each(this.collection.models, function (dataset) {
                if (dataset.get('displayed')) {
                    this.addDataset(dataset);
                }
            }, this);
            this.map.featureInfoWidget =
                new FeatureInfoWidget({
                    map: this.map,
                    version: '1.1.1',
                    layers: [],
                    callback: 'getLayerFeatures',
                    session: this.session,
                    parentView: this
                });
            this.map.featureInfoWidget.setElement($('#m-map-panel')).render();
            this.map.geoOn(geo.event.mouseclick, function (evt) {
                this.featureInfoWidget.content = '';
                this.featureInfoWidget.callInfo(evt);
            });
        }
        this.map.draw();
    },

x: d[0],
                y: d[1],
                z: d[2] || 0
            };
        }).style({
            fillColor: function () {
                var v = value.apply(value, arguments);
                var c = scale(v);
                c = geo.util.convertColor(c);
                return c;
            }
        }).data(data);

        var clickInfo = new ClickInfoModel();

        polygon.geoOn(geo.event.feature.mouseclick, _.bind(function (d) {
            clickInfo.set({
                layer: this.geoJsLayer,
                dataset: dataset,
                mouse: d.mouse,
                datum: d.data.properties
            });

            if (!this.clickInfoWidget) {
                this.clickInfoWidget = new ClickInfoWidget({
                    model: clickInfo,
                    parentView: container.getMapView()
                });
            }
        }, this));
        this.trigger('m:map_layer_renderable', this);
    };