use e.propagatedFrom

src/components/Choropleth.vue

@@ -94,15 +94,20 @@ const style = (p: GeoJsonProperties) => {
     };
 };
 
-const getTooltip = (e: LeafletMouseEvent) => tooltipForFeature(getFeatureId(e.layer.properties), getFeatureName(e.layer.properties));
+const getTooltip = (e: LeafletMouseEvent) => {
+    const properties = e.propagatedFrom.properties;
+    return tooltipForFeature(
+        getFeatureId(properties),
+        getFeatureName(properties)
+    );
+};
 
 // when rendering the geojson, leaflet will attach event listener specified here to each feature.
 // here we use it to control mapLoading element and changing the URL of the app when they click on
 // a feature based on what country it is
 const clickEvent = (e: LeafletMouseEvent) => {
     mapLoading.value = true;
-    // TODO: layer is deprecated, what should we use?
-    const properties = e.layer.properties;
+    const properties = e.propagatedFrom.properties;
     const country = properties[featureProperties.country];
     // select feature's country, or unselect if click on it when already selected
     const countryToSelect = country === mapSettings.value.country ? "" : country;

src/composables/useLeaflet.ts

@@ -21,6 +21,12 @@ import { MapFeature } from "../types/resourceTypes";
 
 type TooltipOptionAndContent = { content: string; options?: TooltipOptions };
 
+// Need this to prevent "L.DomEvent.fakeStop is not a function" error with canvas mode VectorGrid
+//https://stackoverflow.com/questions/73833142/leaflet-vectorgrid-problem-with-click-event
+L.DomEvent.fakeStop = function () {
+    return true;
+}
+
 export const useLeaflet = (
     style: (f: GeoJsonProperties) => PathOptions,
     getTooltip: (e: LeafletMouseEvent) => TooltipOptionAndContent,
@@ -138,6 +144,7 @@ export const useLeaflet = (
 
         // TODO: fix up types again - shouldn't really need to use L
         vectorGridLayer.value = vectorGrid.slicer(geoJsonDocument, {
+            rendererFactory: L.canvas.tile, // or L.svg.tile
             interactive: true,
             vectorTileLayerStyles: {
                 sliced: style