diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18809975..80b0ec1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Unreleased
 
+### Added
+
+- `ngx-leaflet`: Added `addVectorLayer` method so that leaflet can accept vector layers.
 
 ## [6.0.10] - 2024-03-21
 
@@ -14,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 - `ngx-leaflet`: Reverted the `baseMapAntwerp` link to a newer version.
 - `ngx-forms`: Added a forgotten ARIA label for the datepicker.
-- `ngx-forms`: Made label and description of datepicker and timepicker conditional
+- `ngx-forms`: Made label and description of datepicker and timepicker conditional.
 
 ## [6.0.9] - 2024-03-19
 
diff --git a/packages/ngx-leaflet/README.md b/packages/ngx-leaflet/README.md
index 6e3ab073..aa874c1e 100644
--- a/packages/ngx-leaflet/README.md
+++ b/packages/ngx-leaflet/README.md
@@ -84,6 +84,7 @@ public ngOnInit(): void {
 - `map`: The native leaflet map instance
 - `addTileLayer(layer: LeafletLayer)`: adds a tile layer to the map. (see leaflet docs)
 - `addFeatureLayer(config: any)`: adds a feature layer to the map. (see esri leaflet docs)
+- `addVectorLayer(config: LeafletLayer)`: adds a feature layer to the map. (see [Leaflet.VectorGrid](https://github.com/Leaflet/Leaflet.VectorGrid) docs)
 - `addGeoJSON(geoJson: any, config: any)`: add geoJSON to the map. (see leaflet docs)
 - `fitFeatureLayers(featureLayers)`: Fit the map bounds to the given feature layers.
 - `removeLayer(layer)`: removes a layer
diff --git a/packages/ngx-leaflet/ng-package.json b/packages/ngx-leaflet/ng-package.json
index 4f45e404..ce367c4d 100644
--- a/packages/ngx-leaflet/ng-package.json
+++ b/packages/ngx-leaflet/ng-package.json
@@ -8,6 +8,7 @@
     "@acpaas-ui",
     "leaflet",
     "esri-leaflet",
-    "leaflet-draw"
+    "leaflet-draw",
+    "leaflet.vectorgrid"
   ]
 }
diff --git a/packages/ngx-leaflet/package.json b/packages/ngx-leaflet/package.json
index 6cee204f..30e3b6db 100644
--- a/packages/ngx-leaflet/package.json
+++ b/packages/ngx-leaflet/package.json
@@ -9,7 +9,8 @@
     "@acpaas-ui/ngx-icon": "^6.0.10",
     "esri-leaflet": "^3.0.2",
     "leaflet": "^1.3.1",
-    "leaflet-draw": "^1.0.2"
+    "leaflet-draw": "^1.0.2",
+    "leaflet.vectorgrid": "^1.3.0"
   },
   "peerDependencies": {
     "@angular/common": ">=15.2.0",
diff --git a/packages/ngx-leaflet/src/lib/classes/leaflet-map.ts b/packages/ngx-leaflet/src/lib/classes/leaflet-map.ts
index c9a9bb11..54888834 100644
--- a/packages/ngx-leaflet/src/lib/classes/leaflet-map.ts
+++ b/packages/ngx-leaflet/src/lib/classes/leaflet-map.ts
@@ -45,6 +45,14 @@ export class LeafletMap {
     }
   }
 
+  addVectorLayer(layer: LeafletLayer) {
+    if (this.mapService.isAvailable()) {
+      const tileLayer = this.mapService.L.vectorGrid.protobuf(layer.url, layer.options);
+      this.map.addLayer(tileLayer);
+      return tileLayer;
+    }
+  }
+
   addFeatureLayer(config: any) {
     if (this.mapService.isAvailable()) {
       const featureLayer = new this.mapService.esri.featureLayer(config);