diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index aa7d5f2aede7f098b06733ba0c47ec321f0477c7..693af72eab27ff6dfa9f3c7ab6e1d7f0d9d38ced 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -225,7 +225,6 @@ export default {
     for (let el in this.customForm) {
       if (el && this.form[el]) this.form[el].value = this.customForm[el].value;
     }
-    
   },
 };
 </script>
diff --git a/src/components/project/project_mapping_basemap.vue b/src/components/project/project_mapping_basemap.vue
index 3d7e992bf09488411d06cbd213ca1b40862bd74b..f85129e43e9d3e02653cf0f1d1b1b7afc1f34186 100644
--- a/src/components/project/project_mapping_basemap.vue
+++ b/src/components/project/project_mapping_basemap.vue
@@ -2,31 +2,26 @@
   <div class="ui segment">
     <div class="field required">
       <label for="basemap-title">Titre</label>
-      <input
-        type="text"
-        name="basemap-title"
-        :value="basemapForm.title"
-        required
-        @blur="$emit('update-basemap', basemapForm)"
-      />
+      <input type="text" name="basemap-title" :value="title" required />
+      <!-- @blur="$emit('update-basemap', basemapForm)" -->
       <!-- {{ basemapForm.title.errors }} -->
     </div>
 
-    <div v-if="basemapForm" class="nested">
-      <div class="ui segments layers-container">
+    <div class="nested">
+      <div v-if="layers" class="ui segments layers-container">
+        {{ layers }}
+        {{ layers.length }}
         <ProjectMappingContextLayer
-          v-for="layer in basemapForm.layers"
+          v-for="layer in layers"
           :key="'layer-' + layer.dataKey"
           :layer="layer"
-          v-on:update-layer="updateLayer"
-          v-on:delete-layer="removeLayer(layer.dataKey)"
         />
+        <!--           v-on:update-layer="updateLayer"
+          v-on:delete-layer="removeLayer(layer.dataKey)" -->
       </div>
       <div class="ui buttons">
-        <a
-          @click="addLayer"
-          class="ui compact small icon left floated button green"
-        >
+        <!-- @click="addLayer" -->
+        <a class="ui compact small icon left floated button green">
           <i class="ui plus icon"></i>
           <span>Ajouter une couche</span>
         </a>
