add token to mvt fetch & use only mvt for project details online features

src/services/map-service.js

@@ -21,6 +21,7 @@ import Geolocation from 'ol/Geolocation.js';
 import Feature from 'ol/Feature.js';
 import Point from 'ol/geom/Point.js';
 
+
 import axios from '@/axios-client.js';
 import router from '@/router';
 import store from '@/store';
@@ -433,9 +434,36 @@ const mapService = {
     const projectId = project_slug.split('-')[0];
     const format_cfg = {/*featureClass: Feature*/ };
     const mvt = new MVT(format_cfg);
+
+    function customLoader(tile, src) {
+      tile.setLoader(function(extent, resolution, projection) {
+        const token = () => {
+          const re = new RegExp('csrftoken=([^;]+)');
+          const value = re.exec(document.cookie);
+          return (value != null) ? unescape(value[1]) : null;
+        };
+        fetch(src, {
+          credentials: 'include',
+          headers: {
+            'X-CSRFToken': token()
+          },
+        }).then(function(response) {
+          response.arrayBuffer().then(function(data) {
+            const format = tile.getFormat(); // ol/format/MVT configured as source format
+            const features = format.readFeatures(data, {
+              extent: extent,
+              featureProjection: projection
+            });
+            tile.setFeatures(features);
+          });
+        });
+      });
+    }
+
     const options = {
       urls: [],
-      matrixSet: 'EPSG:3857'
+      matrixSet: 'EPSG:3857',
+      tileLoadFunction: customLoader,
     };
     options.format = mvt;
     const layerSource = new VectorTileSource(options);

src/views/Project/ProjectDetail.vue

@@ -420,29 +420,19 @@ export default {
 
         this.arraysOffline.forEach((x) => (x.geojson.properties.color = 'red'));
         const featuresOffline = this.arraysOffline.map((x) => x.geojson);
-        this.GET_PROJECT_FEATURES({
-          project_slug: this.slug,
-          ordering: '-created_on',
-          limit: null,
-          geojson: true,
-        })
-          .then(() => {
-            this.featuresLoading = false;
+        if (featuresOffline && featuresOffline.length > 0) {
           mapService.addFeatures({
             addToMap: true,
             project_slug: this.slug,
-              features: [...this.features, ...featuresOffline],
+            features: featuresOffline,
             featureTypes: this.feature_types,
             queryParams: {
               ordering: this.project.feature_browsing_default_sort,
               filter: this.project.feature_browsing_default_filter,
             },
           });
-          })
-          .catch((err) => {
-            console.error(err);
+        }
         this.featuresLoading = false;
-          });
 
         featureAPI.getFeaturesBbox(this.slug).then((bbox) => {
           if (bbox) {