add sidebar layer to projet detail page in order to display user customized basemaps

src/components/Project/Detail/ProjectFeatureTypes.vue

@@ -742,6 +742,9 @@ export default {
 
 .nouveau-type-signalement {
   margin-top: 1em;
+  & > .button {
+    margin-right: 0 !important;
+  }
 }
 .nouveau-type-signalement .label{
   cursor: pointer;

src/views/Project/ProjectDetail.vue

@@ -38,21 +38,39 @@
             />
           </div>
 
-          <div class="eight wide column map-container">
-            <div
-              :class="{ active: mapLoading }"
-              class="ui inverted dimmer"
-            >
-              <div class="ui text loader">
-                Chargement de la carte...
+          <div class="eight wide column block-map">
+            <div class="map-container">
+              <div
+                id="map"
+                ref="map"
+              />
+              <div
+                :class="{ active: mapLoading }"
+                class="ui inverted dimmer"
+              >
+                <div class="ui text loader">
+                  Chargement de la carte...
+                </div>
+              </div>
+              <SidebarLayers
+                v-if="basemaps && map"
+                ref="sidebar"
+              />
+              <div
+                id="popup"
+                class="ol-popup"
+              >
+                <a
+                  id="popup-closer"
+                  href="#"
+                  class="ol-popup-closer"
+                />
+                <div
+                  id="popup-content"
+                />
               </div>
             </div>
 
-            <div
-              id="map"
-              ref="map"
-            />
-
             <router-link
               id="features-list"
               :to="{
@@ -68,20 +86,6 @@
                 Voir tous les signalements
               </div>
             </router-link>
-
-            <div 
-              id="popup" 
-              class="ol-popup"
-            >
-              <a 
-                id="popup-closer" 
-                href="#" 
-                class="ol-popup-closer"
-              />
-              <div 
-                id="popup-content"
-              />
-            </div>
           </div>
         </div>
 
@@ -139,6 +143,7 @@ import ProjectLastFeatures from '@/components/Project/Detail/ProjectLastFeatures
 import ProjectLastComments from '@/components/Project/Detail/ProjectLastComments';
 import ProjectParameters from '@/components/Project/Detail/ProjectParameters';
 import ProjectModal from '@/components/Project/Detail/ProjectModal';
+import SidebarLayers from '@/components/Map/SidebarLayers';
 
 export default {
   name: 'ProjectDetail',
@@ -149,7 +154,8 @@ export default {
     ProjectLastFeatures,
     ProjectLastComments,
     ProjectParameters,
-    ProjectModal
+    ProjectModal,
+    SidebarLayers,
   },
 
   filters: {
@@ -210,7 +216,9 @@ export default {
       'reloadIntervalId',
     ]),
     ...mapState('map', [
-      'map'
+      'map',
+      'basemaps',
+      'availableLayers',
     ]),
     API_BASE_URL() {
       return this.configuration.VUE_APP_DJANGO_API_BASE;
@@ -410,14 +418,12 @@ export default {
 
     async initMap() {
       if (this.project && this.permissions.can_view_project) {
-        const baseMaps = this.$store.state.map.basemaps;
-        const layers = this.$store.state.map.availableLayers;
         let layersToLoad;
-        if (baseMaps && baseMaps.length > 0) {
+        if (this.basemaps && this.basemaps.length > 0) {
           const basemapIndex = 0;
-          layersToLoad = baseMaps[basemapIndex].layers;
+          layersToLoad = this.basemaps[basemapIndex].layers;
           layersToLoad.forEach((layerToLoad) => {
-            layers.forEach((layer) => {
+            this.availableLayers.forEach((layer) => {
               if (layer.id === layerToLoad.id) {
                 layerToLoad = Object.assign(layerToLoad, layer);
               }
@@ -473,18 +479,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
 .fullwidth {
   width: 100%;
 }
 
-.map-container {
+.block-map {
   display: flex !important;
   flex-direction: column;
-
+  .map-container {
+  position: relative;
+  height: 100%;
+  #map {
+    border: 1px solid grey;
+  }
+}
   .button {
     margin-top: 0.5em;
   }
 }
-
 </style>