Uncaught TypeError: Cannot read properties of undefined (reading 'lat')

[iamtekson]

I have tried to implement the onClick event using this plugin as below,

const vectorGrid = L.vectorGrid
  .slicer(street, {
    rendererFactory: L.svg.tile,
    maxNativeZoom: 19,
    maxZoom: 20,
    interactive: true,
    getFeatureId: function (f) {
      return f.properties.name;
    },
  })
  .on("click", function (e) {
    console.log(e);
  })
  .addTo(map);

When I clicked the layer, it shows the following error,

Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
    at Object.project (Projection.SphericalMercator.js:24)
    at Object.latLngToPoint (CRS.js:28)
    at i.project (Map.js:993)
    at i.latLngToLayerPoint (Map.js:1015)
    at i.latLngToContainerPoint (Map.js:1072)
    at i._fireDOMEvent (Map.js:1434)
    at i._handleDOMEvent (Map.js:1397)
    at HTMLDivElement.c (DomEvent.js:92)

In this error log, I didn't find the error linked to my vector grid file. Please help me how can I solve this issue?

[iamtekson]

Note: I have tried this plugin on leaflet versions 1.0.0 and 1.2.0 which are working fine. But with the latest leaflet version, the plugin is out of date.

[b108]

Add layer style (via option "vectorTileLayerStyles") with

{radius: 15}

. Radius must be > 10.

This should help.

[dpakprajul]

Mine is working. I have used: 1)

2)

[geekypradip]

I have tried to implement the onClick event using this plugin as below,

const vectorGrid = L.vectorGrid
  .slicer(street, {
    rendererFactory: L.svg.tile,
    maxNativeZoom: 19,
    maxZoom: 20,
    interactive: true,
    getFeatureId: function (f) {
      return f.properties.name;
    },
  })
  .on("click", function (e) {
    console.log(e);
  })
  .addTo(map);

When I clicked the layer, it shows the following error,

Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
    at Object.project (Projection.SphericalMercator.js:24)
    at Object.latLngToPoint (CRS.js:28)
    at i.project (Map.js:993)
    at i.latLngToLayerPoint (Map.js:1015)
    at i.latLngToContainerPoint (Map.js:1072)
    at i._fireDOMEvent (Map.js:1434)
    at i._handleDOMEvent (Map.js:1397)
    at HTMLDivElement.c (DomEvent.js:92)

In this error log, I didn't find the error linked to my vector grid file. Please help me how can I solve this issue?

function patchVectorGridLayer(obj) {
 // Fix error for point data.
// eg. mouseover does not work without this.
 obj._createLayer_orig = obj._createLayer;
 obj._createLayer = function (feat, pxPerExtent, layerStyle) {
  let layer = this._createLayer_orig(feat, pxPerExtent, layerStyle);
  if (feat.type === 1) {
    layer.getLatLng = null;
  }
  return layer;
};
// do this for chaining
 return obj;
}

just wrap the vectorgrid with patchVectorGridLayer function like : example :

const vectorGrid =patchVectorGridLayer( L.vectorGrid
  .slicer(street, {
    rendererFactory: L.svg.tile,
    maxNativeZoom: 19,
    maxZoom: 20,
    interactive: true,
    getFeatureId: function (f) {
      return f.properties.name;
    },
  }))
  .on("click", function (e) {
    console.log(e);
  })
  .addTo(map);