How to subclass Polygon in Leaflet? - leaflet

Question

I am trying to create a Hex class for Leaflet where the center and side length should be in screen units (pixels) as opposed to lat/lng to obtain an effect like this over the map.
Code is here:
L.Hex = L.Polygon.extend({
initialize: function (args) {
console.log('arguments', JSON.stringify(arguments));
console.log('arguments[0]', JSON.stringify(arguments[0]));
// options = options || {};
this.center = args[0];
this.size = args[1];
this.options = args[2] || {};
L.Polygon.prototype.initialize.call(this, [], this.options);
},
points: function(center, size, map){
var latlngs = [0, 1, 2, 3, 4, 5, 6]
.map(p => this.hexCorner(center, size, p))
.map(p => map.layerPointToLatLng(p));
return latlngs;
},
hexCorner: function(center, size, i){
var angle_deg = 60 * i - 30;
var angle_rad = Math.PI / 180 * angle_deg;
return [center[0] + size * Math.cos(angle_rad),
center[1] + size * Math.sin(angle_rad)]
},
})
L.hex = function(){ return new L.Hex(arguments) }
Since the coordinates are in user space I think can only calculate them after adding to the map - but that's what fails. If add the points like this:
var h = L.hex([100, 100], 30);
var points = h.points([100, 100], 30, e.map);
h.setLatLngs(points);
h.addTo(map);
things work ok but my best attempt at onAdd which is this:
onAdd: function (map) {
var points = this.points(this.center, this.size, map);
this.setLatLngs(points);
map.addLayer(this);
},
with message TypeError: t._path is undefined
So the question is: where is the problem and how should I do it otherwise?

Answer 1

Change this.setLatLngs(points) to this._setLatLngs(points);.
With setLatLngs() the function this.redraw(); is called and this needs the map variable, which is applied with map.addLayer(this)