WIP: get bbox and fitTo at mapInit

src/services/feature-api.js

@@ -4,6 +4,20 @@ import store from '../store'
 const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
 
 const featureAPI = {
+  async getFeaturesBbox(project_slug) {
+    const response = await axios.get(
+      `${baseUrl}projects/${project_slug}/feature-bbox/`
+    );
+    if (
+      response.status === 200 &&
+      response.data
+    ) {
+      return response.data;
+    } else {
+      return null;
+    }
+  },
+
   async getFeatureEvents(featureId) {
     const response = await axios.get(
       `${baseUrl}features/${featureId}/events/`

src/views/feature/Feature_list.vue

 <template>
   <div class="fourteen wide column">
-    
     <div id="feature-list-container" class="ui grid mobile-column">
       <div class="four wide column mobile-fullwidth">
         <h1>Signalements</h1>
@@ -185,6 +184,7 @@
 <script>
 import { mapGetters, mapState } from "vuex";
 import { mapUtil } from "@/assets/js/map-util.js";
+import featureAPI from "@/services/feature-api";
 import SidebarLayers from "@/components/map-layers/SidebarLayers";
 import FeatureListTable from "@/components/feature/FeatureListTable";
 import Dropdown from "@/components/Dropdown.vue";
@@ -373,7 +373,7 @@ export default {
     },
 
     onFilterChange() {
-      if (this.featureGroup) {
+      /* if (this.featureGroup) {
         const features = this.filteredFeatures;
         this.featureGroup.clearLayers();
         this.featureGroup = mapUtil.addFeatures(
@@ -381,21 +381,21 @@ export default {
           {},
           true,
           this.feature_types
-        );
-        mapUtil.getMap().invalidateSize();
-        mapUtil.getMap()._onResize(); // force refresh for vector tiles
-        if(window.layerMVT) {
-          window.layerMVT.redraw();
-        }
-        
-        if (this.featureGroup.getLayers().length > 0) {
+        ); */
+      mapUtil.getMap().invalidateSize();
+      mapUtil.getMap()._onResize(); // force refresh for vector tiles
+      if (window.layerMVT) {
+        window.layerMVT.redraw();
+      }
+
+      /* if (this.featureGroup.getLayers().length > 0) {
           mapUtil
             .getMap()
             .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
         } else {
           mapUtil.getMap().zoomOut(1);
-        }
-      }
+        } */
+      //}
     },
 
     initMap() {
@@ -416,6 +416,8 @@ export default {
         mapDefaultViewZoom,
       });
 
+      this.getBbox2FIt();
+
       document.addEventListener("change-layers-order", (event) => {
         // Reverse is done because the first layer in order has to be added in the map in last.
         // Slice is done because reverse() changes the original array, so we make a copy first
@@ -424,7 +426,7 @@ export default {
 
       // --------- End sidebar events ----------
       //this.fetchPagedFeatures();
-      this.getNloadGeojsonFeatures();
+      //this.getNloadGeojsonFeatures();
 
       setTimeout(() => {
         const project_id = this.$route.params.slug.split("-")[0];
@@ -439,7 +441,20 @@ export default {
       }, 1000);
     },
 
-    getNloadGeojsonFeatures() {
+    getBbox2FIt() {
+      featureAPI.getFeaturesBbox(this.project.slug).then((bbox) => {
+        console.log(bbox);
+        if (bbox) {
+          const bounds = [
+            [bbox[2], bbox[3]],
+            [bbox[0], bbox[1]],
+          ];
+          mapUtil.getMap().fitBounds(bounds, { padding: [25, 25] });
+        }
+      });
+    },
+
+    /* getNloadGeojsonFeatures() {
       const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
       this.$store.commit(
         "DISPLAY_LOADER",
@@ -490,7 +505,7 @@ export default {
           this.geojsonFeatures.map((el) => el.properties.feature_type.title)
         ), //* use Set to eliminate duplicate values
       ];
-    },
+    }, */
 
     //* Paginated Features for table *//
     getFeatureTypeSlug(title) {
@@ -575,8 +590,7 @@ export default {
           url += filterParams;
         } else {
           //console.error("ONLY FOR DEV !!!!!!!!!!!!!");
-          //params = params.replace("8000", "8010");
-          //console.log(url);
+          //params = params.replace("8000", "8010"); //* for dev uncomment to use proxy link
           url = params;
         }
       }
@@ -656,9 +670,7 @@ export default {
       // Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
       this.$store
         .dispatch("GET_PROJECT_INFO", this.$route.params.slug)
-        .then(() => {
-          this.initMap();
-        });
+        .then(() => this.initMap());
     } else {
       this.initMap();
     }