diff --git a/src/components/project/ProjectMappingContextLayer.vue b/src/components/project/ProjectMappingContextLayer.vue
index 12bbd9f74c32e8c32a4cdc3a3e8b02f42850e638..9a766ca27c1a80d0ffb2ec5f67187d951db2179b 100644
--- a/src/components/project/ProjectMappingContextLayer.vue
+++ b/src/components/project/ProjectMappingContextLayer.vue
@@ -68,20 +68,25 @@ export default {
     selectedLayer: {
       get() {
         const matchingLayer = this.retrieveLayer(this.layer.title);
-        return {
-          name: matchingLayer ? matchingLayer.service : "",
-          value: this.layer ? this.layer.title : "",
-        };
+        if (matchingLayer != undefined){
+          return {
+            name: matchingLayer != undefined ? matchingLayer.service : "",
+            value: this.layer ? this.layer.title : "",
+          };
+        }
+        return []
       },
 
       set(newValue) {
-        const matchingLayer = this.retrieveLayer(this.layer.title);
-        this.updateLayer({
-          ...this.layer,
-          service: newValue.name,
-          title: newValue.value,
-          id: matchingLayer.id,
-        });
+        const matchingLayer = this.retrieveLayer(newValue.title);
+        if (matchingLayer != undefined){
+          this.updateLayer({
+            ...this.layer,
+            service: newValue.name,
+            title: newValue.value,
+            id:  matchingLayer.id,
+          });
+        }
       },
     },
 
@@ -96,7 +101,7 @@ export default {
 
     availableLayers: function () {
       return this.layers.map((el) => {
-        return { name: el.service, value: el.title };
+        return { id: el.id, name: el.service, value: el.title, title: el.title };
       });
     },
 
@@ -109,7 +114,7 @@ export default {
 
   methods: {
     retrieveLayer(title) {
-     return this.layers.find((el) => el.title === title);
+      return this.layers.find((el) => el.title === title);
     },
 
     removeLayer() {
@@ -130,12 +135,14 @@ export default {
 
   mounted() {
     const matchingLayer = this.retrieveLayer(this.layer.title);
-    this.updateLayer({
-      ...this.layer,
-      service: matchingLayer.service,
-      title: matchingLayer.title,
-      id: matchingLayer.id,
-    });
+    if (matchingLayer != undefined){
+      this.updateLayer({
+        ...this.layer,
+        service: matchingLayer.service,
+        title: matchingLayer.title,
+        id: matchingLayer.id,
+      });
+    }
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 083bbb453dafecdbee11ead4bab3b5056f34bf58..719eb697116a3ff7bc211f4bd0a8093de6ab34fc 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -99,7 +99,9 @@ const map = {
     GET_BASEMAPS({ commit }, project_slug) {
       return axios
         .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/?project__slug=${project_slug}`)
-        .then((response) => (commit("SET_BASEMAPS", response.data)))
+        .then((response) => {
+          commit("SET_BASEMAPS", response.data)
+        })
         .catch((error) => {
           throw error;
         });
diff --git a/src/views/project/Project_mapping.vue b/src/views/project/Project_mapping.vue
index 3621e2d8ce1edf5590a23ab97f877c8ccc612b54..0a94b5a82f1f41a2ff965afbc1bb64a88b867b04 100644
--- a/src/views/project/Project_mapping.vue
+++ b/src/views/project/Project_mapping.vue
@@ -21,7 +21,7 @@
         </a>
       </div>
 
-      <div class="ui">
+      <div v-if="basemaps" class="ui">
         <ProjectMappingBasemap
           v-for="basemap in basemaps"
           :key="basemap.id"