Gis 798 & GIS-845 - vectoriële base map

CHANGELOG.md

@@ -7,14 +7,17 @@ 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
 
 ### Fixed
 
 - `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
 

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

packages/ngx-leaflet/ng-package.json

@@ -8,6 +8,7 @@
     "@acpaas-ui",
     "leaflet",
     "esri-leaflet",
-    "leaflet-draw"
+    "leaflet-draw",
+    "leaflet.vectorgrid"
   ]
 }

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",

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);