Create a click event to points

[Kafusna]

this plugin have some click point event? how can i use this?

[Maiti]

you must use Custom layer example from README.md and add next code

this.setData = function (data) {
  this.markers = data;
  this.needRedraw();
};
this.boundsToQuery = function(bounds) {
  return {
    lat: bounds.getSouthWest().lat,
    lng: bounds.getSouthWest().lng,
    width: bounds.getNorthEast().lat - bounds.getSouthWest().lat,
    height: bounds.getNorthEast().lng - bounds.getSouthWest().lng
  };
};
this._isPointInsideBounds = function (point, bounds) {
  return (
    (point.lat >= bounds.lat) && (point.lat <= bounds.lat + bounds.width) &&
    (point.lng >= bounds.lng) && (point.lng <= bounds.lng + bounds.height)
  );
};
this.getEvents = function () {
  var events = {
    resize: this._onLayerDidResize,
    moveend: this._onLayerDidMove,
    zoom: this._onLayerDidMove,
    click: this._onLayerDidMouse,
    mousemove: this._onLayerDidMouse
  };
  if (this._map.options.zoomAnimation && L.Browser.any3d) {
    events.zoomanim =  this._animateZoom;
  }
  return events;
};
this._onLayerDidMouse = function(e) {
  var j = e.containerPoint;
  var t = e.type;
  var bounds = L.latLngBounds(this._map.containerPointToLatLng(j.add(L.point(3,3))), 
  this._map.containerPointToLatLng(j.subtract(L.point(3,3))))
  var points = this.retrieveInBounds(this.boundsToQuery(bounds));
  if (points.length > 0) {
    if (t == 'mousemove') {
      this.hoverInPoints(points, e);
    }
    if (t == 'click') {
      this.clickedPoints(points, e);
    }
  } else {
    this.hoverOutPoints(e);
  }
};
this.clickedPoints = function(points, e) {
  var text = "You clicked on the point Latitude["+ points[0].lat + "] Longitude["+ points[0].lng + "]";
  alert(text);
};

this.hoverInPoints = function(points, e) {
  var text = "You hovered on the point Latitude["+ points[0].lat + "] Longitude["+ points[0].lng + "]";
  console.log(text);
};
this.hoverOutPoints = function(e) {
 //TODO
}

[rpascal]

@Maiti Do you have a working example of this you could share?

[rpascal]

For anyone who may need help on this.

var myCustomCanvasDraw = function () {
    this.show = function(){
        $(this._canvas).show();
        this.active = true;
    },
    this.hide = function () {
        this.active = false;
        $(this._canvas).hide();
    },
    this.onLayerDidMount = function () {
        this.customEvents = {
            click: this._onLayerClick
        };
        this._map.on(this.customEvents, this);
    };
    this.onLayerWillUnmount = function () {
        this._map.off(this.customEvents, this);
    };
    this.boundsToQuery = function (bounds) {
        return {
            lat: bounds.getSouthWest().lat,
            lng: bounds.getSouthWest().lng,
            width: bounds.getNorthEast().lat - bounds.getSouthWest().lat,
            height: bounds.getNorthEast().lng - bounds.getSouthWest().lng
        };
    };
    this._isPointInsideBounds = function (lat,lng, bounds) {
        return (
            (lat >= bounds.lat) && (lat <= bounds.lat + bounds.width) &&
            (lng >= bounds.lng) && (lng <= bounds.lng + bounds.height)
        );
    };
    this._onLayerClick = function (e) {

        if (this.active) {

            var mousePoint = e.containerPoint;
            var LatLngBounds = L.latLngBounds(this._map.containerPointToLatLng(mousePoint.add(L.point(3, 3))),
                        this._map.containerPointToLatLng(mousePoint.subtract(L.point(3, 3))))
            var BoundingBox = this.boundsToQuery(LatLngBounds)
            const $this = this;

            this.getData().features.some(function (feature) {
                var coordinates = feature.geometry.coordinates;
                var lat = coordinates[1];
                var lng = coordinates[0];
                                            
                if ($this._isPointInsideBounds(lat, lng, BoundingBox)) {
                                                
                    return true;
                }

                return false;
            })
        }
    };
    this.setData = function (data) {
        this.myData = data;
        this.needRedraw();
    };
    this.getData = function () {
        return this.myData;
    },
    this.setPane = function (paneName) {
        this._map.getPanes().overlayPane.removeChild(this._canvas);
        var pane = this._map.getPane(paneName);

        if (pane === undefined) {
            this._map.createPane(paneName);
        } 
        this._map.getPane(paneName).appendChild(this._canvas);
    },
    this.onDrawLayer = function (info) {
                                   
        var data = this.getData();
        var ctx = info.canvas.getContext('2d');

        for (var i = 0; i < data.features.length; i++) {
            //draw stuff
        }
    }
}

myCustomCanvasDraw.prototype = new L.CanvasLayer();
var myLayer = new myCustomCanvasDraw();
myLayer.setData(curCondJsonData);
myLayer.addTo(map);
myLayer.hide();
myLayer.setPane("curConditionsPane");