diff --git a/symfony/fixtures/actors.yaml b/symfony/fixtures/actors.yaml
index 48383ca1..4205697f 100755
--- a/symfony/fixtures/actors.yaml
+++ b/symfony/fixtures/actors.yaml
@@ -10,6 +10,7 @@ App\Entity\Actor:
     administrativeScopes: '<numberBetween(1, 3)>x @administrative_scope_*'
     officeName: <companySuffix()>
     officeAddress: <address()>
+    geoData: '@geoData_<current()>'
     officeLocation: '<numberBetween(2, 13)>.<numberBetween(100000, 999999)>, <numberBetween(8, 16)>.<numberBetween(100000, 999999)>'
     contactName: <name()>
     contactPosition: <jobTitle()>
diff --git a/symfony/fixtures/resources.yaml b/symfony/fixtures/resources.yaml
index c877a777..281f38c4 100644
--- a/symfony/fixtures/resources.yaml
+++ b/symfony/fixtures/resources.yaml
@@ -8,6 +8,7 @@ App\Entity\Resource:
     endAt: '<dateTimeBetween($startAt, $startAt)>'
     thematics: '<numberBetween(1, 3)>x @thematic_*'
     link: https://<domainName()>
+    geoData: '@geoData_<current()>'
     createdBy: '@user_*'
     isValidated: <boolean(70)>
-    author: <firstName()> <lastName()>
\ No newline at end of file
+    author: <firstName()> <lastName()>
diff --git a/symfony/migrations/Version20241213222822.php b/symfony/migrations/Version20241213222822.php
new file mode 100644
index 00000000..7368358c
--- /dev/null
+++ b/symfony/migrations/Version20241213222822.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241213222822 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE actor ADD geo_data_id INT DEFAULT NULL');
+        $this->addSql('ALTER TABLE actor ADD CONSTRAINT FK_447556F980E32C3E FOREIGN KEY (geo_data_id) REFERENCES geo_data (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+        $this->addSql('CREATE UNIQUE INDEX UNIQ_447556F980E32C3E ON actor (geo_data_id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE SCHEMA public');
+        $this->addSql('ALTER TABLE actor DROP CONSTRAINT FK_447556F980E32C3E');
+        $this->addSql('DROP INDEX UNIQ_447556F980E32C3E');
+        $this->addSql('ALTER TABLE actor DROP geo_data_id');
+    }
+}
diff --git a/symfony/migrations/Version20241213223524.php b/symfony/migrations/Version20241213223524.php
new file mode 100644
index 00000000..0835b180
--- /dev/null
+++ b/symfony/migrations/Version20241213223524.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241213223524 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE geo_data ALTER osm_id TYPE INT');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE SCHEMA public');
+        $this->addSql('ALTER TABLE geo_data ALTER osm_id TYPE BIGINT');
+    }
+}
diff --git a/symfony/migrations/Version20241213223750.php b/symfony/migrations/Version20241213223750.php
new file mode 100644
index 00000000..9aff5538
--- /dev/null
+++ b/symfony/migrations/Version20241213223750.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241213223750 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE geo_data ALTER osm_id TYPE BIGINT');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE SCHEMA public');
+        $this->addSql('ALTER TABLE geo_data ALTER osm_id TYPE INT');
+    }
+}
diff --git a/symfony/src/Entity/Actor.php b/symfony/src/Entity/Actor.php
index 517af75f..3b15ff96 100755
--- a/symfony/src/Entity/Actor.php
+++ b/symfony/src/Entity/Actor.php
@@ -11,6 +11,7 @@
 use ApiPlatform\Metadata\Post;
 use ApiPlatform\Metadata\Put;
 use App\Entity\Trait\BlameableEntity;
+use App\Entity\Trait\LocalizableEntity;
 use App\Entity\Trait\SluggableEntity;
 use App\Entity\Trait\TimestampableEntity;
 use App\Entity\Trait\ValidateableEntity;
@@ -67,12 +68,13 @@ class Actor
 {
     use TimestampableEntity;
     use SluggableEntity;
+    use LocalizableEntity;
     use BlameableEntity;
     use ValidateableEntity;
     public const ACTOR_READ_COLLECTION = 'actor:read_collection';
     public const ACTOR_READ_COLLECTION_ALL = 'actor:read_collection:all';
     public const ACTOR_READ_ITEM = 'actor:read_item';
-    private const ACTOR_WRITE = 'actor:write';
+    public const ACTOR_WRITE = 'actor:write';
 
     #[ORM\Id]
     #[ORM\Column(type: 'uuid', unique: true)]
diff --git a/symfony/src/Entity/GeoData.php b/symfony/src/Entity/GeoData.php
index 65db4af1..a2d7a35a 100755
--- a/symfony/src/Entity/GeoData.php
+++ b/symfony/src/Entity/GeoData.php
@@ -15,15 +15,15 @@ class GeoData
     private ?int $id = null;
 
     #[ORM\Column(type: 'bigint')]
-    #[Groups([Project::GET_FULL, Resource::GET_FULL])]
+    #[Groups([Project::GET_FULL, Resource::GET_FULL, Actor::ACTOR_READ_ITEM])]
     private ?int $osmId = null;
 
     #[ORM\Column]
-    #[Groups([Project::GET_FULL, Resource::GET_FULL])]
+    #[Groups([Project::GET_FULL, Resource::GET_FULL, Actor::ACTOR_READ_ITEM])]
     private ?string $osmType = 'node';
 
     #[ORM\Column(length: 255)]
-    #[Groups([PROJECT::GET_FULL, PROJECT::GET_PARTIAL, Actor::ACTOR_READ_ITEM, Resource::GET_FULL, Resource::WRITE])]
+    #[Groups([PROJECT::GET_FULL, PROJECT::GET_PARTIAL, Resource::GET_FULL, Resource::WRITE, Actor::ACTOR_READ_COLLECTION])]
     private ?string $name = null;
 
     #[ORM\Column(nullable: true)]
@@ -115,7 +115,7 @@ public function setAddress(?array $address): static
         return $this;
     }
 