@@ -65,28 +60,36 @@ export default {
   data() {
     return {
       dataKey: 0,
-      basemapForm: {
-        layers: [],
-      },
+      title: "Fond par défaut",
+      layers: [
+        {
+          id: 1,
+          title: "Open street map",
+          opacity: "1.00",
+          order: 0,
+          queryable: false,
+        },
+      ],
     };
   },
+
   methods: {
     deleteBasemap() {
-      this.$store.commit("map/DELETE_BASEMAP", this.basemapForm.dataKey);
+      this.$store.commit("map/DELETE_BASEMAP", this.basemap.id);
     },
-    mapLayersDataKey() {
-      if (this.basemapForm) {
-        if (!this.basemapForm.layers) this.basemapForm["layers"] = [];
-        this.basemapForm.layers = this.basemapForm.layers.map((el) => {
+    /*  mapLayersDataKey() {
+      if (this.layers) {
+        if (!this.layers) this.layers = [];
+        this.layers = this.layers.map((el) => {
           this.dataKey += 1;
           return { dataKey: this.dataKey, ...el };
         });
       }
     },
     addLayer() {
-      console.log("addLayer");
+     // console.log("addLayer");
       this.dataKey += 1;
-      this.basemapForm.layers.push({
+      this.layers.push({
         dataKey: this.dataKey,
         opacity: "1.00",
         order: 0,
@@ -95,22 +98,25 @@ export default {
       });
     },
     removeLayer(dataKey) {
-      this.basemapForm.layers = this.basemapForm.layers.filter(
-        (layer) => layer.dataKey !== dataKey
-      );
+      this.layers = this.layers.filter((layer) => layer.dataKey !== dataKey);
     },
     updateLayer(payload) {
-      const index = this.basemapForm.layers.findIndex(
+      const index = this.layers.findIndex(
         (el) => el.dataKey === payload.dataKey
       );
-      console.log("updateLayer", index);
-      this.basemapForm.layers[index] = payload;
-      this.$emit("update-basemap", this.basemapForm); //* update store
-    },
+      //console.log("updateLayer", index);
+      this.layers[index] = payload;
+      let basemapData = this.basemapForm;
+      basemapData["layers"] = this.layers;
+      this.$emit("update-basemap", basemapData); //* update store
+    }, */
   },
   mounted() {
-    this.basemapForm = this.basemap;
-    this.mapLayersDataKey();
+    this.title = this.basemap.title;
+    this.layers = this.basemap.layers;
+    // this.basemapForm = this.basemap;
+    //this.basemapForm = this.basemap.layers;
+    // this.mapLayersDataKey();
   },
 };
 </script>
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index d46ee2383dff855c7a4c4e1945aa1f4780ff0919..ed3953c03ff0e5842675262528450bcad325c01a 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -7,21 +7,47 @@ const map = {
     basemaps: [
       {
         "id": 1,
-        "title": "Fond par défaut",
+        "title": "Fond mock",
         "layers": [
           {
             "id": 1,
-            "title": "Open street map",
-            "opacity": "1.00",
-            "order": 0,
-            "queryable": false
+            "title": "Open street map mock",
+            "opacity": "1.50",
+            "order": 2,
+            "queryable": true
           }
         ]
-      }
+      },
+      /*       {
+              "id": 10,
+              "title": "Fond mock",
+              "layers": [
+                {
+                  "id": 1,
+                  "title": "Open street map mock",
+                  "opacity": "1.50",
+                  "order": 2,
+                  "queryable": true
+                }
+              ]
+            },
+            {
+              "id": 5,
+              "title": "Fond mock",
+              "layers": [
+                {
+                  "id": 1,
+                  "title": "Open street map mock",
+                  "opacity": "1.50",
+                  "order": 2,
+                  "queryable": true
+                }
+              ]
+            }, */
     ],
     features: [],
     layers: [
-      {
+      /* {
         "id": 1,
         "options": {
           "maxZoom": 20,
@@ -30,7 +56,7 @@ const map = {
         "title": "Open street map",
         "service": "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
         "schema_type": "tms"
-      }
+      } */
     ],
     serviceMap: "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
     optionsMap: {
@@ -39,8 +65,11 @@ const map = {
     }
   },
   mutations: {
-    CREATE_BASEMAP(state, dataKey) {
-      state.basemaps = [...state.basemaps, { dataKey }]
+    SET_BASEMAPS(state, basemaps) {
+      state.basemaps = basemaps;
+    },
+    CREATE_BASEMAP(state, id) {
+      state.basemaps = [...state.basemaps, { id }]
     },
     DELETE_BASEMAP(state, dataKey) {
       state.basemaps = state.basemaps.filter(el => el.dataKey !== dataKey)
@@ -50,6 +79,16 @@ const map = {
     }
   },
 
+  getters: {
+    basemapMaxId: (state) => state.basemaps.reduce((acc, curr) => {
+      if (curr.id > acc) {
+        return curr.id;
+      } else {
+        return acc;
+      }
+    }, 0)
+  },
+
   actions: {
     INITIATE_MAP({ state, rootGetters }) {
       const project = rootGetters.project
diff --git a/src/views/project/Project_mapping.vue b/src/views/project/Project_mapping.vue
index 7661ec2cdab7026db1e31fbb888427278627fcef..9fef56ccb94c10cef3d354282cf8ca4cefdf11f5 100644
--- a/src/views/project/Project_mapping.vue
+++ b/src/views/project/Project_mapping.vue
@@ -14,7 +14,7 @@
         <a
           class="ui compact small icon left floated button green"
           data-variation="mini"
-          @click="createBasemap"
+          @click="addBasemap"
         >
           <i class="ui plus icon"></i>
           <span>Créer un fond cartographique</span>
@@ -23,11 +23,11 @@
 
       <div class="ui">
         <ProjectMappingBasemap
-          v-for="basemap in basemapForms"
+          v-for="basemap in basemaps"
           :key="basemap.dataKey"
           :basemap="basemap"
-          v-on:update-basemap="updateBasemap2store"
         />
+         <!--  v-on:update-basemap="updateBasemap2store" -->
       </div>
 
       <button
@@ -43,7 +43,7 @@
 
 <script>
 import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "Project_mapping",
@@ -52,33 +52,33 @@ export default {
     ProjectMappingBasemap: Project_mapping_basemap,
   },
 
-  data() {
+  /* data() {
     return {
       dataKey: 0,
     };
-  },
+  }, */
   computed: {
     ...mapState("map", ["basemaps"]),
-    basemapForms: function () {
+    ...mapGetters("map", ["basemapMaxId"]),
+   /*  basemapForms: function () {
       return this.basemaps.map((el) => {
         this.dataKey += 1;
         return { dataKey: this.dataKey, ...el };
       });
-    },
+    }, */
   },
   methods: {
-    createBasemap() {
-      this.$store.commit("map/CREATE_BASEMAP", this.dataKey);
-      this.dataKey += 1;
+    addBasemap() { // * ajout d'un fond cartographique
+      this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
     },
-    updateBasemap2store(payload) {
+    /* updateBasemap2store(payload) {
       const index = this.basemapForms.findIndex(
         (el) => el.dataKey === payload.dataKey
       );
-      console.log("updateBasemap2store", index);
+     // console.log("updateBasemap2store", index);
       this.basemapForms[index] = payload;
       this.$store.commit("map/UPDATE_BASEMAPS", this.basemapForms);
-    },
+    }, */
     saveChanges() {
       this.$store.dispatch("map/SAVE_BASEMAPS");
     },