title: How to subclass Polygon in Leaflet?
body: <p>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 <a href="https://i.stack.imgur.com/OMbdn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OMbdn.jpg" alt="this" /></a> over the map.</p>
  <p>Code is here:</p>
  <pre><code>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 =&gt; this.hexCorner(center, size, p))
              .map(p =&gt; 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) }
  </code></pre>
  <p>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:</p>
  <pre><code>var h = L.hex([100, 100], 30);
  var points = h.points([100, 100], 30, e.map);
  h.setLatLngs(points);
  h.addTo(map);
  </code></pre>
  <p>things work ok but my best attempt at onAdd which is this:</p>
  <pre><code>onAdd: function (map) {
      var points = this.points(this.center, this.size, map);
      this.setLatLngs(points);
      map.addLayer(this);
  },
  </code></pre>
  <p>with message <code>TypeError: t._path is undefined</code></p>
  <p>So the question is: where is the problem and how should I do it otherwise?</p>