-    #[Groups([Project::GET_PARTIAL])]
+    #[Groups([Project::GET_PARTIAL, Resource::GET_FULL, Actor::ACTOR_READ_COLLECTION])]
     public function getCoords(): ?array
     {
         return [
diff --git a/symfony/src/Entity/Thematic.php b/symfony/src/Entity/Thematic.php
index d63eb367..e869088e 100755
--- a/symfony/src/Entity/Thematic.php
+++ b/symfony/src/Entity/Thematic.php
@@ -35,7 +35,7 @@ class Thematic
     #[ORM\Id]
     #[ORM\GeneratedValue]
     #[ORM\Column]
-    #[Groups([self::THEMATIC_READ, Resource::GET_FULL, Project::GET_FULL, Project::GET_PARTIAL])]
+    #[Groups([self::THEMATIC_READ, Resource::GET_FULL, Actor::ACTOR_READ_COLLECTION, Project::GET_FULL, Project::GET_PARTIAL])]
     private ?int $id = null;
 
     #[ORM\Column(length: 255)]
diff --git a/symfony/src/Entity/Trait/LocalizableEntity.php b/symfony/src/Entity/Trait/LocalizableEntity.php
index 45014acd..bd234b37 100755
--- a/symfony/src/Entity/Trait/LocalizableEntity.php
+++ b/symfony/src/Entity/Trait/LocalizableEntity.php
@@ -11,11 +11,11 @@
 
 trait LocalizableEntity
 {
-    #[Groups([Project::WRITE, Resource::WRITE])]
+    #[Groups([Project::WRITE, Resource::WRITE, Actor::ACTOR_WRITE])]
     private ?array $osmData = null;
 
     #[ORM\OneToOne(cascade: ['persist', 'remove'])]
-    #[Groups([Project::GET_FULL, Project::GET_PARTIAL, Actor::ACTOR_READ_ITEM, Resource::GET_FULL])]
+    #[Groups([Project::GET_FULL, Project::GET_PARTIAL, Actor::ACTOR_READ_ITEM, Actor::ACTOR_READ_COLLECTION, Resource::GET_FULL])]
     private ?GeoData $geoData = null;
 
     public function getOsmData(): ?array
diff --git a/vue/.env b/vue/.env
new file mode 100644
index 00000000..465e365a
--- /dev/null
+++ b/vue/.env
@@ -0,0 +1 @@
+VITE_MAPTILER_API_KEY=0tupl15DKhXOvwp27x8c
\ No newline at end of file
diff --git a/vue/public/img/map/actor_icon.png b/vue/public/img/map/actor_icon.png
new file mode 100644
index 00000000..e192f703
Binary files /dev/null and b/vue/public/img/map/actor_icon.png differ
diff --git a/vue/public/img/map/project_icon.png b/vue/public/img/map/project_icon.png
new file mode 100644
index 00000000..7d9f4d3f
Binary files /dev/null and b/vue/public/img/map/project_icon.png differ
diff --git a/vue/public/img/map/project_icon_hover.png b/vue/public/img/map/project_icon_hover.png
new file mode 100644
index 00000000..f72a7a74
Binary files /dev/null and b/vue/public/img/map/project_icon_hover.png differ
diff --git a/vue/public/img/map/resource_icon.png b/vue/public/img/map/resource_icon.png
new file mode 100644
index 00000000..8345de27
Binary files /dev/null and b/vue/public/img/map/resource_icon.png differ
diff --git a/vue/src/App.vue b/vue/src/App.vue
index 366669cd..37becc98 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -1,25 +1,26 @@
 <template>
   <div class="App" :is-100-vh="appStore.is100vh" :is-light-header="appStore.isLightHeader">
-    <Header />
-    <KeepAlive>
-      <DialogController />
-    </KeepAlive>
-    <EditContentDialog />
-    <NotificationBox />
+    <Header v-if="!appStore.isFullViewport" />
     <div
       :class="
-        'App__content container ' +
+        'App__content ' +
+        (!appStore.isFullViewport ? 'container ' : '') +
         (appStore.mobile ? 'App__content--mobile' : 'App__content--desktop')
       "
     >
       <v-breadcrumbs
-        v-if="!appStore.mobile"
+        v-if="!appStore.mobile && !appStore.isFullViewport"
         class="Breadcrumbs"
         :items="appStore.breadcrumbs"
       ></v-breadcrumbs>
       <RouterView />
     </div>
-    <Footer />
+    <Footer v-if="!appStore.isFullViewport" />
+    <KeepAlive>
+      <DialogController />
+    </KeepAlive>
+    <EditContentDialog />
+    <NotificationBox />
   </div>
 </template>
 
diff --git a/vue/src/assets/images/icons/map/actor_icon.png b/vue/src/assets/images/icons/map/actor_icon.png
new file mode 100644
index 00000000..998d5540
Binary files /dev/null and b/vue/src/assets/images/icons/map/actor_icon.png differ
diff --git a/vue/src/assets/images/icons/map/resource_icon.png b/vue/src/assets/images/icons/map/resource_icon.png
new file mode 100644
index 00000000..7ec30049
Binary files /dev/null and b/vue/src/assets/images/icons/map/resource_icon.png differ
diff --git a/vue/src/assets/images/map/basemap/openstreetmap.jpg b/vue/src/assets/images/map/basemap/openstreetmap.jpg
new file mode 100644
index 00000000..42781707
Binary files /dev/null and b/vue/src/assets/images/map/basemap/openstreetmap.jpg differ
diff --git a/vue/src/assets/images/map/basemap/satellite.jpg b/vue/src/assets/images/map/basemap/satellite.jpg
new file mode 100644
index 00000000..8221358b
Binary files /dev/null and b/vue/src/assets/images/map/basemap/satellite.jpg differ
diff --git a/vue/src/assets/styles/global/vars/_dimensions.scss b/vue/src/assets/styles/global/vars/_dimensions.scss
index 63f20a6f..8f375796 100644
--- a/vue/src/assets/styles/global/vars/_dimensions.scss
+++ b/vue/src/assets/styles/global/vars/_dimensions.scss
@@ -5,7 +5,7 @@ $header-mobile-height: 64px;
 $dim-container-w: 70rem;
 
 $dim-dialog-w: 31.25rem;
-$dim-radius: 5px;
+$dim-radius: 3px;
 
 // Breakpoints
 $bp-sm: 576px;
diff --git a/vue/src/assets/styles/global/vuetifyOverrides.scss b/vue/src/assets/styles/global/vuetifyOverrides.scss
index d76f685e..d3e6f7ba 100644
--- a/vue/src/assets/styles/global/vuetifyOverrides.scss
+++ b/vue/src/assets/styles/global/vuetifyOverrides.scss
@@ -1,3 +1,13 @@
+:root {
+    --v-shadow-key-umbra-opacity: rgba(0, 0, 0, 0.1);
+    --v-shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.075);
+    --v-shadow-key-ambient-opacity: rgba(0, 0, 0, 0.05);
+}
+
+.elevation-1 {
+    box-shadow: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.15) !important;
+}
+
 // To be replaced by customized variables: https://vuetifyjs.com/en/features/sass-variables/#component-specific-variables
 .v-field--variant-solo, .v-field--variant-solo-filled {
     box-shadow: none !important;
diff --git a/vue/src/assets/translations/fr/common.json b/vue/src/assets/translations/fr/common.json
index d7dfe408..c1392a88 100644
--- a/vue/src/assets/translations/fr/common.json
+++ b/vue/src/assets/translations/fr/common.json
@@ -55,6 +55,7 @@
         "cancel": "Annuler",
         "create": "Créer",
         "delete": "Supprimer",
+        "or": "OU",
         "errorMessages": {
             "required": "Ce champs est requis",
             "minlength": "Ce champs doit avoir au moins {min} caractères",
diff --git a/vue/src/assets/translations/fr/myMap.json b/vue/src/assets/translations/fr/myMap.json
new file mode 100644
index 00000000..90b79c46
--- /dev/null
+++ b/vue/src/assets/translations/fr/myMap.json
@@ -0,0 +1,37 @@
+{
+  "myMap": {
+    "header": {
+      "share": "Partager",
+      "search": {
+        "placeholder": "Rechercher un lieu ou une donnée"
+      }
+    },
+    "components": {
+      "opacity": "Transparence"
+    },
+    "leftSidebar": {
+      "welcome": {
+        "title": "Bienvenue",
+        "description": "Composez votre carte grâce aux données mises à disposition sur la Plateforme Urbaine du Cameroun.",
+        "moreAccess": "Vous souhaitez avoir accès à plus de données et d’outils ?",
+        "close": "Fermer"
+      }
+    
+    },
+    "rightSidebar": {
+      "actions": {
+        "about": "À propos",
+        "share": "Partager",
+        "downloadLayer": "Télécharger la couche",
+        "opacity": "Ajuster la transparence"
+      },
+      "layers": {
+        "itemType": {
+          "project": "Projets",
+          "actor": "Acteurs",
+          "resource": "Ressources"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/vue/src/assets/translations/fr/resources.json b/vue/src/assets/translations/fr/resources.json
index 7ee0f54a..17f13bb7 100644
--- a/vue/src/assets/translations/fr/resources.json
+++ b/vue/src/assets/translations/fr/resources.json
@@ -35,7 +35,6 @@
                 "edit": "Modifier une ressource",
                 "validate": "Valider une ressource"
             },
-            "or": "OU",
             "fields": {
                 "name": {
                     "label": "Nom de la ressource",
diff --git a/vue/src/components/forms/Geocoding.vue b/vue/src/components/forms/Geocoding.vue
index 9e6bee22..dceffa05 100644
--- a/vue/src/components/forms/Geocoding.vue
+++ b/vue/src/components/forms/Geocoding.vue
@@ -4,17 +4,18 @@
     density="compact"
     featureType="city"
     variant="outlined"
-    :placeholder="$t('geocoding.placeholder')"
+    :placeholder="placeholder"
     :no-data-text="$t('geocoding.noData')"
     :items="geocodingItems"
     :clearable="true"
     :item-value="(val) => val"
     :item-title="(val) => val.osmName"
+    v-model="osmData"
     @update:search="(e) => (searchQuery = e)"
     @click:clear="(e) => (searchQuery = '')"
   >
     <template v-slot:prepend-inner>
-      <v-icon icon="mdi-map-marker-outline" color="main-blue" class="opacity-80"></v-icon>
+      <v-icon :icon="icon" color="main-blue" class="opacity-100"></v-icon>
     </template>
     <template v-slot:append-inner>
       <v-fade-transition>
@@ -37,13 +38,34 @@ import GeocodingService from '@/services/map/GeocodingService'
 import { debounce } from '@/services/utils/UtilsService'
 import { NominatimSearchType } from '@/models/enums/geo/NominatimSearchType'
 import type { GeocodingItem } from '@/models/interfaces/geo/GeocodingItem'
+import type { OsmData } from '@/models/interfaces/geo/OsmData'
+import { i18n } from '@/plugins/i18n'
+
+const osmData = defineModel<OsmData | null>({
+  default: null
+})
 
 const props = withDefaults(
   defineProps<{
     searchType: NominatimSearchType
+    icon?: string
+    geometryDetails?: boolean
+    placeholder?: string
   }>(),
   {
-    searchType: NominatimSearchType.FREE
+    searchType: NominatimSearchType.FREE,
+    icon: 'mdi-map-marker-outline',
+    geometryDetails: false,
+    placeholder: i18n.t('geocoding.placeholder')
+  }
+)
+
+watch(
+  () => osmData.value,
+  async () => {
+    if (osmData.value && props.geometryDetails) {
+      osmData.value = await GeocodingService.getBbox(osmData.value)
+    }
   }
 )
 
diff --git a/vue/src/components/map/Map.vue b/vue/src/components/map/Map.vue
index 87b44f9a..388f0db0 100644
--- a/vue/src/components/map/Map.vue
+++ b/vue/src/components/map/Map.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="map">
     <ResetMapExtentControl ref="reset-map-extent-control" />
-    <ToggleSidebarControl ref="toggle-sidebar-control" />
   </div>
 </template>
 <script setup lang="ts">
@@ -9,7 +8,6 @@ import { onMounted, watch, computed, ref, type Ref, useTemplateRef } from 'vue'
 import maplibregl, { GeoJSONSource } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import ResetMapExtentControl from '@/components/map/controls/ResetMapExtentControl.vue'
-import ToggleSidebarControl from '@/components/map/controls/ToggleSidebarControl.vue'
 import { useApplicationStore } from '@/stores/applicationStore'
 import { IControl } from '@/services/map/MapService'
 
@@ -17,7 +15,6 @@ const applicationStore = useApplicationStore()
 const triggerZoomReset = computed(() => applicationStore.triggerZoomReset)
 const map: Ref<maplibregl.Map | null> = ref(null)
 const resetMapExtentControl = useTemplateRef('reset-map-extent-control')
-const toggleSidebarControl = useTemplateRef('toggle-sidebar-control')
 const props = withDefaults(
   defineProps<{
     bounds?: maplibregl.LngLatBounds
@@ -32,11 +29,13 @@ const hoveredFeatureId: Ref<string | null> = ref(null)
 const activeFeatureId: Ref<string | null> = ref(null)
 
 onMounted(() => {
+  const apiKey = import.meta.env.VITE_MAPTILER_API_KEY
   map.value = new maplibregl.Map({
     container: 'map',
-    style: 'https://demotiles.maplibre.org/style.json',
+    style: `https://api.maptiler.com/maps/openstreetmap/style.json?key=${apiKey}`,
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
+    attributionControl: false
   })
 
   map.value.dragRotate.disable()
@@ -48,7 +47,7 @@ onMounted(() => {
 
   map.value.addControl(nav, 'top-right')
   map.value.addControl(new IControl(resetMapExtentControl), 'top-right')
-  map.value.addControl(new IControl(toggleSidebarControl), 'top-left')
+  map.value.addControl(new maplibregl.AttributionControl(), 'bottom-left')
   setBBox()
 })
 
@@ -65,10 +64,15 @@ const removeLayer = (layerName: string) => {
 }
 
 const setData = (sourceName: string, geojson: GeoJSON.GeoJSON) => {
-  const source = map.value?.getSource(sourceName) as GeoJSONSource
+  const source = map.value?.getSource(sourceName.toString()) as GeoJSONSource
   if (source) source.setData(geojson)
 }
 
+const getData = async (sourceName: string | number) => {
+  const source = map.value?.getSource(sourceName.toString()) as GeoJSONSource
+  if (source) return await source.getData()
+}
+
 const addSource = (sourceName: string, geojson: GeoJSON.GeoJSON) => {
   if (map.value?.getSource(sourceName)) return
   map.value?.addSource(sourceName, {
@@ -83,6 +87,12 @@ const setLayoutProperty = (layerName: string, property: string, value: any) => {
   }
 }
 
+const setPaintProperty = (layerName: string, property: string, value: any) => {
+  if (map.value?.getLayer(layerName)) {
+    map.value?.setPaintProperty(layerName, property, value)
+  }
+}
+
 const addLayer = async (
   layerName: string,
   options: { layout: maplibregl.LayerSpecification['layout'] }
@@ -92,7 +102,8 @@ const addLayer = async (
     id: layerName,
     type: 'symbol',
     source: layerName,
-    layout: options.layout
+    layout: options.layout,
+    metadata: { isPersistent: true } // used to have persistent layers when switching basemaps
   })
 }
 
@@ -171,7 +182,9 @@ defineExpose({
   removeLayer,
   removeSource,
   setData,
-  setLayoutProperty
+  getData,
+  setLayoutProperty,
+  setPaintProperty
 })
 </script>
 
@@ -246,7 +259,7 @@ defineExpose({
 
   .maplibregl-ctrl-top-left,
   .maplibregl-ctrl-top-right {
-    margin: 3rem 1.5rem;
+    margin: 1.5rem;
     display: flex;
     flex-flow: column nowrap;
     gap: 0.62rem;
diff --git a/vue/src/components/map/controls/BasemapPicker.vue b/vue/src/components/map/controls/BasemapPicker.vue
new file mode 100644
index 00000000..ee602d8d
--- /dev/null
+++ b/vue/src/components/map/controls/BasemapPicker.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="maplibregl-ctrl maplibregl-ctrl-group BasemapPicker">
+    <div
+      class="BasemapPicker__item"
+      v-for="b in basemaps"
+      :key="b.id"
+      :basemap="b.id"
+      :active="b.id === basemap?.id"
+      @click="basemap = b"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Basemap from '@/models/interfaces/map/Basemap'
+
+const basemap = defineModel<Basemap | null>({
+  default: {
+    id: 'openstreetmap',
+    name: 'OpenStreetMap',
+    style: 'https://api.maptiler.com/maps/openstreetmap/style.json'
+  }
+})
+
+const basemaps: Basemap[] = [
+  {
+    id: 'openstreetmap',
+    name: 'OpenStreetMap',
+    style: 'https://api.maptiler.com/maps/openstreetmap/style.json'
+  },
+  {
+    id: 'satellite',
+    name: 'Satellite',
+    style: 'https://api.maptiler.com/maps/satellite/style.json'
+  }
+]
+</script>
+
+<style lang="scss">
+.BasemapPicker {
+  display: flex;
+  flex-flow: row nowrap !important;
+  gap: 0.5rem;
+  margin: 1rem !important;
+
+  .BasemapPicker__item {
+    $dim-basemap-w: 3.25rem;
+    width: $dim-basemap-w;
+    height: $dim-basemap-w;
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+    border: solid 2px white;
+    cursor: pointer;
+    transition: all 0.15s ease-in;
+
+    &[basemap='openstreetmap'] {
+      background-image: url(@/assets/images/map/basemap/openstreetmap.jpg);
+    }
+    &[basemap='satellite'] {
+      background-image: url(@/assets/images/map/basemap/satellite.jpg);
+    }
+
+    &[active='true'] {
+      order: 1;
+    }
+    &:not([active='true']) {
+      transform: scale(0);
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+
+  &:hover {
+    .BasemapPicker__item {
+      transform: scale(1);
+      pointer-events: all;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/vue/src/components/map/controls/MapControl.vue b/vue/src/components/map/controls/MapControl.vue
new file mode 100644
index 00000000..13893425
--- /dev/null
+++ b/vue/src/components/map/controls/MapControl.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-btn class="MapControl" variant="elevated" elevation="1" density="comfortable" :size="'2.5rem'">
+    <v-icon :icon="icon" class="maplibregl-ctrl-icon" :size="'1.5rem'"></v-icon>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon: string
+}>()
+</script>
+
+<style lang="scss">
+.MapControl {
+  pointer-events: all;
+  box-shadow: 0 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.15);
+}
+</style>
diff --git a/vue/src/components/map/controls/ToggleSidebarControl.vue b/vue/src/components/map/controls/ToggleSidebarControl.vue
index f3510ca1..2bdd1982 100644
--- a/vue/src/components/map/controls/ToggleSidebarControl.vue
+++ b/vue/src/components/map/controls/ToggleSidebarControl.vue
@@ -1,31 +1,54 @@
 <template>
-  <div class="maplibregl-ctrl maplibregl-ctrl-group">
-    <button
-      class="maplibregl-ctrl-toggle-sidebar"
-      :active="projectStore.isProjectMapFullWidth"
-      @click="projectStore.isProjectMapFullWidth = !projectStore.isProjectMapFullWidth"
-    >
-      <span class="maplibregl-ctrl-icon"></span>
-    </button>
-  </div>
+  <v-btn
+    class="ToggleSidebarControl"
+    variant="elevated"
+    :is-active="isToggled"
+    elevation="1"
+    density="comfortable"
+    :size="'2.5rem'"
+    icon="mdi-arrow-left"
+    :color="isHiglighted ? 'bright-blue' : 'white'"
+    @click="isToggled = !isToggled"
+  >
+    <v-icon
+      icon="mdi-chevron-left"
+      class="maplibregl-ctrl-icon"
+      :inversed-direction="inversedDirection"
+      :size="'1.5rem'"
+      :color="isHiglighted ? 'white' : 'main-blue'"
+    ></v-icon>
+  </v-btn>
 </template>
 
 <script setup lang="ts">
-import { useProjectStore } from '@/stores/projectStore'
-const projectStore = useProjectStore()
+import { computed } from 'vue'
+const isToggled = defineModel<boolean>({ default: false })
+const props = withDefaults(
+  defineProps<{
+    inversedDirection?: boolean
+    isHiglightedWhenOff?: boolean
+  }>(),
+  {
+    inversedDirection: false,
+    isHiglightedWhenOff: false
+  }
+)
+const isHiglighted = computed(() => !isToggled.value && props.isHiglightedWhenOff)
 </script>
 
 <style lang="scss">
-.maplibregl-ctrl-toggle-sidebar {
-  transition: all 0.3s ease-in-out;
-
-  &[active='true'] {
-    transform: rotate(180deg);
-    box-shadow: 0 -0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.15);
+.ToggleSidebarControl {
+  pointer-events: all;
+  &[is-active='true'] {
+    .v-icon {
+      rotate: 180deg;
+    }
   }
-
-  .maplibregl-ctrl-icon {
-    background-image: url(@/assets/images/icons/map/mdi-toggle.svg);
+  .v-icon {
+    transition: all 0.3s ease-in-out;
+    &[inversed-direction='true'] {
+      transform: scaleX(-1);
+    }
   }
 }
 </style>
diff --git a/vue/src/models/enums/app/StoresList.ts b/vue/src/models/enums/app/StoresList.ts
index 6074a401..f22e2785 100644
--- a/vue/src/models/enums/app/StoresList.ts
+++ b/vue/src/models/enums/app/StoresList.ts
@@ -6,5 +6,6 @@ export enum StoresList {
   PROJECTS = 'projects',
   RESOURCES = 'resources',
   THEMATICS = 'thematics',
-  HOME = 'home'
+  HOME = 'home',
+  MY_MAP = 'myMap'
 }
diff --git a/vue/src/models/interfaces/Actor.ts b/vue/src/models/interfaces/Actor.ts
index 73085f6c..fd90caed 100644
--- a/vue/src/models/interfaces/Actor.ts
+++ b/vue/src/models/interfaces/Actor.ts
@@ -2,21 +2,20 @@ import type { ActorsCategories } from '../enums/contents/actors/ActorsCategories
 import type { ActorExpertise } from './ActorExpertise'
 import type { AdministrativeScope } from './AdministrativeScope'
 import type { Blameable } from './common/Blameable'
+import type { ThematicItem } from './common/ThematicItem'
 import type { Timestampable } from './common/Timestampable'
 import type { Validateable } from './common/Validateable'
 import type { ContentImageFromUserFile } from './ContentImage'
 import type { MediaObject } from './MediaObject'
 import type { Project } from './Project'
-import type { Thematic } from './Thematic'
 
-export interface Actor extends Timestampable, Validateable, Blameable {
+export interface Actor extends Timestampable, Validateable, Blameable, ThematicItem {
   id: string
   '@id': string
   name: string
   acronym: string
   category: ActorsCategories
   expertises: ActorExpertise[]
-  thematics: Thematic[]
   description: string
   administrativeScopes: AdministrativeScope[]
   officeName: string
diff --git a/vue/src/models/interfaces/Project.ts b/vue/src/models/interfaces/Project.ts
index 3ec0f7a6..ec7c9b21 100644
--- a/vue/src/models/interfaces/Project.ts
+++ b/vue/src/models/interfaces/Project.ts
@@ -1,5 +1,4 @@
 import type { Actor } from '@/models/interfaces/Actor'
-import type { Thematic } from '@/models/interfaces/Thematic'
 import type { AdministrativeScope } from '@/models/enums/AdministrativeScope'
 import type { Timestampable } from '@/models/interfaces/common/Timestampable'
 import type { Status } from '@/models/enums/contents/Status'
@@ -11,8 +10,9 @@ import type { Organisation } from '@/models/interfaces/Organisation'
 import type { Validateable } from '@/models/interfaces/common/Validateable'
 import type { Blameable } from '@/models/interfaces/common/Blameable'
 import type { Localizable } from '@/models/interfaces/common/Localizable'
+import type { ThematicItem } from '@/models/interfaces/common/ThematicItem'
 
-export interface Project extends Timestampable, Validateable, Blameable, Localizable {
+export interface Project extends Timestampable, Validateable, Blameable, Localizable, ThematicItem {
   id: string
   name: string
   slug: string
@@ -25,7 +25,6 @@ export interface Project extends Timestampable, Validateable, Blameable, Localiz
   partners: string[]
   interventionZone: AdministrativeScope
   beneficiaryTypes: BeneficiaryType[]
-  thematics: Thematic[]
   focalPointName: string
   focalPointPosition: string
   focalPointEmail: string
diff --git a/vue/src/models/interfaces/Resource.ts b/vue/src/models/interfaces/Resource.ts
index 9308c683..d8809150 100644
--- a/vue/src/models/interfaces/Resource.ts
+++ b/vue/src/models/interfaces/Resource.ts
@@ -3,19 +3,23 @@ import type { Validateable } from '@/models/interfaces/common/Validateable'
 import type { Blameable } from '@/models/interfaces/common/Blameable'
 import type { ResourceFormat } from '@/models/enums/contents/ResourceFormat'
 import type { ResourceType } from '@/models/enums/contents/ResourceType'
-import type { Thematic } from '@/models/interfaces/Thematic'
 import type { LocalizableSubmission } from '@/models/interfaces/common/LocalizableSubmission'
 import type { Localizable } from '@/models/interfaces/common/Localizable'
 import type { MediaObject } from '@/models/interfaces/MediaObject'
+import type { ThematicItem } from '@/models/interfaces/common/ThematicItem'
 
-export interface Resource extends Timestampable, Validateable, Blameable, Localizable {
+export interface Resource
+  extends Timestampable,
+    Validateable,
+    Blameable,
+    Localizable,
+    ThematicItem {
   id: string
   name: string
   description: string
   file: MediaObject
   type: ResourceType
   format: ResourceFormat
-  thematics: Thematic[]
   startAt: Date
   endAt: Date
   author: string
diff --git a/vue/src/models/interfaces/common/ThematicItem.ts b/vue/src/models/interfaces/common/ThematicItem.ts
new file mode 100644
index 00000000..013d0024
--- /dev/null
+++ b/vue/src/models/interfaces/common/ThematicItem.ts
@@ -0,0 +1,5 @@
+import type { Thematic } from '@/models/interfaces/Thematic'
+
+export interface ThematicItem {
+  thematics: Thematic[]
+}
diff --git a/vue/src/models/interfaces/geo/OsmData.ts b/vue/src/models/interfaces/geo/OsmData.ts
index f2081ecb..131a5d05 100644
--- a/vue/src/models/interfaces/geo/OsmData.ts
+++ b/vue/src/models/interfaces/geo/OsmData.ts
@@ -4,4 +4,6 @@ export interface OsmData {
   osmId: OsmId
   osmType: string
   osmName: string
+  coords?: [number, number]
+  bbox?: [number, number, number, number]
 }
diff --git a/vue/src/models/interfaces/map/Basemap.ts b/vue/src/models/interfaces/map/Basemap.ts
new file mode 100644
index 00000000..b01a82c6
--- /dev/null
+++ b/vue/src/models/interfaces/map/Basemap.ts
@@ -0,0 +1,5 @@
+export default interface Basemap {
+  id: string
+  name: string
+  style: string
+}
\ No newline at end of file
diff --git a/vue/src/models/interfaces/map/Layer.ts b/vue/src/models/interfaces/map/Layer.ts
new file mode 100644
index 00000000..87186634
--- /dev/null
+++ b/vue/src/models/interfaces/map/Layer.ts
@@ -0,0 +1,7 @@
+export default interface Layer {
+  id: string | number
+  name: string
+  isShown?: boolean
+  icon?: string
+  opacity?: number
+}
\ No newline at end of file
diff --git a/vue/src/models/interfaces/map/PersistentGeoJSON.ts b/vue/src/models/interfaces/map/PersistentGeoJSON.ts
new file mode 100644
index 00000000..56052176
--- /dev/null
+++ b/vue/src/models/interfaces/map/PersistentGeoJSON.ts
@@ -0,0 +1,3 @@
+export default interface PersistentGeoJSON extends GeoJSON.FeatureCollection {
+  isPersistent: boolean
+}
diff --git a/vue/src/plugins/i18n.ts b/vue/src/plugins/i18n.ts
index 28d8fc44..6b0dc40a 100644
--- a/vue/src/plugins/i18n.ts
+++ b/vue/src/plugins/i18n.ts
@@ -6,6 +6,7 @@ import authFR from '@/assets/translations/fr/auth.json'
 import projectsFR from '@/assets/translations/fr/projects.json'
 import resourcesFR from '@/assets/translations/fr/resources.json'
 import homeFR from '@/assets/translations/fr/home.json'
+import myMapFR from '@/assets/translations/fr/myMap.json'
 
 export const i18nInstance = createI18n({
   legacy: false,
@@ -19,7 +20,8 @@ export const i18nInstance = createI18n({
       ...authFR,
       ...projectsFR,
       ...homeFR,
-      ...resourcesFR
+      ...resourcesFR,
+      ...myMapFR
     }
   }
 })
diff --git a/vue/src/plugins/vuetify.ts b/vue/src/plugins/vuetify.ts
index 6519724d..be17c306 100644
--- a/vue/src/plugins/vuetify.ts
+++ b/vue/src/plugins/vuetify.ts
@@ -21,6 +21,7 @@ const pucCustomTheme: ThemeDefinition = {
     'main-yellow': '#F6CC47',
     'light-yellow': '#fdf5da',
     'main-grey': '#E0E0E0',
+    'dark-grey': '#999999',
     'main-green': '#2D6438'
   }
 }
diff --git a/vue/src/router/index.ts b/vue/src/router/index.ts
index 307f1b10..4cf1680f 100644
--- a/vue/src/router/index.ts
+++ b/vue/src/router/index.ts
@@ -84,7 +84,7 @@ const router = createRouter({
     {
       path: '/map',
       name: 'map',
-      component: () => import('@/views/map/MapView.vue')
+      component: () => import('@/views/map/MyMapView.vue')
     },
     {
       path: '/myAccount',
diff --git a/vue/src/services/map/GeocodingService.ts b/vue/src/services/map/GeocodingService.ts
index c2d17913..a5b24fdd 100644
--- a/vue/src/services/map/GeocodingService.ts
+++ b/vue/src/services/map/GeocodingService.ts
@@ -34,6 +34,7 @@ export default class GeocodingService {
         .then((response) => {
           const geojson = response.data
           for (const feature of geojson.features) {
+            console.log('feature.properties.geocoding', feature)
             const point: OsmData = {
               osmId: feature.properties.geocoding.osm_id,
               osmType: feature.properties.geocoding.osm_type,
@@ -59,6 +60,27 @@ export default class GeocodingService {
     }
   }
 
+  static async getBbox(osmData: OsmData): Promise<OsmData> {
+    return await nominatimClient
+      .get('/lookup?=', {
+        params: {
+          osm_ids: this.getOsmIdentifier(osmData),
+          format: 'geojson'
+        }
+      })
+      .then((response) => {
+        const geojson = response.data
+        const feature = geojson.features[0]
+        osmData.bbox = feature.bbox
+        osmData.coords = feature.geometry.coordinates
+        return osmData
+      })
+  }
+
+  static getOsmIdentifier(osmData: OsmData): string {
+    return `${osmData.osmType[0].toUpperCase()}${osmData.osmId}`
+  }
+
   static getLocationName(geoData: GeoData): string {
     if (!geoData) return ''
     return geoData.name.split(', ').splice(0, 2).join(', ')
diff --git a/vue/src/services/map/LayerService.ts b/vue/src/services/map/LayerService.ts
new file mode 100644
index 00000000..190ad036
--- /dev/null
+++ b/vue/src/services/map/LayerService.ts
@@ -0,0 +1,15 @@
+import type Layer from '@/models/interfaces/map/Layer'
+
+export default class LayerService {
+  static initLayer(layer: Layer): Layer {
+    return {
+      ...layer,
+      isShown: true,
+      opacity: 100
+    }
+  }
+
+  static initSubLayer(data: any[]): Layer[] {
+    return data.map((item) => this.initLayer({ id: item.id, name: item.name }))
+  }
+}
diff --git a/vue/src/services/map/MapService.ts b/vue/src/services/map/MapService.ts
index ba57a7f4..54efa77a 100644
--- a/vue/src/services/map/MapService.ts
+++ b/vue/src/services/map/MapService.ts
@@ -1,25 +1,32 @@
+import type Basemap from '@/models/interfaces/map/Basemap'
 import maplibregl from 'maplibre-gl'
+import axios from 'axios'
+import type { Map } from 'maplibre-gl'
+import type PersistentGeoJSON from '@/models/interfaces/map/PersistentGeoJSON'
 
 export default class MapService {
-  static getGeojson(data: any[]): any {
+  static getGeojson(data: any[]): PersistentGeoJSON {
     const geojson: any = []
     Array.prototype.forEach.call(data, (item: any) => {
-      geojson.push({
-        id: item.id,
-        properties: {
+      if (item.geoData?.coords) {
+        geojson.push({
           id: item.id,
-          name: item.name
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [item.geoData.coords.lng, item.geoData.coords.lat]
-        }
-      })
+          properties: {
+            id: item.id,
+            name: item.name
+          },
+          geometry: {
+            type: 'Point',
+            coordinates: [item.geoData.coords.lng, item.geoData.coords.lat]
+          }
+        })
+      }
     })
 
     return {
       type: 'FeatureCollection',
-      features: geojson
+      features: geojson,
+      isPersistent: true
     }
   }
 
@@ -32,6 +39,43 @@ export default class MapService {
       new maplibregl.LngLatBounds(coordinates[0], coordinates[0])
     )
   }
+
+  static getStyle(basemap: Basemap) {
+    return `${basemap.style}?key=${import.meta.env.VITE_MAPTILER_API_KEY}`
+  }
+
+  static updateStyle = (map: Map, basemap: Basemap) => {
+    // This will get all the layers and sources of your current map
+    const layers = map.getStyle().layers
+    const sources = map.getStyle().sources
+
+    // Filter them all out to keep only your added layers
+    const filteredLayers = layers.filter((l: any) => l?.metadata?.isPersistent)
+    const filteredSources: any = {}
+
+    // Filter them all out to keep only your added sources
+    Object.keys(sources).forEach((key: string) => {
+      const source = sources[key]
+      if ('data' in source && (source.data as PersistentGeoJSON)?.isPersistent) {
+        filteredSources[key] = source
+      }
+    })
+
+    axios
+      .get(this.getStyle(basemap))
+      .then((result: any) => {
+        const newStyle = result.data
+
+        // Merge newly fetched layers and sources with the filtered layers and sources
+        newStyle.layers = [...newStyle.layers, ...filteredLayers]
+        newStyle.sources = { ...newStyle.sources, ...filteredSources }
+
+        map.setStyle(newStyle)
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  }
 }
 
 export class IControl {
diff --git a/vue/src/services/utils/UtilsService.ts b/vue/src/services/utils/UtilsService.ts
index e047f246..99ca212d 100644
--- a/vue/src/services/utils/UtilsService.ts
+++ b/vue/src/services/utils/UtilsService.ts
@@ -75,3 +75,11 @@ export function getDateDiff(date1: string | Date, date2: string | Date): number
 export function isSameDay(date1: string | Date, date2: string | Date) {
   return getDateDiff(date1, date2) === 0
 }
+
+export function downloadJson(data: any, fileName: string) {
+  const blob = new Blob([JSON.stringify(data)], { type: 'application/json' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = `${fileName}.geojson`
+  link.click()
+}
diff --git a/vue/src/stores/applicationStore.ts b/vue/src/stores/applicationStore.ts
index fb717c5c..98fec1e8 100644
--- a/vue/src/stores/applicationStore.ts
+++ b/vue/src/stores/applicationStore.ts
@@ -33,8 +33,13 @@ export const useApplicationStore = defineStore(StoresList.APPLICATION, () => {
     return useProjectStore().isProjectMapFullWidth
   })
 
+  const isFullViewport = computed(() => {
+    const fullViewportRoutes: string[] = ['map']
+    return route.name && typeof route.name === 'string' && fullViewportRoutes.includes(route.name)
+  })
+
   const isLightHeader = computed(() => {
-    const lightUiRoutes: string[] = ['projects']
+    const lightUiRoutes: string[] = ['projects', 'map']
     return route.name && typeof route.name === 'string' && lightUiRoutes.includes(route.name)
   })
 
@@ -59,6 +64,7 @@ export const useApplicationStore = defineStore(StoresList.APPLICATION, () => {
     activeDialog,
     breadcrumbs,
     is100vh,
+    isFullViewport,
     isLightHeader,
     triggerZoomReset,
     showEditContentDialog,
diff --git a/vue/src/stores/myMapStore.ts b/vue/src/stores/myMapStore.ts
new file mode 100644
index 00000000..10b06d2d
--- /dev/null
+++ b/vue/src/stores/myMapStore.ts
@@ -0,0 +1,33 @@
+import { StoresList } from '@/models/enums/app/StoresList'
+import { defineStore } from 'pinia'
+import { ref, type Ref } from 'vue'
+import type { OsmData } from '@/models/interfaces/geo/OsmData'
+import type Layer from '@/models/interfaces/map/Layer'
+import type Map from '@/components/map/Map.vue'
+
+export const useMyMapStore = defineStore(StoresList.MY_MAP, () => {
+  const myMap: Ref<InstanceType<typeof Map> | undefined> = ref()
+  const isRightSidebarShown = ref(true)
+  const isLeftSidebarShown = ref(true)
+  const mapSearch: Ref<OsmData | null> = ref(null)
+
+  const actorLayer: Ref<Layer | null> = ref(null)
+  const actorSubLayers: Ref<Layer[]> = ref([])
+  const resourceLayer: Ref<Layer | null> = ref(null)
+  const resourceSubLayers: Ref<Layer[]> = ref([])
+  const projectLayer: Ref<Layer | null> = ref(null)
+  const projectSubLayers: Ref<Layer[]> = ref([])
+
+  return {
+    isRightSidebarShown,
+    isLeftSidebarShown,
+    myMap,
+    mapSearch,
+    actorLayer,
+    actorSubLayers,
+    projectLayer,
+    projectSubLayers,
+    resourceLayer,
+    resourceSubLayers
+  }
+})
diff --git a/vue/src/views/map/MapView.vue b/vue/src/views/map/MapView.vue
deleted file mode 100644
index ac576e3a..00000000
--- a/vue/src/views/map/MapView.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div id="map"></div>
-</template>
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import maplibregl from 'maplibre-gl'
-import 'maplibre-gl/dist/maplibre-gl.css'
-
-onMounted(() => {
-  new maplibregl.Map({
-    container: 'map', // container id
-    style: 'https://demotiles.maplibre.org/style.json', // style URL
-    center: [0, 0], // starting position [lng, lat]
-    zoom: 1 // starting zoom
-  })
-})
-</script>
-<style>
-#map {
-  width: 300px;
-  height: 300px;
-}
-</style>
diff --git a/vue/src/views/map/MyMapView.vue b/vue/src/views/map/MyMapView.vue
new file mode 100644
index 00000000..1ae9189f
--- /dev/null
+++ b/vue/src/views/map/MyMapView.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="MyMapView">
+    <MyMapHeader class="MyMapView__header" />
+    <div class="MyMapView__mapCtn">
+      <MyMapWelcomeSideBar
+        class="MyMapView__welcomeSideBar"
+        :shown="myMapStore.isLeftSidebarShown"
+      />
+      <MyMap class="MyMapView__myMap" />
+      <MyMapLayersSideBar
+        class="MyMapView__layersSideBar"
+        :shown="myMapStore.isRightSidebarShown"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import MyMap from '@/views/map/components/MyMap.vue'
+import MyMapHeader from '@/views/map/components/MyMapHeader.vue'
+import MyMapWelcomeSideBar from '@/views/map/components/MyMapWelcomeSideBar.vue'
+import MyMapLayersSideBar from '@/views/map/components/MyMapLayersSideBar.vue'
+import { useMyMapStore } from '@/stores/myMapStore'
+
+const myMapStore = useMyMapStore()
+</script>
+
+<style lang="scss">
+.MyMapView {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100vh;
+  overflow: hidden;
+  .MyMapView__header {
+    // height: 4rem;
+  }
+  .MyMapView__mapCtn {
+    display: flex;
+    flex-flow: row nowrap;
+    flex: 1 0 auto;
+
+    .MyMapView__welcomeSideBar,
+    .MyMapView__layersSideBar {
+      z-index: 1;
+      transition: all 0.15s ease-in;
+
+      &[shown='false'] {
+        overflow-x: hidden;
+        width: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/vue/src/views/map/components/MyMap.vue b/vue/src/views/map/components/MyMap.vue
new file mode 100644
index 00000000..73fbd4fa
--- /dev/null
+++ b/vue/src/views/map/components/MyMap.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="MyMap">
+    <Map class="MyMap__map" ref="my-map" />
+    <BasemapPicker ref="basemap-picker" v-model="basemap" />
+    <ToggleSidebarControl
+      v-model="myMapStore.isLeftSidebarShown"
+      :inversed-direction="true"
+      :is-higlighted-when-off="true"
+      ref="toggle-left-sidebar-control"
+    />
+    <ToggleSidebarControl
+      style="order: -1"
+      v-model="myMapStore.isRightSidebarShown"
+      :is-higlighted-when-off="true"
+      ref="toggle-right-sidebar-control"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasemapPicker from '@/components/map/controls/BasemapPicker.vue'
+import ToggleSidebarControl from '@/components/map/controls/ToggleSidebarControl.vue'
+import Map from '@/components/map/Map.vue'
+import type Basemap from '@/models/interfaces/map/Basemap'
+import MapService, { IControl } from '@/services/map/MapService'
+import { useMyMapStore } from '@/stores/myMapStore'
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
+
+type MapType = InstanceType<typeof Map>
+const basemap = ref<Basemap>()
+const myMapStore = useMyMapStore()
+const myMap = useTemplateRef<MapType>('my-map')
+const toggleRightSidebarControl = useTemplateRef('toggle-right-sidebar-control')
+const toggleLeftSidebarControl = useTemplateRef('toggle-left-sidebar-control')
+const basemapPicker = useTemplateRef('basemap-picker')
+const map = computed(() => myMap.value?.map)
+
+onMounted(() => {
+  if (myMap.value) {
+    myMapStore.myMap = myMap.value
+  }
+  if (map.value != null) {
+    map.value.addControl(new IControl(basemapPicker), 'bottom-right')
+    map.value.addControl(new IControl(toggleRightSidebarControl), 'top-right')
+    map.value.addControl(new IControl(toggleLeftSidebarControl), 'top-left')
+  }
+})
+
+watch(basemap, () => {
+  if (map.value != null && basemap.value != null) {
+    MapService.updateStyle(map.value, basemap.value)
+  }
+})
+
+watch(
+  () => myMapStore.mapSearch?.bbox,
+  (newValue) => {
+    if (map.value != null && newValue != null && newValue != null) {
+      map.value.fitBounds(newValue, { padding: 75 })
+    }
+  }
+)
+</script>
+
+<style lang="scss">
+.MyMap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  #map.MyMap__map {
+    width: 100%;
+    height: 100%;
+
+    .maplibregl-ctrl-top-right {
+      align-items: flex-end;
+    }
+  }
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapHeader.vue b/vue/src/views/map/components/MyMapHeader.vue
new file mode 100644
index 00000000..49003e9e
--- /dev/null
+++ b/vue/src/views/map/components/MyMapHeader.vue
@@ -0,0 +1,89 @@
+<template>
+  <nav class="MyMapHeader">
+    <div class="MyMapHeader__block MyMapHeader__block--left">
+      <v-btn
+        variant="elevated"
+        elevation="1"
+        density="comfortable"
+        icon="mdi-arrow-left"
+        class="main-blue"
+        :to="{ name: 'home' }"
+      >
+        <v-icon icon="mdi-arrow-left" color="main-blue" />
+      </v-btn>
+      <img src="@/assets/images/Logo.png" class="MyMapHeader__logo" />
+    </div>
+    <Geocoding
+      :search-type="NominatimSearchType.FREE"
+      v-model="myMapStore.mapSearch"
+      :placeholder="$t('myMap.header.search.placeholder')"
+      :geometry-details="true"
+      class="MyMapHeader__search"
+      :icon="'mdi-magnify'"
+      density="comfortable"
+    />
+
+    <div class="MyMapHeader__block MyMapHeader__block--left">
+      <v-btn
+        class="MyMapHeader__shareBtn"
+        prepend-icon="mdi-share-variant"
+        variant="elevated"
+        elevation="1"
+        >{{ $t('myMap.header.share') }}</v-btn
+      >
+      <LoginButton />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import Geocoding from '@/components/forms/Geocoding.vue'
+import { NominatimSearchType } from '@/models/enums/geo/NominatimSearchType'
+import { useMyMapStore } from '@/stores/myMapStore'
+import LoginButton from '@/views/_layout/header/LoginButton.vue'
+
+const myMapStore = useMyMapStore()
+</script>
+
+<style lang="scss">
+.MyMapHeader {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.5rem 1.5rem;
+  border-bottom: solid 1px rgb(var(--v-theme-main-grey));
+
+  .MyMapHeader__block {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .MyMapHeader__logo {
+    $dim-logo: 3.5rem;
+
+    width: $dim-logo;
+    height: $dim-logo;
+    min-width: $dim-logo;
+    max-width: $dim-logo;
+    padding: 0.125rem;
+    border-radius: $dim-radius;
+    border: solid 1px rgb(var(--v-theme-main-grey));
+  }
+  .MyMapHeader__search {
+    flex: 1 1 auto;
+
+    ::placeholder {
+      opacity: 1;
+    }
+  }
+
+  .MyMapHeader__shareBtn {
+    color: rgb(var(--v-theme-main-blue));
+    .v-icon {
+      color: rgb(var(--v-theme-main-blue));
+    }
+  }
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapLayerOpacityPicker.vue b/vue/src/views/map/components/MyMapLayerOpacityPicker.vue
new file mode 100644
index 00000000..699866c4
--- /dev/null
+++ b/vue/src/views/map/components/MyMapLayerOpacityPicker.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="MyMapLayerOpacityPicker">
+    <div class="MyMapLayerOpacityPicker__desc">
+      <span class="MyMapLayerOpacityPicker__label">{{ $t('myMap.components.opacity') }}</span>
+      <span class="MyMapLayerOpacityPicker__value">{{ opacity }}%</span>
+    </div>
+    <v-slider
+      v-model="opacity"
+      :min="0"
+      :max="100"
+      :step="1"
+      :thumb-size="16"
+      :tick-size="2"
+      :track-size="3"
+      color="main-blue"
+      thumb-color="#fff"
+      density="compact"
+      hide-details="auto"
+    ></v-slider>
+  </div>
+</template>
+
+<script setup lang="ts">
+const opacity = defineModel({
+  default: 100
+})
+</script>
+
+<style lang="scss">
+.MyMapLayerOpacityPicker {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+  padding: 1rem;
+  .MyMapLayerOpacityPicker__desc {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    .MyMapLayerOpacityPicker__value {
+      font-weight: 600;
+      color: rgb(var(--v-theme-main-blue));
+    }
+  }
+  .v-slider.v-input--horizontal {
+    margin-inline: 5px;
+  }
+  .v-slider-track__fill {
+    height: 4px !important;
+  }
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapLayerPicker.vue b/vue/src/views/map/components/MyMapLayerPicker.vue
new file mode 100644
index 00000000..b673033b
--- /dev/null
+++ b/vue/src/views/map/components/MyMapLayerPicker.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="MyMapLayerPicker" v-if="mainLayer">
+    <div class="MyMapLayerPicker__parentBlock">
+      <v-checkbox
+        color="main-blue"
+        :indeterminate="isIndeterminate"
+        hide-details="auto"
+        density="compact"
+        v-model="mainLayer.isShown"
+        class="text-body-2"
+      >
+        <template v-slot:label>
+          <div class="MyMapLayerPicker__descCtn">
+            <img :src="mainLayer.icon" :alt="mainLayer.name" />
+            <span>{{ mainLayer.name }}</span>
+          </div>
+        </template>
+      </v-checkbox>
+      <div class="MyMapLayerPicker__actions">
+        <v-btn
+          v-if="subLayers"
+          variant="text"
+          density="comfortable"
+          icon="mdi-layers"
+          :color="isExpanded ? 'main-blue' : 'dark-grey'"
+          @click="isExpanded = !isExpanded"
+        />
+        <v-menu
+          location="bottom"
+          @update:modelValue="isLayerOpacityShown = mainLayer?.opacity && mainLayer?.opacity < 100"
+        >
+          <template v-slot:activator="{ props, isActive }">
+            <v-btn
+              v-bind="props"
+              variant="text"
+              density="comfortable"
+              icon="mdi-dots-horizontal"
+              :color="isActive ? 'main-blue' : 'dark-grey'"
+            />
+          </template>
+          <v-list class="MyMapLayerPicker__additionnalMenu mt-4">
+            <v-list-item>
+              <template v-slot:prepend>
+                <v-icon color="main-blue" icon="mdi-information-outline"></v-icon>
+              </template>
+              <v-list-item-title>{{ $t('myMap.rightSidebar.actions.about') }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item>
+              <template v-slot:prepend
+                ><v-icon color="main-blue" icon="mdi-share-variant-outline"></v-icon
+              ></template>
+              <v-list-item-title>{{ $t('myMap.rightSidebar.actions.share') }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="downloadSourceData">
+              <template v-slot:prepend>
+                <v-icon color="main-blue" icon="mdi-download-outline"></v-icon>
+              </template>
+              <v-list-item-title>{{
+                $t('myMap.rightSidebar.actions.downloadLayer')
+              }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click.stop="isLayerOpacityShown = !isLayerOpacityShown">
+              <template v-slot:prepend>
+                <v-icon color="main-blue" icon="mdi-opacity"></v-icon>
+              </template>
+              <v-list-item-title>{{ $t('myMap.rightSidebar.actions.opacity') }}</v-list-item-title>
+            </v-list-item>
+            <MyMapLayerOpacityPicker
+              v-if="isLayerOpacityShown"
+              v-model="mainLayer.opacity"
+              @click.prevent.stop
+            />
+          </v-list>
+        </v-menu>
+      </div>
+    </div>
+    <div class="MyMapLayerPicker__listBlock" :is-shown="isExpanded" v-if="subLayers">
+      <div class="MyMapLayerPicker__listBlockWrapper">
+        <v-checkbox
+          v-for="(subLayer, key) in subLayers"
+          :label="subLayer.name"
+          v-model="subLayer.isShown"
+          @update:model-value="changeSubLayer"
+          color="main-blue"
+          hide-details="auto"
+          density="compact"
+          class="text-body-2"
+          :key="key"
+        ></v-checkbox>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Layer from '@/models/interfaces/map/Layer'
+import { debounce, downloadJson } from '@/services/utils/UtilsService'
+import { useMyMapStore } from '@/stores/myMapStore'
+import { computed, ref, watch, type ModelRef } from 'vue'
+import MyMapLayerOpacityPicker from '@/views/map/components/MyMapLayerOpacityPicker.vue'
+const isExpanded = ref(false)
+const isLayerOpacityShown = ref(false)
+const mainLayer: ModelRef<Layer | undefined> = defineModel('mainLayer')
+const subLayers: ModelRef<Layer[] | undefined> = defineModel('subLayers')
+const myMapStore = useMyMapStore()
+const emits = defineEmits(['update'])
+const isIndeterminate = computed(() => {
+  if (subLayers.value == undefined) return false
+  return disabledLayers.value.length !== 0 && disabledLayers.value.length !== subLayers.value.length
+})
+
+const disabledLayers = computed(() => {
+  return subLayers.value?.filter((subLayer: Layer) => subLayer.isShown === false) ?? []
+})
+
+watch(
+  () => mainLayer.value?.isShown,
+  (newValue) => {
+    editAllSubLayers(newValue)
+  }
+)
+
+watch(
+  () => mainLayer.value?.opacity,
+  (newValue) => {
+    if (!mainLayer.value || !newValue) return
+    changeLayerOpacity(mainLayer.value, newValue)
+  }
+)
+
+const changeLayerOpacity = debounce(async (layer: Layer, opacityPercentage: number) => {
+  if (mainLayer.value) {
+    const opacity = opacityPercentage / 100
+    myMapStore.myMap?.setPaintProperty(layer.id.toString(), 'icon-opacity', opacity)
+  }
+}, 100)
+
+const changeSubLayer = () => {
+  if (mainLayer.value) {
+    if (disabledLayers.value.length === 0) {
+      mainLayer.value.isShown = true
+    } else if (disabledLayers.value.length === subLayers.value?.length) {
+      mainLayer.value.isShown = false
+    }
+  }
+  emits('update')
+}
+
+const editAllSubLayers = (show = true) => {
+  if (subLayers.value === undefined) return
+  subLayers.value.forEach((subLayer, key) => {
+    if (subLayers.value) {
+      subLayers.value[key].isShown = show
+    }
+  })
+  emits('update')
+}
+
+const downloadSourceData = async () => {
+  const layerId = mainLayer.value?.id.toString()
+  if (myMapStore.myMap?.map && layerId) {
+    const data = await myMapStore.myMap?.getData(layerId)
+    if (data) {
+      downloadJson(data, layerId)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.MyMapLayerPicker {
+  display: flex;
+  flex-flow: column nowrap;
+  .MyMapLayerPicker__parentBlock {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+    border: solid 1px rgb(var(--v-theme-dark-grey));
+    border-radius: $dim-radius;
+    .v-label {
+      opacity: 1;
+    }
+    .MyMapLayerPicker__descCtn {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0 0.25rem;
+      flex: 1 0 auto;
+      img {
+        max-width: 2.25rem;
+      }
+      span {
+        color: rgb(var(--v-theme-main-blue));
+        font-weight: bold;
+        font-size: $font-size-sm;
+      }
+    }
+    .MyMapLayerPicker__actions {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      .MyMapLayerPicker__additionnalMenu {
+        margin-right: -0.375rem;
+      }
+    }
+  }
+
+  .MyMapLayerPicker__listBlock {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: all 0.15s ease-in;
+    border-radius: $dim-radius;
+    border: solid 1px transparent;
+    max-height: 11.5rem;
+
+    &[is-shown='true'] {
+      grid-template-rows: 1fr;
+      border: solid 1px rgb(var(--v-theme-main-grey));
+      .MyMapLayerPicker__listBlockWrapper {
+        padding: 0.5rem 0.75rem;
+      }
+    }
+
+    .MyMapLayerPicker__listBlockWrapper {
+      padding: 0 0.75rem;
+      display: flex;
+      border-color: transparent;
+      flex-flow: column nowrap;
+      transition: all 0.15s ease-in;
+      gap: 0.25rem;
+      overflow-y: auto;
+      .v-checkbox .v-selection-control {
+        --v-input-control-height: 18px;
+        gap: 0.25rem;
+      }
+
+      label {
+        font-size: $font-size-sm;
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapLayersSideBar.vue b/vue/src/views/map/components/MyMapLayersSideBar.vue
new file mode 100644
index 00000000..4f8775ff
--- /dev/null
+++ b/vue/src/views/map/components/MyMapLayersSideBar.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="MyMapLayersSideBar">
+    <MyMapPlatformLayers class="MyMapLayersSideBar__platformLayers" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MyMapPlatformLayers from '@/views/map/components/MyMapPlatformLayers.vue'
+</script>
+
+<style lang="scss">
+.MyMapLayersSideBar {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 0 auto;
+  width: 19rem;
+  background: #fff;
+  padding: 1rem;
+  gap: 1rem;
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapPlatformLayers.vue b/vue/src/views/map/components/MyMapPlatformLayers.vue
new file mode 100644
index 00000000..b8846598
--- /dev/null
+++ b/vue/src/views/map/components/MyMapPlatformLayers.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="MyMapPlatformLayers">
+    <MyMapLayerPicker
+      v-model:main-layer="myMapStore.projectLayer"
+      v-model:sub-layers="myMapStore.projectSubLayers"
+      @update="refreshLayer(ItemType.PROJECT)"
+    />
+    <MyMapLayerPicker
+      v-model:main-layer="myMapStore.actorLayer"
+      v-model:sub-layers="myMapStore.actorSubLayers"
+      @update="refreshLayer(ItemType.ACTOR)"
+    />
+    <MyMapLayerPicker
+      v-model:main-layer="myMapStore.resourceLayer"
+      v-model:sub-layers="myMapStore.resourceSubLayers"
+      @update="refreshLayer(ItemType.RESOURCE)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useThematicStore } from '@/stores/thematicStore'
+import { ItemType } from '@/models/enums/app/ItemType'
+import MyMapLayerPicker from '@/views/map/components/MyMapLayerPicker.vue'
+import projectLayerIcon from '@/assets/images/icons/map/project_icon.png'
+import resourceLayerIcon from '@/assets/images/icons/map/resource_icon.png'
+import actorLayerIcon from '@/assets/images/icons/map/actor_icon.png'
+import { computed, onMounted } from 'vue'
+import { i18n } from '@/plugins/i18n'
+import LayerService from '@/services/map/LayerService'
+import { useMyMapStore } from '@/stores/myMapStore'
+import MapService from '@/services/map/MapService'
+import { useResourceStore } from '@/stores/resourceStore'
+import { useProjectStore } from '@/stores/projectStore'
+import { useActorsStore } from '@/stores/actorsStore'
+import type Layer from '@/models/interfaces/map/Layer'
+import type { Thematic } from '@/models/interfaces/Thematic'
+import type { ThematicItem } from '@/models/interfaces/common/ThematicItem'
+
+const myMapStore = useMyMapStore()
+const actorStore = useActorsStore()
+const projectStore = useProjectStore()
+const resourceStore = useResourceStore()
+const thematicStore = useThematicStore()
+
+const myMap = computed(() => myMapStore.myMap)
+const map = computed(() => myMapStore.myMap?.map)
+
+onMounted(async () => {
+  await thematicStore.getAll()
+  initMainLayers()
+  initSubLayers()
+  Promise.all([
+    await resourceStore.getAll(),
+    await actorStore.getAll(),
+    await projectStore.getAll()
+  ]).then(async () => {
+    if (map.value == null) return
+    if (map.value.loaded()) {
+      await setPlatformDataLayers()
+    } else {
+      map.value.on('load', async () => {
+        await setPlatformDataLayers()
+      })
+    }
+  })
+})
+
+const initMainLayers = () => {
+  myMapStore.projectLayer = LayerService.initLayer({
+    id: ItemType.PROJECT,
+    name: i18n.t('myMap.rightSidebar.layers.itemType.' + ItemType.PROJECT),
+    icon: projectLayerIcon
+  })
+  myMapStore.actorLayer = LayerService.initLayer({
+    id: ItemType.ACTOR,
+    name: i18n.t('myMap.rightSidebar.layers.itemType.' + ItemType.ACTOR),
+    icon: actorLayerIcon
+  })
+  myMapStore.resourceLayer = LayerService.initLayer({
+    id: ItemType.RESOURCE,
+    name: i18n.t('myMap.rightSidebar.layers.itemType.' + ItemType.RESOURCE),
+    icon: resourceLayerIcon
+  })
+}
+
+const initSubLayers = () => {
+  myMapStore.projectSubLayers = LayerService.initSubLayer(thematicStore.thematics)
+  myMapStore.actorSubLayers = LayerService.initSubLayer(thematicStore.thematics)
+  myMapStore.resourceSubLayers = LayerService.initSubLayer(thematicStore.thematics)
+}
+
+const setPlatformDataLayers = async () => {
+  Object.values(ItemType).forEach((itemType) => {
+    setPlatformDataLayer(itemType)
+  })
+}
+
+const filteredProjects = computed(() => {
+  return filterByThematic(projectStore.projects, myMapStore.projectSubLayers)
+})
+const filteredActors = computed(() => {
+  return filterByThematic(actorStore.actors, myMapStore.actorSubLayers)
+})
+const filteredResources = computed(() => {
+  return filterByThematic(resourceStore.resources, myMapStore.resourceSubLayers)
+})
+
+const filterByThematic = (items: ThematicItem[], subLayers: Layer[]) => {
+  const activeThematics: Layer['id'][] = subLayers
+    .filter((layer: Layer) => layer.isShown)
+    .map((layer: Layer) => layer.id)
+  return items.filter((item) => {
+    const itemThematicIds = item.thematics.map((itemThematic: Thematic) => itemThematic.id)
+    return activeThematics.some(
+      (thematic) => typeof thematic !== 'string' && itemThematicIds.includes(thematic)
+    )
+  })
+}
+
+const getGeojsonPerItemType = (itemType: ItemType) => {
+  switch (itemType) {
+    case ItemType.ACTOR:
+      return MapService.getGeojson(filteredActors.value)
+    case ItemType.PROJECT:
+      return MapService.getGeojson(filteredProjects.value)
+    case ItemType.RESOURCE:
+      return MapService.getGeojson(filteredResources.value)
+  }
+}
+const refreshLayer = (itemType: ItemType) => {
+  if (myMap.value) {
+    myMap.value.setData(itemType, getGeojsonPerItemType(itemType))
+  }
+}
+
+const setPlatformDataLayer = async (itemType: ItemType) => {
+  if (myMap.value) {
+    const geojson = getGeojsonPerItemType(itemType)
+    const icon = new URL(`/src/assets/images/icons/map/${itemType}_icon.png`, import.meta.url).href
+    myMap.value.addSource(itemType, geojson)
+    await myMap.value.addImage(icon, itemType)
+    const layout: maplibregl.LayerSpecification['layout'] = {
+      'icon-image': itemType,
+      'icon-size': 0.4
+    }
+    myMap.value.addLayer(itemType, { layout })
+    myMap.value.listenToHoveredFeature(itemType)
+  }
+  return
+}
+</script>
+
+<style lang="scss">
+.MyMapPlatformLayers {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapWelcomeBlock.vue b/vue/src/views/map/components/MyMapWelcomeBlock.vue
new file mode 100644
index 00000000..06f8fa72
--- /dev/null
+++ b/vue/src/views/map/components/MyMapWelcomeBlock.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="MyMapWelcomeBlock" v-if="!userStore.userIsLogged && !isClosed">
+    <h2>{{ $t('myMap.leftSidebar.welcome.title') }}</h2>
+    <p>{{ $t('myMap.leftSidebar.welcome.description') }}</p>
+    <div class="MyMapWelcomeBlock__moreAccess">
+      <span>{{ $t('myMap.leftSidebar.welcome.moreAccess') }}</span>
+      <LoginButton />
+    </div>
+    <span class="MyMapWelcomeBlock__close" @click="isClosed = true">{{
+      $t('myMap.leftSidebar.welcome.close')
+    }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from '@/stores/userStore'
+import LoginButton from '@/views/_layout/header/LoginButton.vue'
+import { ref } from 'vue'
+
+const userStore = useUserStore()
+const isClosed = ref(false)
+</script>
+
+<style lang="scss">
+.MyMapWelcomeBlock {
+  background: rgb(var(--v-theme-light-yellow)) url(@/assets/images/Frise.svg) no-repeat top center;
+  background-size: 130% 1rem;
+  // background-attachment: local;
+  padding: var(--dialog-padding-top) var(--dialog-padding-x) 3rem var(--dialog-padding-x);
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+  padding: 2.5rem 1.5rem;
+  width: 100%;
+  align-items: center;
+  text-align: center;
+  min-width: 19rem !important;
+  align-self: flex-end;
+
+  h2 {
+    color: rgb(var(--v-theme-main-red));
+  }
+
+  .MyMapWelcomeBlock__moreAccess {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.75rem;
+    padding: 1rem 1rem;
+    border-radius: $dim-radius;
+    background: white;
+  }
+  .MyMapWelcomeBlock__close {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/vue/src/views/map/components/MyMapWelcomeSideBar.vue b/vue/src/views/map/components/MyMapWelcomeSideBar.vue
new file mode 100644
index 00000000..89a36687
--- /dev/null
+++ b/vue/src/views/map/components/MyMapWelcomeSideBar.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="MyMapWelcomeSideBar">
+    <MyMapWelcomeBlock />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MyMapWelcomeBlock from '@/views/map/components/MyMapWelcomeBlock.vue'
+</script>
+
+<style lang="scss">
+.MyMapWelcomeSideBar {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 21rem;
+  flex: 1 0 auto;
+  background: #fff;
+  padding: 1rem;
+}
+</style>
diff --git a/vue/src/views/projects/components/ProjectForm.vue b/vue/src/views/projects/components/ProjectForm.vue
index 209dbd98..27b9af8c 100644
--- a/vue/src/views/projects/components/ProjectForm.vue
+++ b/vue/src/views/projects/components/ProjectForm.vue
@@ -67,7 +67,7 @@
             density="compact"
             variant="outlined"
             chips
-            v-model="form.status.value.value as Status"
+            v-model="(form.status.value.value as Status)"
             :items="Object.values(Status)"
             :placeholder="$t('projects.form.fields.status.label')"
             :item-title="(item) => $t('projects.status.' + item)"
@@ -85,7 +85,7 @@
           <v-select
             density="compact"
             variant="outlined"
-            v-model="form.interventionZone.value.value as AdministrativeScope"
+            v-model="(form.interventionZone.value.value as AdministrativeScope)"
             :items="Object.values(AdministrativeScope)"
             :placeholder="$t('projects.form.fields.interventionZone.label')"
             :item-title="(item) => $t('projects.scope.' + item)"
@@ -98,7 +98,7 @@
           :search-type="NominatimSearchType.FREE"
           :osm-type="OsmType.NODE"
           @change="form.osmData.handleChange(form.osmData.value.value)"
-          v-model="form.osmData.value.value"
+          v-model="form.osmData.value.value as OsmData"
         />
 
         <FormSectionTitle :text="$t('projects.form.section.thematics')" />
@@ -262,6 +262,7 @@ import type { Organisation } from '@/models/interfaces/Organisation'
 import { AdministrativeScope } from '@/models/enums/AdministrativeScope'
 import NewSubmission from '@/views/admin/components/form/NewSubmission.vue'
 import { onInvalidSubmit } from '@/services/forms/FormService'
+import type { OsmData } from '@/models/interfaces/geo/OsmData'
 
 const projectStore = useProjectStore()
 const actorsStore = useActorsStore()
diff --git a/vue/src/views/projects/components/ProjectMap.vue b/vue/src/views/projects/components/ProjectMap.vue
index a7d3af27..48edbe59 100644
--- a/vue/src/views/projects/components/ProjectMap.vue
+++ b/vue/src/views/projects/components/ProjectMap.vue
@@ -19,6 +19,10 @@
       v-if="projectStore.projects != null"
     />
     <ShowProjectFiltersModalControl ref="show-project-filters-modal-control" />
+    <ToggleSidebarControl
+      v-model="projectStore.isProjectMapFullWidth"
+      ref="toggle-sidebar-control"
+    />
   </div>
 </template>
 
@@ -34,12 +38,14 @@ import ProjectFilterModal from '@/views/projects/components/ProjectFilterModal.v
 import { type ResolvedImageSpecification } from 'maplibre-gl'
 import ShowProjectFiltersModalControl from '@/views/projects/components/map-controls/ShowProjectFiltersModalControl.vue'
 import router from '@/router'
+import ToggleSidebarControl from '@/components/map/controls/ToggleSidebarControl.vue'
 
 type MapType = InstanceType<typeof Map>
 type ProjectCard = InstanceType<typeof ProjectCard>
 
 const projectStore = useProjectStore()
 const projectMap = useTemplateRef<MapType>('project-map')
+const toggleSidebarControl = useTemplateRef('toggle-sidebar-control')
 const activeProjectCard = useTemplateRef<ProjectCard>('active-project-card')
 const showProjectFiltersModalControl = useTemplateRef('show-project-filters-modal-control')
 const geojson = computed(() => MapService.getGeojson(projectStore.filteredProjects))
@@ -106,6 +112,7 @@ const showPopupOnInit = () => {
 onMounted(() => {
   if (map.value != null) {
     map.value.addControl(new IControl(showProjectFiltersModalControl), 'top-right')
+    map.value.addControl(new IControl(toggleSidebarControl), 'top-left')
     map.value.on('load', async () => {
       await setProjectLayer()
       showPopupOnInit()
diff --git a/vue/src/views/resources/components/ResourceForm.vue b/vue/src/views/resources/components/ResourceForm.vue
index 6d3b51bd..e1fd2002 100644
--- a/vue/src/views/resources/components/ResourceForm.vue
+++ b/vue/src/views/resources/components/ResourceForm.vue
@@ -98,9 +98,7 @@
             @blur="form.link.handleChange"
           />
         </div>
-        <v-divider v-if="!hideFileInput && form.format.value.value">{{
-          $t('resources.form.or')
-        }}</v-divider>
+        <v-divider v-if="!hideFileInput && form.format.value.value">{{ $t('forms.or') }}</v-divider>
         <div class="Form__fieldCtn" v-if="!hideFileInput && form.format.value.value">
           <label class="Form__label">{{ $t('resources.form.fields.file.label') }}</label>
           <FileInput