diff --git a/geopf-extensions-openlayers-1.0.0-beta.0-293.tgz b/geopf-extensions-openlayers-1.0.0-beta.0-293.tgz
new file mode 100644
index 0000000..20c2805
Binary files /dev/null and b/geopf-extensions-openlayers-1.0.0-beta.0-293.tgz differ
diff --git a/package.json b/package.json
index 199cf42..013df64 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,8 @@
     "@gouvminint/vue-dsfr": "^5.14.2",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^2.5.2",
     "geopf-extensions-openlayers": "./geopf-extensions-openlayers-1.0.0-beta.1-296.tgz",
+    "jspdf": "^2.5.2",
     "ol": "8.2.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
diff --git a/src/components.d.ts b/src/components.d.ts
index 9d23849..0709a6f 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -57,6 +57,7 @@ declare module 'vue' {
     MenuControl: typeof import('./components/menu/MenuControl.vue')['default']
     MenuLateralNavButton: typeof import('./components/menu/MenuLateralNavButton.vue')['default']
     MenuLateralWrapper: typeof import('./components/menu/MenuLateralWrapper.vue')['default']
+    MenuTierce: typeof import('./components/menu/MenuTierce.vue')['default']
     ModalConsent: typeof import('./components/modals/ModalConsent.vue')['default']
     ModalInformation: typeof import('./components/modals/ModalInformation.vue')['default']
     ModalTheme: typeof import('./components/modals/ModalTheme.vue')['default']
@@ -64,6 +65,7 @@ declare module 'vue' {
     OverviewMap: typeof import('./components/carte/control/OverviewMap.vue')['default']
     Patience: typeof import('./components/utils/Patience.vue')['default']
     Print: typeof import('./components/carte/control/Print.vue')['default']
+    PrintModal: typeof import('./components/carte/control/PrintModal.vue')['default']
     ReverseGeocode: typeof import('./components/carte/control/ReverseGeocode.vue')['default']
     RightMenuTool: typeof import('./components/menu/RightMenuTool.vue')['default']
     Route: typeof import('./components/carte/control/Route.vue')['default']
@@ -72,6 +74,7 @@ declare module 'vue' {
     ScaleLine: typeof import('./components/carte/control/ScaleLine.vue')['default']
     SearchEngine: typeof import('./components/carte/control/SearchEngine.vue')['default']
     Share: typeof import('./components/carte/control/Share.vue')['default']
+    ShareModal: typeof import('./components/carte/control/ShareModal.vue')['default']
     StoreData: typeof import('./components/StoreData.vue')['default']
     Territories: typeof import('./components/carte/control/Territories.vue')['default']
     VIcon: typeof import('oh-vue-icons')['OhVueIcon']
diff --git a/src/components/CartoAndTools.vue b/src/components/CartoAndTools.vue
index 8e84527..ae3890c 100644
--- a/src/components/CartoAndTools.vue
+++ b/src/components/CartoAndTools.vue
@@ -2,16 +2,29 @@
 import Carto from '@/components/carte/Carto.vue'
 import LeftMenuTool from '@/components/menu/LeftMenuTool.vue'
 import RightMenuTool from '@/components/menu/RightMenuTool.vue'
-import MenuCatalogue from '@/components/menu/catalogue/MenuCatalogue.vue'
-import MenuControl from '@/components/menu/MenuControl.vue';
+import ModalTheme from '@/components/modals/ModalTheme.vue'
+import ShareModal from '@/components/carte/control/ShareModal.vue'
+import PrintModal from "@/components/carte/control/PrintModal.vue";
 
-import { useControls } from '@/composables/controls'
 import { useDataStore } from "@/stores/dataStore"
 import { useMapStore } from "@/stores/mapStore"
 
 
 const mapStore = useMapStore();
 const dataStore = useDataStore();
+ 
+const refModalTheme = ref(null)
+const modalShareRef = ref(null)
+const refPrintModal = ref(null)
+const onModalShareOpen = () => {
+  modalShareRef.value.onModalShareOpen()
+}
+const onModalThemeOpen = () => {
+  refModalTheme.value.openModalTheme()
+}
+const onModalPrintOpen = () => {
+  refPrintModal.value.onModalPrintOpen()
+}
 
 // INFO
 // Les listes sont initialisées via le mapStore, et 
@@ -45,44 +58,40 @@ const selectedControls = computed(() => {
   return controls;
 });
 
-provide("selectedLayers", selectedLayers);
+const cartoRef = ref(null)
 
+provide("selectedLayers", selectedLayers);
 </script>
 
 <template>
   <div id="map-and-tools-container">
 
     <!-- Le catalogue est dans le menu gauche -->
-    <LeftMenuTool>
-      <!-- 
-        On transmet la liste complète des couches du catalogue
-        ainsi que la liste des couches sélectionnées
-      -->
-      <MenuCatalogue
-        :selected-layers="selectedLayers"
-        :layers="dataStore.getLayers()"/>
-    </LeftMenuTool>
+    <LeftMenuTool
+      @on-modal-share-open="onModalShareOpen"
+      @on-modal-print-open="onModalPrintOpen"
+      @on-modal-theme-open="onModalThemeOpen"
+    />
 
     <!-- Module cartographique : 
      - liste des couches selectionnées
      - liste des controles selectionnés
     -->
     <Carto
+      ref="cartoRef"
       :selected-layers="selectedLayers"
       :selected-controls="selectedControls"/>
 
     <!-- Le menu des contrôles est dans le menu droite -->
-    <RightMenuTool>
-      <!-- On transmet la liste des contrôles selectionnés : 
-        >>> les controles du mapStore sont reactifs, donc dès que le 
-        >>> composant MenuControl modifie une valeur, il modifie le 
-        >>> mapStore des controles, ce qui repercute la selection sur 
-        >>> la méthode computed()
-      -->
-      <MenuControl 
-        :selected-controls="selectedControls"/>
-    </RightMenuTool>
-
+    <RightMenuTool
+      :selected-layers="selectedLayers"
+      :selected-controls="selectedControls"
+    />
+    <div class="modal-container">
+  <ModalTheme ref="refModalTheme" />
+  <PrintModal ref="refPrintModal" />
+  <ShareModal ref="modalShareRef"/>
+</div>
   </div>
 </template>
 
diff --git a/src/components/carte/Controls.vue b/src/components/carte/Controls.vue
index 5fb2f29..2ffcb7e 100644
--- a/src/components/carte/Controls.vue
+++ b/src/components/carte/Controls.vue
@@ -11,6 +11,8 @@
 </script>
 
 <script setup lang="js">
+import IconGeolocationSVG from "../../assets/geolocation.svg";
+
 import SearchEngine from './control/SearchEngine.vue';
 import ScaleLine from './control/ScaleLine.vue';
 import OverviewMap from './control/OverviewMap.vue';
@@ -34,10 +36,9 @@ import Print from './control/Print.vue'
 import Share from './control/Share.vue';
 
 // Icone pour le marker du widget SearcEngine
-import IconGeolocationSVG from "../../assets/geolocation.svg";
 
 import { useDataStore } from '@/stores/dataStore';
-import { useControls } from '@/composables/controls';
+import { useControls, useControlsExtensionPosition } from '@/composables/controls';
 import { useLogger } from 'vue-logger-plugin';
 
 const props = defineProps({
@@ -68,8 +69,12 @@ log.debug(props.controlOptions);
 
 // liste des options pour les contrôles;
 
-const shareOptions = {};
-const printOptions = {};
+const shareOptions = {
+  position: useControlsExtensionPosition().shareOptions
+};
+const printOptions = {
+  position: useControlsExtensionPosition().printOptions
+};
 
 const searchEngineOptions = {
   id: "1",
@@ -95,7 +100,7 @@ const searchEngineOptions = {
 const layerSwitcherOptions = {
   options: {
     id: "2",
-    position : "top-right",
+    position : useControlsExtensionPosition().layerSwitcherOptions,
     collapsed: true,
     panel: true,
     counter: true
@@ -104,7 +109,7 @@ const layerSwitcherOptions = {
 
 const legendsOptions = {
   id: "3",
-  position: "top-right",
+  position: useControlsExtensionPosition().legendsOptions,
   panel: true,
   auto: true,
   draggable: false
@@ -118,7 +123,7 @@ const scaleLineOptions = {
 
 const territoriesOptions = {
   id: "5",
-  position: 'bottom-left',
+  position: useControlsExtensionPosition().territoriesOptions,
   panel : true,
   title : "Sélectionner un territoire",
   auto : false, // chargement auto des territoires par defaut
@@ -130,28 +135,27 @@ const territoriesOptions = {
 // actif par défaut
 const getFeatureInfoOptions = {
   id: "6",
-  position: 'bottom-left',
-  collapsed: false
+  position: useControlsExtensionPosition().getFeatureInfoOptions
 };
 
 const overviewMapOptions = {
   id: "7",
-  position: 'bottom-left'
+  position: useControlsExtensionPosition().overviewMapOptions
 };
 
 const fullscreenOptions = {
   id: "8",
-  position: 'bottom-right'
+  position: useControlsExtensionPosition().fullscreenOptions
 };
 
 const zoomOptions = {
+  position: useControlsExtensionPosition().zoomOptions,
   id: "9",
-  position: 'bottom-right',
 };
 
 const controlListOptions = {
+  position: useControlsExtensionPosition().controlListOptions,
   id: "10",
-  position: 'top-right',
   gutter: false,
   controlCatalogElement: document.getElementById('MenuControl'),
 }
@@ -165,49 +169,49 @@ const drawingOptions = {
 
 const reverseGeocodeOptions = {
   id: "12",
-  position: 'top-right',
+  position: useControlsExtensionPosition().reverseGeocodeOptions,
   gutter: false,
   listable: true,
 };
 
 const isocurveOptions = {
+  position: useControlsExtensionPosition().isocurveOptions,
   id: "13",
-  position: 'top-right',
   gutter: false,
   listable: true,
 };
 
 const routeOptions = {
+  position: useControlsExtensionPosition().routeOptions,
   id: "14",
-  position: 'top-right',
   gutter: false,
   listable: true,
 };
 
 const measureLengthOptions = {
   id: "15",
-  position: 'top-right',
+  position: useControlsExtensionPosition().measureLengthOptions,
   gutter: false,
   listable: true,
 };
 
 const measureAreaOptions = {
+  position: useControlsExtensionPosition().measureAreaOptions,
   id: "16",
-  position: 'top-right',
   gutter: false,
   listable: true,
 };
 
 const measureAzimuthOptions = {
-  id: "17",
-  position: 'top-right',
+  position: useControlsExtensionPosition().measureAzimuthOptions,
   gutter: false,
   listable: true,
+  id: "17",
 };
 
 const mousePositionOptions = {
+  position: useControlsExtensionPosition().mousePositionOptions,
   id: "18",
-  position: 'top-right',
   gutter: false,
   listable: true,
   // On ajoute les systemes UTM pour les territoires
@@ -351,14 +355,14 @@ const mousePositionOptions = {
 
 const elevationPathOptions = {
   id: "19",
-  position: 'top-right',
+  position: useControlsExtensionPosition().elevationPathOptions,
   gutter: false,
   listable: true,
 };
 
 const layerImportOptions = {
   id: "20",
-  position: 'top-right',
+  position: useControlsExtensionPosition().layerImportOptions,
   gutter: false,
   listable: true,
 };
@@ -369,17 +373,17 @@ const layerImportOptions = {
 >>> sinon, visibility:false
 -->
 <template>
-  <Share
+  <!-- <Share
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Share.id)"
-    :share-options="shareOptions"
-  />
-  <Print
+    :share-options="useControlsExtensionPosition()().shareOptions"
+  /> -->
+  <!-- <Print
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Print.id)"
     :print-options="printOptions"
     :map-id="mapId"
-  />
+  /> -->
   <LayerSwitcher
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.LayerSwitcher.id)"
@@ -703,7 +707,7 @@ const layerImportOptions = {
 
   .position-container-top-right,
   .position-container-top-left {
-    top: 98px;
+    top: 99px;
   }
 }
 @media (max-width: 576px) {
@@ -737,16 +741,6 @@ const layerImportOptions = {
   .ol-scale-line {
     transform: translateX(-50px);
   }
-
-  #print-button-position {
-    display: none;
-  }
-}
-
-@media (max-height: 576px) {
-  #print-button-position {
-    display: none;
-  }
 }
 
 @media (max-width: 627px) and (min-width: 576px){
diff --git a/src/components/carte/Map.vue b/src/components/carte/Map.vue
index e306e97..ba649ff 100644
--- a/src/components/carte/Map.vue
+++ b/src/components/carte/Map.vue
@@ -14,6 +14,8 @@ import { CRS } from 'geopf-extensions-openlayers'
 
 import Map from 'ol/Map'
 import { useMapStore } from "@/stores/mapStore"
+import { mainMap } from "@/composables/keys"
+
 const mapStore = useMapStore()
 
 const props = defineProps({
@@ -46,6 +48,8 @@ onMounted(() => {
   if (canvas.length) {
     canvas[0].tabIndex = 0
   }
+  if (props.mapId == mainMap)
+    mapStore.setMap(map)
 })
 
 /**
diff --git a/src/components/carte/control/LayerImport.vue b/src/components/carte/control/LayerImport.vue
index 0324908..35fbd31 100644
--- a/src/components/carte/control/LayerImport.vue
+++ b/src/components/carte/control/LayerImport.vue
@@ -51,4 +51,11 @@ onUpdated(() => {
   <!-- TODO ajouter l'emprise du widget pour la gestion des collisions -->
 </template>
 
-<style scoped></style>
+<style>
+button[id^=GPshowImportPicto-] {
+  display: none;
+}
+dialog[id^=GPcontrolListPanel-] button[id^=GPshowImportPicto-]{
+  display: block;
+}
+</style>
diff --git a/src/components/carte/control/Print.vue b/src/components/carte/control/Print.vue
index 2914403..e4699f2 100644
--- a/src/components/carte/control/Print.vue
+++ b/src/components/carte/control/Print.vue
@@ -10,269 +10,18 @@ export default {};
 </script>
 
 <script lang="js" setup>
-import { useElementSize } from '@vueuse/core'
-import { useMapStore }  from '@/stores/mapStore';
-import { useEulerian } from '@/plugins/Eulerian.js';
-import Map from '../Map.vue';
-import View from '../View.vue';
-import { printMap } from '@/composables/keys';
-import { jsPDF } from "jspdf";
-
-const eulerian = useEulerian();
-const mapStore = useMapStore();
+import PrintModal from './PrintModal.vue';
 const props = defineProps({
   mapId: String,
   visibility: Boolean,
   printOptions: Object
 });
-const selectedLayers = inject('selectedLayers');
 
-/**
- * Paramètres du composant de la modale
- */
-const title = "Imprimer une carte";
-const size = "xl";
-
-/**
- * Conf formulaire orientation du papier
- * Menu déroulant
- */
- const pageOrientationOptions = [
-  {
-    "label": "Portrait",
-    "value": "portrait",
-    "icon": "md-cropportrait-sharp"
-  },
-  {
-    "label": "Paysage",
-    "value": "landscape",
-    "icon": "md-croplandscape-sharp"
-  }
-];
-
-/**
- * Gestion ouverture et fermeture de la Modal d'impression
- */
-const printModalOpened = ref(false);
-const onModalPrintOpen = () => {
-  printModalOpened.value = true;
-  eulerian.pause();
-};
-const onModalPrintClose = () => {
-  printModalOpened.value = false;
-  eulerian.resume();
-};
-
-/**
- * Ref sur les elements du DOM
- */
-const refMap = ref(null);
-const mapTitle = ref(null);
+const printModal = ref(null)
 const modal = ref(null)
-const printPage = ref(null)
-const printForm = ref(null)
-const printPreview = ref(null)
-
-
-const formMarginRight = "10px"
-const coeffPX2MM = 0.264583333
-
-/**
- *  Paramètres de la carte à imprimer
- *  {Boolean} hasScale - ajoute une échelle ou pas à la carte
- *  {Boolean} hasTitle - ajoute un titre ou pas à la carte
- *  {String} printTitle - Titre de la carte
- *  {String} pageOrientation - Orientation du papier
- *  {Number} margin - marge en mm 
- *  {String} paperFormat - Format standard de papier
- *  {Object} dimension - Dimension du papier selon format choisi
- */
-const hasScale = ref(true)
-const hasTitle = ref(false)
-const printTitle = ref("Ma carte")
-const pageOrientation = ref("portrait");
-const margin = ref(0)
-const paperFormat = ref("A4")
-const dimension = computed(() => {
-  let dimension = { 
-    'A0': { width : 841, height: 1189 },
-    'A1' : { width : 594, height: 841 },
-    'A2' : { width : 420, height: 594 },
-    'A3' : { width : 297, height: 420 },
-    'A4' : { width : 210, height: 297 },
-    'A5' : { width : 148, height: 210 },
-    'B4' : { width : 250, height: 353 },
-    'B5' : { width : 176, height: 250 }
-  }
-  return {
-    width : dimension[paperFormat.value].width,
-    height : dimension[paperFormat.value].height
-  }
-})
 
-/**
- * Taille de la page print (DOM)
- * (Formulaire et prévisualisation)
- */
-const printPageSize = reactive(
-  useElementSize(
-    printPage,
-    { width: 0, height: 0 },
-    { box: 'border-box' },
-  ),
-)
-/**
- * Taille du formualaire (DOM)
- */
-const printFormSize = reactive(
-  useElementSize(
-    printForm,
-    { width: 0, height: 0 },
-    { box: 'border-box' },
-  ),
-)
-
-/**
- * Taille du titre de la carte 
- * sur la prévisualisation (DOM)
- */
-const titleSize = reactive(
-  useElementSize(
-    mapTitle,
-    { width: 0, height: 0 },
-    { box: 'border-box' },
-  ),
-)
-
-/**
- * Rapport de conversion mm vers pixel selon l'espace disponible
- */
-const coeff = computed(() => {
-  if (pageOrientation.value == "portrait")
-    return Math.floor((printPageSize.height - titleSize.height) * coeffPX2MM) / dimension.value.height;
-  if (pageOrientation.value == "landscape") {
-    let coeff = Math.floor((printPageSize.width - printFormSize.width - parseInt(formMarginRight)) * coeffPX2MM) / dimension.value.height;
-    // cas ou la hauteur disponible n'est pas suffisante 
-    if (dimension.value.height * coeff + titleSize.height < printPageSize.height) {
-      return Math.floor((printPageSize.height - titleSize.height) * coeffPX2MM) / dimension.value.width; 
-    }
-    else {
-      return coeff
-    } 
-  }
-})
-
-/**
- * Hauteur et largeur en mm
- * du format papier
- */
-const mapHeight = computed(() => {
-  if (pageOrientation.value == "portrait")
-    return dimension.value.height + "mm";
-    // return dimension.value.height - titleSize.height * coeffPX2MM + "mm";
-  if (pageOrientation.value == "landscape")
-    return dimension.value.width + "mm";
-    // return dimension.value.width  - titleSize.height * coeffPX2MM + "mm";
-})
-const mapWidth = computed(() => {
-  if (pageOrientation.value == "portrait")
-    return dimension.value.width + "mm";
-  if (pageOrientation.value == "landscape")
-    return dimension.value.height + "mm";
-})
-
-/**
- * Hauteur et largeur en pixel
- * de la prévisualisation de la carte à imprimer
- */ 
-// TODO PROBLEME AVEC LA HAUTEUR COMPORTEMENT AVEC LE TITRE
-const previewHeight = computed(() => {
-  //   return printPageSize.height - titleSize.height + "px";
-    return printPageSize.height + "px";
-})
-const previewWidth = computed(() => {
-  if (pageOrientation.value == "portrait")
-    return (dimension.value.width * coeff.value ) / coeffPX2MM + "px";
-  if (pageOrientation.value == "landscape")
-    return ((dimension.value.height * coeff.value ) / coeffPX2MM) + "px";
-})
-
-
-/**
- * Fonction d'export de la carte
- */
-const exportPDF = () => {
-  const opts = {
-    orientation : pageOrientation.value,
-    unit : "mm",
-    format : [parseInt(mapHeight.value), parseInt(mapWidth.value)],
-  } 
-  const doc = new jsPDF(opts)
-  const marge = parseInt(margin.value)
-  const canvasWidth = refMap.value.mapRef.getElementsByTagName('canvas')[0].width
-  const canvasHeight = refMap.value.mapRef.getElementsByTagName('canvas')[0].height
-  const canvas = refMap.value.mapRef.getElementsByTagName('canvas')[0]
-
-
-  // Fake canvas
-  if (refMap.value.mapRef.getElementsByTagName('canvas').length < 2) {
-  var fakeCanvas = document.createElement('canvas')
-  fakeCanvas.classList = ['fixedoverlay']
-  fakeCanvas.width = canvasWidth
-  fakeCanvas.height = canvasHeight
-  refMap.value.mapRef.getElementsByClassName("ol-overlaycontainer")[0].insertAdjacentElement('beforebegin', fakeCanvas)
-  }
-  else {
-    var fakeCanvas = refMap.value.mapRef.getElementsByTagName('canvas')[1]
-  }
-  fakeCanvas.style.display = "none"
-  const ctx = fakeCanvas.getContext("2d");
-  ctx.reset()
-  const img = canvas.toDataURL('image/png')
-  const imgWidth = (canvasWidth * coeffPX2MM) - (marge * 2)
-  const imgHeight = ((canvasHeight - titleSize.height) * coeffPX2MM) - (marge * 2)
-  const imgPosX = marge
-  const imgPosY = (titleSize.height * coeffPX2MM) + marge
-  doc.addImage(img, 'PNG', imgPosX, imgPosY, imgWidth, imgHeight)
-  if (hasScale.value) {
-    const scaleLine = refMap.value.mapRef.getElementsByClassName("ol-scale-line")[0]  
-    const scaleLineInner = scaleLine.children[0]  
-    const style = getComputedStyle(scaleLine)
-    const styleInner = getComputedStyle(scaleLineInner)
-    const scaleLeft = parseInt(style.left)
-    const scaleBottom = parseInt(style.bottom)
-    const scaleContent = scaleLineInner.innerHTML;
-    const scaleWidth = parseInt(styleInner.width) 
-    const scaleHeight = parseInt(styleInner.lineHeight)
-    const y1 =canvasHeight - scaleBottom - scaleHeight
-    const ctx = fakeCanvas.getContext("2d");
-    
-    // rect
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255, 255, 255, 0.75)"
-    ctx.rect(scaleLeft, y1, scaleWidth, scaleHeight)
-    ctx.fillRect(scaleLeft,y1,scaleWidth,scaleHeight)
-    // Text
-    ctx.font = styleInner.font
-    ctx.textAlign="center"; 
-    ctx.fillStyle = "#000000";
-    ctx.fillText(scaleContent, scaleLeft+(scaleWidth/2),y1+(scaleHeight/2));
-    // Line
-    ctx.beginPath();
-    ctx.moveTo(scaleLeft, y1)
-    ctx.lineTo(scaleLeft, y1 + scaleHeight);
-    ctx.lineTo(scaleLeft, y1 + scaleHeight);
-    ctx.lineTo(scaleLeft + scaleWidth, y1 + scaleHeight);
-    ctx.lineTo(scaleLeft + scaleWidth, y1);
-    ctx.lineWidth = 1;
-    ctx.lineCap = "round";
-    ctx.strokeStyle = "#666666"
-    ctx.stroke();
-    const imgOverlay = fakeCanvas.toDataURL('image/png')
-    doc.addImage(imgOverlay, 'PNG', imgPosX, imgPosY, imgWidth, imgHeight)
-
-  }
-  doc.save('carte.pdf')
+function onModalPrintOpen() {
+  printModal.value.onModalPrintOpen()
 }
 
 onUpdated(() => {
@@ -283,13 +32,6 @@ onUpdated(() => {
       modalDOM.classList.remove("fr-container-md", "fr-container");
     }
 });
-
-
-const scaleLineOptions = {
-  id: "4",
-  units: 'metric',
-  bar: false,
-};
 </script>
 
 <template>
@@ -304,94 +46,8 @@ const scaleLineOptions = {
       no-outline
       @click="onModalPrintOpen"
     />
-    <DsfrModal
-      :opened="printModalOpened"
-      :title="title"
-      :size="size"
-      @close="onModalPrintClose">
-      <!-- slot : c'est ici que l'on customise le contenu ! -->
-    <div ref="printPage" class="print-page">
-      <!-- Formulaire d'impression -->
-        <div ref="printForm" class="print-form">
-            <DsfrSegmentedSet
-              :inline="false"
-              v-model="pageOrientation"
-              :options="pageOrientationOptions"
-              :small="false"
-              legend="Mise en Page"
-              class="mb-20"
-            >
-              <template #legend>Mise en Page</template>
-            </DsfrSegmentedSet>
-            <DsfrSelect
-              v-model="paperFormat"
-              label="Dimensions"
-              :options="[ 'A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'B4', 'B5']"
-            />
- <!--           <DsfrSelect
-              v-model="margin"
-              label="Marge"
-              :options="[
-                { value : 0, text : 'Pas de marge - 0mm' },
-                { value : 5, text : 'Petite marge - 5mm' },
-                { value : 10, text : 'Grosse marge - 10mm' }
-              ]"
-            />
-            <DsfrInput
-                v-model="printTitle"
-                :disabled="!hasTitle"
-                label="Titre de la carte"
-                label-visible
-                name="titre"
-                class="mb-10"
-            />
-            <div class="mt-10"><DsfrCheckbox
-              v-model="hasTitle"
-              name="checkbox-simple"
-              :label="!hasTitle ? 'Activer le titre' : 'Désactiver le titre'"
-            /></div>-->
-            <div class="mt-10">
-              <DsfrCheckbox
-              v-model="hasScale"
-              name="checkbox-simple"
-              :label="!hasScale ? 'Afficher l\'échelle' : 'Désactiver l\'échelle'"
-            /></div>
-            <DsfrButton
-              id="print-page-export"
-              label="Export PDF"
-              title="Export PDF"
-              icon=""
-              no-outline
-              @click="exportPDF"
-            />
-         </div>
-        <!-- Dom de la prévisualisation de l'impression -->
-        <div  class="print-preview-container">
-          <div ref="printPreview" class="print-preview">
-            <div id="map-title" ref="mapTitle" class="map-title" v-if="hasTitle">{{ printTitle }}</div>
-            <Map
-              v-if="printModalOpened" 
-              class="map" 
-              ref="refMap"
-              :map-Id="printMap"
-            >
-                <View
-                  :map-Id="printMap"
-                  :center="mapStore.center"
-                  :zoom="mapStore.zoom"/>
-                <Layers
-                  :map-Id="printMap"
-                  :selected-layers="selectedLayers"/>
-                  <ScaleLine
-                  :visibility="hasScale"
-                  :scale-line-options="scaleLineOptions"
-                  :map-id="printMap"
-                />
-            </Map>
-        </div>
-        </div>    
-    </div>
-    </DsfrModal>
+    <printModal ref="printModal"
+      :print-options="printOptions"/>
   </div>
 </template>
 <style>
@@ -408,7 +64,7 @@ canvas.fixedoverlay {
   #print-button-position {
     position: absolute;
     right: 16px;
-    top: 56px;
+    top: 100px;
     z-index: 1000;
     background-color: var(--background-default-grey);
     overflow: visible;
@@ -457,65 +113,4 @@ canvas.fixedoverlay {
       top: 120px;
     }
   }
-
-  .mb-20 {
-    margin-bottom: 20px;
-  }
-  .mb-10 {
-    margin-bottom: 10px;
-  }
-  .mt-10 {
-    margin-top: 10px;
-  }
-  .print-page{
-    display: flex;
-    flex-direction: row;
-    height: 36rem;
-    margin-top: 30px;
-  }
-  /*
-  TODO gestion des titres trop longs : le rapport de taille de la prévisualisation 
-  n'est plus respecté
-  */
-  .print-preview-container{
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    margin: 0 auto;
-    box-shadow: 3px 3px 5px 6px #ccc;
-
-  }
-  .print-preview {
-    width: v-bind(previewWidth);
-    height: v-bind(previewHeight);
-    flex: 0 0;
-  }
-  .print-form {
-    flex: 0 0 260px;
-    margin-right: v-bind(formMarginRight);
-    /* max-width: 260px; */
-  }
-
-  .map-title {
-    text-align: center;
-  }
-
-  .map {
-    width: v-bind(mapWidth);
-    height: v-bind(mapHeight);
-    transform: scale(v-bind(coeff));
-    transform-origin: top left;
-  }
-</style>
-
-<style>
-/* hack pour surcharger le style modal dsfr */
-  .modal-override {
-    max-width: 80vw;
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-  }
 </style>
\ No newline at end of file
diff --git a/src/components/carte/control/PrintModal.vue b/src/components/carte/control/PrintModal.vue
new file mode 100644
index 0000000..bdf48de
--- /dev/null
+++ b/src/components/carte/control/PrintModal.vue
@@ -0,0 +1,490 @@
+<script lang="js">
+/**
+ * @description
+ * Panneau de partage de carte
+ *
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrButton}
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrModal}
+ */
+export default {};
+</script>
+
+<script lang="js" setup>
+import { useElementSize } from '@vueuse/core'
+import { useMapStore }  from '@/stores/mapStore';
+import { useEulerian } from '@/plugins/Eulerian.js';
+import Map from '../Map.vue';
+import View from '../View.vue';
+import { printMap } from '@/composables/keys';
+import { jsPDF } from "jspdf";
+
+const eulerian = useEulerian();
+const mapStore = useMapStore();
+const props = defineProps({
+  visibility: Boolean,
+  printOptions: Object
+});
+const selectedLayers = inject('selectedLayers');
+
+/**
+ * Paramètres du composant de la modale
+ */
+const title = "Imprimer une carte";
+const size = "xl";
+
+/**
+ * Conf formulaire orientation du papier
+ * Menu déroulant
+ */
+ const pageOrientationOptions = [
+  {
+    "label": "Portrait",
+    "value": "portrait",
+    "icon": "md-cropportrait-sharp"
+  },
+  {
+    "label": "Paysage",
+    "value": "landscape",
+    "icon": "md-croplandscape-sharp"
+  }
+];
+
+/**
+ * Gestion ouverture et fermeture de la Modal d'impression
+ */
+const printModalOpened = ref(false);
+const onModalPrintOpen = () => {
+  printModalOpened.value = true;
+  eulerian.pause();
+};
+const onModalPrintClose = () => {
+  printModalOpened.value = false;
+  eulerian.resume();
+};
+
+defineExpose({
+    onModalPrintClose,
+    onModalPrintOpen
+})
+/**
+ * Ref sur les elements du DOM
+ */
+const refMap = ref(null);
+const mapTitle = ref(null);
+const printPage = ref(null)
+const printForm = ref(null)
+const printPreview = ref(null)
+
+
+const formMarginRight = "10px"
+const coeffPX2MM = 0.264583333
+
+/**
+ *  Paramètres de la carte à imprimer
+ *  {Boolean} hasScale - ajoute une échelle ou pas à la carte
+ *  {Boolean} hasTitle - ajoute un titre ou pas à la carte
+ *  {String} printTitle - Titre de la carte
+ *  {String} pageOrientation - Orientation du papier
+ *  {Number} margin - marge en mm 
+ *  {String} paperFormat - Format standard de papier
+ *  {Object} dimension - Dimension du papier selon format choisi
+ */
+const hasScale = ref(true)
+const hasTitle = ref(false)
+const printTitle = ref("Ma carte")
+const pageOrientation = ref("portrait");
+const margin = ref(0)
+const paperFormat = ref("A4")
+const dimension = computed(() => {
+  let dimension = { 
+    'A0': { width : 841, height: 1189 },
+    'A1' : { width : 594, height: 841 },
+    'A2' : { width : 420, height: 594 },
+    'A3' : { width : 297, height: 420 },
+    'A4' : { width : 210, height: 297 },
+    'A5' : { width : 148, height: 210 },
+    'B4' : { width : 250, height: 353 },
+    'B5' : { width : 176, height: 250 }
+  }
+  return {
+    width : dimension[paperFormat.value].width,
+    height : dimension[paperFormat.value].height
+  }
+})
+
+/**
+ * Taille de la page print (DOM)
+ * (Formulaire et prévisualisation)
+ */
+const printPageSize = reactive(
+  useElementSize(
+    printPage,
+    { width: 0, height: 0 },
+    { box: 'border-box' },
+  ),
+)
+/**
+ * Taille du formualaire (DOM)
+ */
+const printFormSize = reactive(
+  useElementSize(
+    printForm,
+    { width: 0, height: 0 },
+    { box: 'border-box' },
+  ),
+)
+
+/**
+ * Taille du titre de la carte 
+ * sur la prévisualisation (DOM)
+ */
+const titleSize = reactive(
+  useElementSize(
+    mapTitle,
+    { width: 0, height: 0 },
+    { box: 'border-box' },
+  ),
+)
+
+/**
+ * Rapport de conversion mm vers pixel selon l'espace disponible
+ */
+const coeff = computed(() => {
+  if (pageOrientation.value == "portrait")
+    return Math.floor((printPageSize.height - titleSize.height) * coeffPX2MM) / dimension.value.height;
+  if (pageOrientation.value == "landscape") {
+    let coeff = Math.floor((printPageSize.width - printFormSize.width - parseInt(formMarginRight)) * coeffPX2MM) / dimension.value.height;
+    // cas ou la hauteur disponible n'est pas suffisante 
+    if (dimension.value.height * coeff + titleSize.height < printPageSize.height) {
+      return Math.floor((printPageSize.height - titleSize.height) * coeffPX2MM) / dimension.value.width; 
+    }
+    else {
+      return coeff
+    } 
+  }
+})
+
+/**
+ * Hauteur et largeur en mm
+ * du format papier
+ */
+const mapHeight = computed(() => {
+  if (pageOrientation.value == "portrait")
+    return dimension.value.height + "mm";
+    // return dimension.value.height - titleSize.height * coeffPX2MM + "mm";
+  if (pageOrientation.value == "landscape")
+    return dimension.value.width + "mm";
+    // return dimension.value.width  - titleSize.height * coeffPX2MM + "mm";
+})
+const mapWidth = computed(() => {
+  if (pageOrientation.value == "portrait")
+    return dimension.value.width + "mm";
+  if (pageOrientation.value == "landscape")
+    return dimension.value.height + "mm";
+})
+
+/**
+ * Hauteur et largeur en pixel
+ * de la prévisualisation de la carte à imprimer
+ */ 
+// TODO PROBLEME AVEC LA HAUTEUR COMPORTEMENT AVEC LE TITRE
+const previewHeight = computed(() => {
+  //   return printPageSize.height - titleSize.height + "px";
+    return printPageSize.height + "px";
+})
+const previewWidth = computed(() => {
+  if (pageOrientation.value == "portrait")
+    return (dimension.value.width * coeff.value ) / coeffPX2MM + "px";
+  if (pageOrientation.value == "landscape")
+    return ((dimension.value.height * coeff.value ) / coeffPX2MM) + "px";
+})
+
+/**
+ * Fonction d'export de la carte
+ */
+const exportPDF = () => {
+  const opts = {
+    orientation : pageOrientation.value,
+    unit : "mm",
+    format : [parseInt(mapHeight.value), parseInt(mapWidth.value)],
+  } 
+  const doc = new jsPDF(opts)
+  const marge = parseInt(margin.value)
+  const canvasWidth = refMap.value.mapRef.getElementsByTagName('canvas')[0].width
+  const canvasHeight = refMap.value.mapRef.getElementsByTagName('canvas')[0].height
+  const canvas = refMap.value.mapRef.getElementsByTagName('canvas')[0]
+
+
+  // Fake canvas
+  if (refMap.value.mapRef.getElementsByTagName('canvas').length < 2) {
+  var fakeCanvas = document.createElement('canvas')
+  fakeCanvas.classList = ['fixedoverlay']
+  fakeCanvas.width = canvasWidth
+  fakeCanvas.height = canvasHeight
+  refMap.value.mapRef.getElementsByClassName("ol-overlaycontainer")[0].insertAdjacentElement('beforebegin', fakeCanvas)
+  }
+  else {
+    var fakeCanvas = refMap.value.mapRef.getElementsByTagName('canvas')[1]
+  }
+  fakeCanvas.style.display = "none"
+  const ctx = fakeCanvas.getContext("2d");
+  ctx.reset()
+  const img = canvas.toDataURL('image/png')
+  const imgWidth = (canvasWidth * coeffPX2MM) - (marge * 2)
+  const imgHeight = ((canvasHeight - titleSize.height) * coeffPX2MM) - (marge * 2)
+  const imgPosX = marge
+  const imgPosY = (titleSize.height * coeffPX2MM) + marge
+  doc.addImage(img, 'PNG', imgPosX, imgPosY, imgWidth, imgHeight)
+  if (hasScale.value) {
+    const scaleLine = refMap.value.mapRef.getElementsByClassName("ol-scale-line")[0]  
+    const scaleLineInner = scaleLine.children[0]  
+    const style = getComputedStyle(scaleLine)
+    const styleInner = getComputedStyle(scaleLineInner)
+    const scaleLeft = parseInt(style.left)
+    const scaleBottom = parseInt(style.bottom)
+    const scaleContent = scaleLineInner.innerHTML;
+    const scaleWidth = parseInt(styleInner.width) 
+    const scaleHeight = parseInt(styleInner.lineHeight)
+    const y1 =canvasHeight - scaleBottom - scaleHeight
+    const ctx = fakeCanvas.getContext("2d");
+    
+    // rect
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255, 255, 255, 0.75)"
+    ctx.rect(scaleLeft, y1, scaleWidth, scaleHeight)
+    ctx.fillRect(scaleLeft,y1,scaleWidth,scaleHeight)
+    // Text
+    ctx.font = styleInner.font
+    ctx.textAlign="center"; 
+    ctx.fillStyle = "#000000";
+    ctx.fillText(scaleContent, scaleLeft+(scaleWidth/2),y1+(scaleHeight/2));
+    // Line
+    ctx.beginPath();
+    ctx.moveTo(scaleLeft, y1)
+    ctx.lineTo(scaleLeft, y1 + scaleHeight);
+    ctx.lineTo(scaleLeft, y1 + scaleHeight);
+    ctx.lineTo(scaleLeft + scaleWidth, y1 + scaleHeight);
+    ctx.lineTo(scaleLeft + scaleWidth, y1);
+    ctx.lineWidth = 1;
+    ctx.lineCap = "round";
+    ctx.strokeStyle = "#666666"
+    ctx.stroke();
+    const imgOverlay = fakeCanvas.toDataURL('image/png')
+    doc.addImage(imgOverlay, 'PNG', imgPosX, imgPosY, imgWidth, imgHeight)
+  }
+  doc.save('carte.pdf')
+}
+
+const scaleLineOptions = {
+  id: "4",
+  units: 'metric',
+  bar: false,
+};
+</script>
+
+<template>
+    <DsfrModal
+      :opened="printModalOpened"
+      :title="title"
+      :size="size"
+      @close="onModalPrintClose">
+      <!-- slot : c'est ici que l'on customise le contenu ! -->
+    <div ref="printPage" class="print-page">
+      <!-- Formulaire d'impression -->
+        <div ref="printForm" class="print-form">
+            <DsfrSegmentedSet
+              :inline="false"
+              v-model="pageOrientation"
+              :options="pageOrientationOptions"
+              :small="false"
+              legend="Mise en Page"
+              class="mb-20"
+            >
+              <template #legend>Mise en Page</template>
+            </DsfrSegmentedSet>
+            <DsfrSelect
+              v-model="paperFormat"
+              label="Dimensions"
+              :options="[ 'A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'B4', 'B5']"
+            />
+ <!--           <DsfrSelect
+              v-model="margin"
+              label="Marge"
+              :options="[
+                { value : 0, text : 'Pas de marge - 0mm' },
+                { value : 5, text : 'Petite marge - 5mm' },
+                { value : 10, text : 'Grosse marge - 10mm' }
+              ]"
+            />
+            <DsfrInput
+                v-model="printTitle"
+                :disabled="!hasTitle"
+                label="Titre de la carte"
+                label-visible
+                name="titre"
+                class="mb-10"
+            />
+            <div class="mt-10"><DsfrCheckbox
+              v-model="hasTitle"
+              name="checkbox-simple"
+              :label="!hasTitle ? 'Activer le titre' : 'Désactiver le titre'"
+            /></div>-->
+            <div class="mt-10">
+              <DsfrCheckbox
+              v-model="hasScale"
+              name="checkbox-simple"
+              :label="!hasScale ? 'Afficher l\'échelle' : 'Désactiver l\'échelle'"
+            /></div>
+            <DsfrButton
+              id="print-page-export"
+              label="Export PDF"
+              title="Export PDF"
+              icon=""
+              no-outline
+              @click="exportPDF"
+            />
+         </div>
+        <!-- Dom de la prévisualisation de l'impression -->
+        <div  class="print-preview-container">
+          <div ref="printPreview" class="print-preview">
+            <div id="map-title" ref="mapTitle" class="map-title" v-if="hasTitle">{{ printTitle }}</div>
+            <Map
+              v-if="printModalOpened" 
+              class="map" 
+              ref="refMap"
+              :map-Id="printMap"
+            >
+                <View
+                  :map-Id="printMap"
+                  :center="mapStore.center"
+                  :zoom="mapStore.zoom"/>
+                <Layers
+                  :map-Id="printMap"
+                  :selected-layers="selectedLayers"/>
+                  <ScaleLine
+                  :visibility="hasScale"
+                  :scale-line-options="scaleLineOptions"
+                  :map-id="printMap"
+                />
+            </Map>
+        </div>
+        </div>    
+    </div>
+    </DsfrModal>
+</template>
+
+<style scoped>
+  #print-button-position {
+    position: absolute;
+    right: 16px;
+    top: 100px;
+    z-index: 1000;
+    background-color: var(--background-default-grey);
+    overflow: visible;
+  }
+
+  #print-button-position[title]:hover:after {
+    -webkit-mask-image: unset;
+    mask-image: unset;
+    background-color: unset;
+    flex: unset;
+    height: unset;
+    -webkit-mask-size: unset;
+    mask-size: unset;
+    vertical-align: unset;
+    content: attr(title);
+    position: absolute;
+    top: 0;
+    color: var(--text-default-grey);
+    font-size: .75rem;
+    width: fit-content;
+    white-space: nowrap;
+    padding: .5rem .5rem 0.5rem 1.25rem;
+    background-size: .375rem .5rem,.375rem .5rem,1px, 100%,calc(100% - 0.5rem) 100%;
+    background-repeat: no-repeat;
+    background-position: 0.125rem 50%, 100% 50%,0.375rem 100%,0.375rem 100%;
+    filter: drop-shadow(0 2px 6px rgba(0,0,18,.16));
+    filter: drop-shadow(var(--overlap-shadow));
+    background-image: conic-gradient(from 56.31deg at 0% 50%,transparent 0deg,var(--background-overlap-grey) 0deg,var(--background-overlap-grey) 67.38deg,transparent 67.38deg),conic-gradient(from 56.31deg at 0% 50%,transparent 0deg,var(--border-default-grey) 0deg,var(--border-default-grey) 67.38deg,transparent 67.38deg),linear-gradient(90deg,var(--border-default-grey),var(--border-default-grey)),linear-gradient(90deg,var(--background-overlap-grey),var(--background-overlap-grey));
+    transform: translateX(-262px);
+  }
+  .print-button-size {
+    width: 40px;
+    height: 40px;
+  }
+
+  /* positionnement absolu à adapter en fonction du positionnement
+  des autres boutons car n'est pas dans la grille */
+  @media (max-width: 576px){
+    #print-button-position {
+      top: 60px;
+    }
+  }
+
+  @media (max-width: 627px) and (min-width: 576px){
+    #print-button-position {
+      top: 120px;
+    }
+  }
+
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+  .mb-10 {
+    margin-bottom: 10px;
+  }
+  .mt-10 {
+    margin-top: 10px;
+  }
+  .print-page{
+    display: flex;
+    flex-direction: row;
+    height: 36rem;
+    margin-top: 30px;
+  }
+  /*
+  TODO gestion des titres trop longs : le rapport de taille de la prévisualisation 
+  n'est plus respecté
+  */
+  .print-preview-container{
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    margin: 0 auto;
+    box-shadow: 3px 3px 5px 6px #ccc;
+
+  }
+  .print-preview {
+    width: v-bind(previewWidth);
+    height: v-bind(previewHeight);
+    flex: 0 0;
+  }
+  .print-form {
+    flex: 0 0 260px;
+    margin-right: v-bind(formMarginRight);
+    /* max-width: 260px; */
+  }
+
+  .map-title {
+    text-align: center;
+  }
+
+  .map {
+    width: v-bind(mapWidth);
+    height: v-bind(mapHeight);
+    transform: scale(v-bind(coeff));
+    transform-origin: top left;
+  }
+</style>
+
+<style>
+/* hack pour surcharger le style modal dsfr */
+  .modal-override {
+    max-width: 80vw;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/carte/control/Share.vue b/src/components/carte/control/Share.vue
index 4ce733c..5bc3231 100644
--- a/src/components/carte/control/Share.vue
+++ b/src/components/carte/control/Share.vue
@@ -15,6 +15,7 @@ import { useDataStore }  from '@/stores/dataStore';
 import { useMapStore }  from '@/stores/mapStore';
 import { useEulerian } from '@/plugins/Eulerian.js';
 import { useClipboard } from '@vueuse/core'
+import ShareModal from '@/components/carte/control/ShareModal.vue'
 
 const eulerian = useEulerian();
 const dataStore = useDataStore();
@@ -26,91 +27,13 @@ const props = defineProps({
   shareOptions: Object
 });
 
+const modalShareRef = ref(null)
+
 // paramètres du composant bouton
 const btnTitle = "Ouvrir le panneau de partage de carte";
 const btnIcon = "fr-icon-link"; // FIXME icone de partage dsfr !?
 const btnLabel = "";
 
-// paramètres du composant de la modale
-const title = "Partager une carte";
-const size = "lg";
-
-const shareModalOpened = ref(false);
-
-const onModalShareOpen = () => {
-  shareModalOpened.value = true;
-  eulerian.pause();
-};
-const onModalShareClose = () => {
-  shareModalOpened.value = false;
-  eulerian.resume();
-};
-
-// les paramètres du composant de partage
-const contacts = dataStore.getContacts();
-const permalinkEncoded = computed(() => {
-  return encodeURI(mapStore.permalink).replaceAll("&", "%26")
-})
-const mail = computed(() => {
-  return  {
-    address : contacts.mail,
-    subject : "Cartes à consulter sur cartes.gouv.fr",
-    body : "Bonjour,%0AJe vous invite à consulter cette carte sur Cartes.gouv.fr :%0A" + `${permalinkEncoded.value}`
-  }
-});
-
-const shareMail = computed(() => {
-  return {
-    "to" : `mailto:${mail.value.address}?subject=${mail.value.subject}&body=${mail.value.body}`,
-    "label" : "Envoyer un mail"
-  };
-})
-const shareNetworks = computed(() => {
-  return [
-    {
-    "name": "facebook",
-    "label": "Partager sur Facebook",
-    "url": contacts.networks.facebook + "?display=popup&u=" + mapStore.permalink
-    },
-    {
-      "name": "twitter-x",
-      "label": "Partager sur X (anciennement Twitter)",
-      "url": contacts.networks.twitter + "?url=" + permalinkEncoded.value + "&text=Ma carte IGN&via=&hashtags=IGNFrance"
-    },
-    {
-      "name": "linkedin",
-      "label": "Partager sur LinkedIn",
-      "url": contacts.networks.linkedin + "?url=" + mapStore.permalink + "&title=Ma%20carte%20IGN"
-    },
-    {
-      "name": "instagram",
-      "label": "Partager sur Instagram",
-      "url": contacts.networks.instagram
-    }
-  ]
-});
-
-// creation de l'iframe de partage
-const iframe = computed(() => {
- return `<iframe
-    width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
-    sandbox="allow-forms allow-scripts allow-same-origin"
-    src="${mapStore.permalinkShare}"
-    allowfullscreen>
-  </iframe>`;
-});
-const clipboardSource = ref('')
-const { text, copy, copied, isSupported } = useClipboard({ clipboardSource })
-
-const target = ref(null);
-
-const icon = "co-copy"
-const defaultScale = ref(0.8325);
-const iconProps = computed(() => typeof icon === 'string'
-  ? { scale: defaultScale.value, name: icon }
-  : { scale: defaultScale.value, ...icon },
-);
-
 onMounted(() => {
   nextTick(function () {
     //code here
@@ -122,6 +45,10 @@ onBeforeMount(() => {
     //code here
   })
 });
+
+const onModalShareOpen = () => {
+  modalShareRef.value.onModalShareOpen()
+}
 </script>
 
 <template>
@@ -137,68 +64,7 @@ onBeforeMount(() => {
       no-outline
       @click="onModalShareOpen"
     />
-    <DsfrModal
-      :opened="shareModalOpened"
-      :title="title"
-      :size="size"
-      @close="onModalShareClose">
-      <!-- slot : c'est ici que l'on customise le contenu ! -->
-      <div>
-        <p>
-          <DsfrShare
-            copyLabel="Copier dans le presse-papier"
-            :mail="shareMail"
-            :networks="shareNetworks"
-            title="Partages"
-          />
-        </p>
-      </div>
-      <div>
-        <p>
-          <DsfrInput
-            v-model="mapStore.permalink"
-            label="Lien permanent vers la carte"
-            placeholder=""
-            label-visible
-            readonly
-            descriptionId=""
-          >
-          <template #label>
-            Lien permanent vers la carte
-            <DsfrButton
-            tertiary
-            :noOutline="true"
-            @click="copy(mapStore.permalink)">
-            <VIcon
-            v-bind="iconProps"/>
-          </DsfrButton>
-          </template>
-          </DsfrInput>
-        </p>
-        <p>
-          <DsfrInput
-            v-model="iframe"
-            placeholder=""
-            isTextarea
-            label-visible
-            readonly
-            descriptionId=""
-            style="height: 200px;"
-          >
-          <template #label>
-            Copiez le code HTML pour intégrer la carte dans un site
-            <DsfrButton
-            tertiary
-            :noOutline="true"
-            @click="copy(iframe)">
-            <VIcon
-            v-bind="iconProps"/>
-          </DsfrButton>
-          </template>
-          </DsfrInput>
-        </p>
-      </div>
-    </DsfrModal>
+    <ShareModal ref="modalShareRef"/>
   </div>
 </template>
 
@@ -249,10 +115,6 @@ onBeforeMount(() => {
     width: 40px;
     height: 40px;
   }
-  .share-iframe-input {
-    height: 200px;
-  }
-
   /* positionnement absolu à adapter en fonction du positionnement
   des autres boutons car n'est pas dans la grille */
   @media (max-width: 576px){
diff --git a/src/components/carte/control/ShareModal.vue b/src/components/carte/control/ShareModal.vue
new file mode 100644
index 0000000..36c8dee
--- /dev/null
+++ b/src/components/carte/control/ShareModal.vue
@@ -0,0 +1,204 @@
+<script lang="js">
+/**
+ * @description
+ * Panneau de partage de carte
+ *
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrButton}
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrModal}
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrShare}
+ */
+export default {};
+</script>
+
+<script lang="js" setup>
+import { useDataStore }  from '@/stores/dataStore';
+import { useMapStore }  from '@/stores/mapStore';
+import { useEulerian } from '@/plugins/Eulerian.js';
+import { useClipboard } from '@vueuse/core'
+
+const eulerian = useEulerian();
+const dataStore = useDataStore();
+const mapStore = useMapStore();
+
+// paramètres du composant bouton
+const btnTitle = "Ouvrir le panneau de partage de carte";
+const btnIcon = "fr-icon-link"; // FIXME icone de partage dsfr !?
+const btnLabel = "";
+
+// paramètres du composant de la modale
+const title = "Partager une carte";
+const size = "lg";
+
+const shareModalOpened = ref(false);
+
+const onModalShareOpen = () => {
+  shareModalOpened.value = true;
+  eulerian.pause();
+};
+const onModalShareClose = () => {
+  shareModalOpened.value = false;
+  eulerian.resume();
+};
+
+// les paramètres du composant de partage
+const contacts = dataStore.getContacts();
+const permalinkEncoded = computed(() => {
+  return encodeURI(mapStore.permalink).replaceAll("&", "%26")
+})
+const mail = computed(() => {
+  return  {
+    address : contacts.mail,
+    subject : "Cartes à consulter sur cartes.gouv.fr",
+    body : "Bonjour,%0AJe vous invite à consulter cette carte sur Cartes.gouv.fr :%0A" + `${permalinkEncoded.value}`
+  }
+});
+
+const shareMail = computed(() => {
+  return {
+    "to" : `mailto:${mail.value.address}?subject=${mail.value.subject}&body=${mail.value.body}`,
+    "label" : "Envoyer un mail"
+  };
+})
+const shareNetworks = computed(() => {
+  return [
+    {
+    "name": "facebook",
+    "label": "Partager sur Facebook",
+    "url": contacts.networks.facebook + "?display=popup&u=" + mapStore.permalink
+    },
+    {
+      "name": "twitter-x",
+      "label": "Partager sur X (anciennement Twitter)",
+      "url": contacts.networks.twitter + "?url=" + permalinkEncoded.value + "&text=Ma carte IGN&via=&hashtags=IGNFrance"
+    },
+    {
+      "name": "linkedin",
+      "label": "Partager sur LinkedIn",
+      "url": contacts.networks.linkedin + "?url=" + mapStore.permalink + "&title=Ma%20carte%20IGN"
+    },
+    {
+      "name": "instagram",
+      "label": "Partager sur Instagram",
+      "url": contacts.networks.instagram
+    }
+  ]
+});
+
+// creation de l'iframe de partage
+const iframe = computed(() => {
+ return `<iframe
+    width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
+    sandbox="allow-forms allow-scripts allow-same-origin"
+    src="${mapStore.permalinkShare}"
+    allowfullscreen>
+  </iframe>`;
+});
+const clipboardSource = ref('')
+const { text, copy, copied, isSupported } = useClipboard({ clipboardSource })
+
+const target = ref(null);
+
+const icon = "co-copy"
+const defaultScale = ref(0.8325);
+const iconProps = computed(() => typeof icon === 'string'
+  ? { scale: defaultScale.value, name: icon }
+  : { scale: defaultScale.value, ...icon },
+);
+
+onMounted(() => {
+  nextTick(function () {
+    //code here
+  })
+});
+
+onBeforeMount(() => {
+  nextTick(function () {
+    //code here
+  })
+});
+
+defineExpose({
+  onModalShareOpen,
+  onModalShareClose
+})
+</script>
+
+<template>
+    <DsfrModal
+      :opened="shareModalOpened"
+      :title="title"
+      :size="size"
+      @close="onModalShareClose">
+      <!-- slot : c'est ici que l'on customise le contenu ! -->
+      <div>
+        <p>
+          <DsfrShare
+            copyLabel="Copier dans le presse-papier"
+            :mail="shareMail"
+            :networks="shareNetworks"
+            title="Partages"
+          />
+        </p>
+      </div>
+      <div>
+        <p>
+          <DsfrInput
+            v-model="mapStore.permalink"
+            label="Lien permanent vers la carte"
+            placeholder=""
+            label-visible
+            readonly
+            descriptionId=""
+          >
+          <template #label>
+            Lien permanent vers la carte
+            <DsfrButton
+            tertiary
+            :noOutline="true"
+            @click="copy(mapStore.permalink)">
+            <VIcon
+            v-bind="iconProps"/>
+          </DsfrButton>
+          </template>
+          </DsfrInput>
+        </p>
+        <p>
+          <DsfrInput
+            v-model="iframe"
+            placeholder=""
+            isTextarea
+            label-visible
+            readonly
+            descriptionId=""
+            style="height: 200px;"
+          >
+          <template #label>
+            Copiez le code HTML pour intégrer la carte dans un site
+            <DsfrButton
+            tertiary
+            :noOutline="true"
+            @click="copy(iframe)">
+            <VIcon
+            v-bind="iconProps"/>
+          </DsfrButton>
+          </template>
+          </DsfrInput>
+        </p>
+      </div>
+    </DsfrModal>
+</template>
+
+<style>
+  .fr-btn--instagram::before {
+    -webkit-mask-image: url("../../../../node_modules/@gouvfr/dsfr/dist/icons/logo/instagram-line.svg");
+    mask-image: url("../../../../node_modules/@gouvfr/dsfr/dist/icons/logo/instagram-line.svg");
+  }
+</style>
+
+<style scoped>
+  
+  .share-iframe-input {
+    height: 200px;
+  }
+
+</style>
diff --git a/src/components/menu/LeftMenuTool.vue b/src/components/menu/LeftMenuTool.vue
index 7300fad..3d025ef 100644
--- a/src/components/menu/LeftMenuTool.vue
+++ b/src/components/menu/LeftMenuTool.vue
@@ -1,6 +1,8 @@
 <script setup lang="js">
-
-const props = defineProps({})
+import MenuTierce from '@/components/menu/MenuTierce.vue';
+import { useTemplateRef } from 'vue';
+const props = defineProps({
+})
 
 const side = "left"
 const is_expanded = ref()
@@ -9,9 +11,16 @@ const is_expanded = ref()
 const tabArray = computed(() => {
     const arr = [
         {
-            componentName : "MenuCatalogue",
-            icon : "catalogIcon",
-            title : "Catalogue de données",
+            componentName : "MenuTierce",
+            icon : "ri-menu-fill",
+            title : "Menu Tierce",
+            visibility: true
+        },
+        {
+            componentName : "Enregistrement",
+            icon : "ri-bookmark-line",
+            title : "Mes Enregistrements",
+            visibility: false
         }
     ];
 
@@ -33,25 +42,51 @@ function tabClicked(newTab) {
 function tabIsActive(componentName) {
   return activeTab.value.replace("Content" , '') === componentName ? true : false
 }
+
+function closeMenu() {
+  wrapper.value.closeMenu()
+}
+
+function onEnregistrementOpen() {
+  tabRefs.value.filter(r => r.id == "Enregistrement")[0].button.children[0].click()
+}
+
+const tabRefs = useTemplateRef('tabs')
+
+
+const emit = defineEmits(['onModalShareOpen', 'onModalPrintOpen', 'onModalThemeOpen'])
 </script>
 
 <template>
   <MenuLateralWrapper
     :side="side"
     :visibility="true"
+    :width=300
+    :padding=16
     id="MenuCatalogueContentClose"
     v-model="is_expanded"
     ref="wrapper">
     <template #content>
-      <div id="MenuCatalogueContent"
-        :class="[activeTab === 'MenuCatalogueContent' ? 'activeTab' : 'inactiveTab']" >
-        <slot></slot>
+      <div id="MenuTierceContent"
+        :class="[activeTab === 'MenuTierceContent' ? 'activeTab' : 'inactiveTab']" >
+        <MenuTierce
+          @on-modal-share-open="$emit('onModalShareOpen')"
+          @on-modal-print-open="$emit('onModalPrintOpen')"
+          @on-modal-theme-open="$emit('onModalThemeOpen')"
+          @on-enregistrement-open="onEnregistrementOpen"
+        />
       </div>
+      <!-- <div id="EnregistrementContent"
+        :class="[activeTab === 'EnregistrementContent' ? 'activeTab' : 'inactiveTab']" >
+        Mes enregistrements !
+      </div> -->
     </template>
     <template #navButtons>
       <MenuLateralNavButton
-        v-for="tab in tabArray"
+        v-for="tab in tabArray" ref="tabs"
+        :side="side"
         :icon="tab.icon"
+        :visibility="tab.visibility"
         :id="tab.componentName"
         :active="tabIsActive(tab.componentName)"
         :title="tab.title"
diff --git a/src/components/menu/MenuLateralNavButton.vue b/src/components/menu/MenuLateralNavButton.vue
index b5b7423..efa0038 100644
--- a/src/components/menu/MenuLateralNavButton.vue
+++ b/src/components/menu/MenuLateralNavButton.vue
@@ -14,12 +14,18 @@
 </script>
 
 <script setup lang="js">
+import { useControlsPosition } from '@/composables/controls'
+import { useMapStore } from "@/stores/mapStore"
+
+const mapStore = useMapStore();
 
 const props = defineProps({
     icon: String,
     id: String,
     active: Boolean,
     title: String,
+    side: String,
+    visibility: Boolean
 })
 
 
@@ -28,22 +34,70 @@ const icon = props.icon
 const emit = defineEmits(['tabClicked'])
 
 const tabClicked = () => {
-    emit("tabClicked", props.id);
+  if(props.side == "left") {
+      closeLeftPanels()
+  }
+  if(props.side == "right") {
+    closeRightPanels()
+  }
+  emit("tabClicked", props.id);
+}
+
+const controlsPosition = useControlsPosition()
+
+function closePanel(control) {
+  let button = [...control.element.children].filter(e => {
+  if (e.className.includes("GPshowOpen"))
+      return e
+  })
+  if (button[0].getAttribute("aria-pressed") === "true")
+    button[0].click()
+}
+function closeRightPanels(event) {
+  mapStore.getMap().getControls().getArray().forEach(control => {
+    if (controlsPosition.right.includes(control.CLASSNAME)) {
+      closePanel(control)
+    }
+  })
+}
+function closeLeftPanels() {
+  mapStore.getMap().getControls().getArray().forEach(control => {
+    if (controlsPosition.left.includes(control.CLASSNAME)) {
+      closePanel(control)
+    }
+  })
 }
+
+function clickButton() {
+  console.log("click on button" + props.id)
+  button.click()
+}
+const button = ref(null)
+const id = ref(props.id)
+defineExpose({
+  clickButton,
+  button,
+  id
+})
 </script>
 
 
 
 <template>
+  <div
+  ref="button"
+  >
     <DsfrButton
       :id="id"
       secondary
       :aria-label="title"
-      :class="`${active ? 'active': ''}  'navBarIcon'` && 'navButton'"
+      :class="`${active ? 'active': ''}  navBarIcon ${visibility ? '' : 'invisibleNavButton'} navButton` "
       :icon="icon"
       :iconOnly="true"
       @click="tabClicked">
     </DsfrButton>
+  </div>
+
 </template>
 
 
@@ -59,9 +113,13 @@ const tabClicked = () => {
   background-color: var(--background-default-grey);
 }
 
+.invisibleNavButton {
+  display: none;
+}
+
 .navButton[aria-label]:hover::before {
   content: attr(aria-label);
-  position: absolute;
+  position: relative;
   top: 0;
   color: var(--text-default-grey);
   font-size: .75rem;
diff --git a/src/components/menu/MenuLateralWrapper.vue b/src/components/menu/MenuLateralWrapper.vue
index db6579d..877bd6b 100644
--- a/src/components/menu/MenuLateralWrapper.vue
+++ b/src/components/menu/MenuLateralWrapper.vue
@@ -4,6 +4,8 @@
    *
    * @property { String } side position sur la carte du menu : valeur possible 'left' ou 'right'
    * @property { Boolean } visibility  boolean assurant l'activation du menu
+   * @property { Number } width  largeur du menu déplié, défaut 550
+   * @property { Number } padding  padding à gauche et à droite, défaut 30
    *
    */
   export default {
@@ -17,9 +19,10 @@ import { OhVueIcon as VIcon } from 'oh-vue-icons'
 const props = defineProps({
   side: String,
   visibility: Boolean,
-  id: String
+  id: String,
+  width: Number,
+  padding: Number
 })
-
 const icon = "io-close"
 const defaultScale = 0.8325;
 const iconProps = computed(() => typeof icon === 'string'
@@ -27,12 +30,21 @@ const iconProps = computed(() => typeof icon === 'string'
   : { scale: defaultScale.value, ...icon },
 );
 
+const widthValue = props.width || 550
+const paddingValue = props.padding || 30
 const is_expanded = defineModel(false)
-const width = ref()
-width.value = 30
-const cssWidth = computed(() => {
-  return width.value + "vw";
+const widthMenu = ref(widthValue)
+const padding = ref(paddingValue)
+const cssWidthMenu = computed(() => {
+  return widthMenu.value + "px";
+})
+const cssPadding = computed(() => {
+  return padding.value + "px";
+})
+const cssWidthMenuContent = computed(() => {
+  return widthMenu.value - padding.value + "px";
 })
+
 const menuTabs = ref()
 
 function closeMenu() {
@@ -95,6 +107,10 @@ defineExpose({
     background-position: calc(100% - 0.125rem) 50%, 100% 50%, calc(100% - 0.375rem) 0, calc(100% - 0.375rem) 0;
     background-image: conic-gradient(from 236.31deg at 100% 50%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from 236.31deg at 100% 50%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
   }
+
+  .navButton[aria-label]:hover .ov-icon {
+    position: absolute;
+  }
 </style>
 
 <style scoped lang="scss">
@@ -118,7 +134,7 @@ defineExpose({
 .menu-collapse-icon {
     margin-bottom: 20px;
     &:hover{
-      color : #8585f6;
+      color : var(--text-action-high-blue-france);
     }
 }
 
@@ -129,12 +145,12 @@ defineExpose({
 }
 
 .menu-toggle-wrap {
-    height: inherit;
+    height: calc(70vh - 24px);
     z-index: 1;
     &.is_expanded {
       .menu-content-list {
-        width: 550px;
-        // width: v-bind(cssWidth);
+        width: v-bind(cssWidthMenu);
+        margin-top: 12px;
       }
 
     }
@@ -143,18 +159,18 @@ defineExpose({
 .menu-content-list {
   height: inherit;
   background-color: var(--background-default-grey);
-  padding-left: 30px;
+  padding-left: v-bind(cssPadding);
   position: absolute;
   display: flex;
   flex-direction: column;
 }
 .menu-content {
-  width : inherit
+  width : v-bind(cssWidthMenuContent);
 }
 .menu-logo-list {
   flex-direction: column;
   display: flex;
-  row-gap: 20px;
+  row-gap: 4px;
   margin-top: 12px;
   width: 40px;
   position: absolute;
diff --git a/src/components/menu/MenuTierce.vue b/src/components/menu/MenuTierce.vue
new file mode 100644
index 0000000..9bb764c
--- /dev/null
+++ b/src/components/menu/MenuTierce.vue
@@ -0,0 +1,122 @@
+<script lang="js">
+  /**
+   * @description
+   * Menu de liens vers différents contenu
+   * 1- ouverture d'un widget extension (ex : layerImport)
+   * 2- ouverture d'une modal (ex: Print, parmaètres d'affichage)
+   * 3- panel menuWrapper (ex: mes enregistrements)
+   *
+   * Les interactions pour ouvrir et fermer les fenêtres sont spécifiques à chacun de ces cas.
+   *
+   */
+  export default {
+    name: 'MenuTierce'
+  };
+</script>
+
+<script setup lang="js">
+import { useMapStore } from "@/stores/mapStore"
+const mapStore = useMapStore();
+
+const emit = defineEmits(['openControl', 'onModalShareOpen', 'onModalPrintOpen', 'onModalThemeOpen', 'onEnregistrementOpen'])
+
+function openControl(controlName) {
+  mapStore.getMap().getControls().getArray().forEach(control => {
+    if (control.CLASSNAME == controlName) {
+      let button = [...control.element.children].filter(e => {
+        if (e.className.includes("GPshowOpen"))
+            return e
+        })
+        button[0].click()
+        emit("openControl")
+      }
+  })
+}
+
+const icon = "LayerImport"
+const defaultScale = 0.8325;
+const iconProps = computed(() => typeof icon === 'string'
+  ? { scale: defaultScale.value, name: icon }
+  : { scale: defaultScale.value, ...icon },
+);
+
+</script>
+
+<template>
+<div class="container">
+  <!-- <DsfrButton
+    tertiary
+    no-outline
+    @click="$emit('onEnregistrementOpen')"
+    icon="ri-bookmark-line"
+    >
+    Mes enregistrements
+  </DsfrButton>
+  <hr/> -->
+  <DsfrButton
+    tertiary
+    no-outline
+    :icon="iconProps"
+    @click="openControl('LayerImport')"
+    >
+    Importer des données
+  </DsfrButton>
+  <DsfrButton
+    tertiary
+    no-outline
+    icon="fr-icon-link"
+    @click="$emit('onModalShareOpen')"
+    >
+    Partager, intégrer la carte
+  </DsfrButton>
+  <DsfrButton
+    tertiary
+    no-outline
+    icon="px-print"
+    @click="$emit('onModalPrintOpen')"
+    class="tierce-print"
+    >
+    Imprimer
+  </DsfrButton>
+  <DsfrButton
+    tertiary
+    no-outline
+    @click="$emit('onModalThemeOpen')"
+    icon="fr-icon-theme-fill"
+    >
+    Paramètres d'affichage
+  </DsfrButton>
+</div>
+</template>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+.container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 32px);
+  max-height: calc(70vh - 70px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+:deep(button) {
+  font-size: 0.875rem;
+  color: var(--text-action-high-grey);
+}
+
+@media (max-width: 576px) {
+  .tierce-print {
+    display: none;
+  }
+}
+
+@media (max-height: 576px) {
+  .tierce-print {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/menu/RightMenuTool.vue b/src/components/menu/RightMenuTool.vue
index bbb50a5..c57b036 100644
--- a/src/components/menu/RightMenuTool.vue
+++ b/src/components/menu/RightMenuTool.vue
@@ -1,17 +1,30 @@
 <script setup lang="js">
+import { useDataStore } from "@/stores/dataStore"
+import MenuControl from '@/components/menu/MenuControl.vue';
 
 const props = defineProps({
+  selectedControls : {Object},
+  selectedLayers : {Object}
 })
 
+const dataStore = useDataStore();
+
 const side = "right"
 
 // Ce tableau donne l'ordre des icones du menu lateral
 const tabArray = computed(() => {
     const arr = [
+        {
+            componentName : "MenuCatalogue",
+            icon : "catalogIcon",
+            title : "Catalogue de données",
+            visibility : true
+        },
         {
             componentName : "MenuControl",
             icon : "menuWidgetIcon",
             title : "Catalogue d'outils",
+            visibility : true
         }
     ];
 
@@ -23,12 +36,12 @@ const is_expanded = ref()
 const wrapper = ref(null)
 
 function tabClicked(newTab) {
-    if (tabIsActive(newTab) && is_expanded.value)
-        wrapper.value.closeMenu()
-    else{
-        activeTab.value = newTab + "Content";
-        wrapper.value.openMenu()
-    }
+  if (tabIsActive(newTab) && is_expanded.value)
+      wrapper.value.closeMenu()
+  else{
+      activeTab.value = newTab + "Content";
+      wrapper.value.openMenu()
+  }
 }
 
 function tabIsActive(componentName) {
@@ -40,23 +53,33 @@ function tabIsActive(componentName) {
   <MenuLateralWrapper
     :side="side"
     :visibility="true"
-    id="MenuControlContentClose"
+    :id="activeTab"
     v-model="is_expanded"
     ref="wrapper">
     <template #content>
+      <div id="MenuCatalogueContent"
+        :class="[activeTab === 'MenuCatalogueContent' ? 'activeTab' : 'inactiveTab']" >
+        <MenuCatalogue
+        :selected-layers="selectedLayers"
+        :layers="dataStore.getLayers()"/>
+      </div>
       <div id="MenuControlContent"
         :class="[activeTab === 'MenuControlContent' ? 'activeTab' : 'inactiveTab']" >
-        <slot></slot>
+        <MenuControl 
+          :selected-controls="selectedControls"/>
       </div>
     </template>
     <template #navButtons>
       <MenuLateralNavButton
         v-for="tab in tabArray"
+        :visibility="tab.visibility"
+        :side="side"
         :icon="tab.icon"
         :id="tab.componentName"
         :active="tabIsActive(tab.componentName)"
         :title="tab.title"
-        @tab-clicked="tabClicked"/>
+        @tab-clicked="tabClicked"
+        />
     </template>
   </MenuLateralWrapper>
 </template>
diff --git a/src/composables/controls.js b/src/composables/controls.js
index d77f9e7..a165841 100644
--- a/src/composables/controls.js
+++ b/src/composables/controls.js
@@ -11,6 +11,7 @@
  *    analytic: false    // remontée d'interaction pour Eulerian sur le clic du bouton principal
  * }
  */
+
 export const useControls = {
   OverviewMap: {
     id: 'OverviewMap',
@@ -111,7 +112,7 @@ export const useControls = {
   Print: {
     id: 'Print',
     active: true,
-    disable: false,
+    disable: true,
     analytic: true
   },
   MousePosition: {
@@ -135,7 +136,7 @@ export const useControls = {
   LayerImport: {
     id: 'LayerImport',
     active: true,
-    disable: false,
+    disable: true,
     analytic: true
   },
   ControlList: {
@@ -324,3 +325,117 @@ export function useControlsMenuOptions() {
   ].filter(opt => Object.keys(useControls).includes(opt.name))
   .filter(opt => !opt.disabled)
 }
+
+export function useControlsExtensionPosition() {
+  return {
+    shareOptions : 'top-left',
+    printOptions : 'top-right',
+    territoriesOptions : 'bottom-left',
+    layerSwitcherOptions : "top-right",
+    legendsOptions : "top-right",
+    getFeatureInfoOptions : 'bottom-left',
+    overviewMapOptions : 'bottom-left',
+    zoomOptions : 'bottom-right',
+    controlListOptions : 'top-right',
+    isocurveOptions : 'top-right',
+    routeOptions : 'top-right',
+    reverseGeocodeOptions : 'top-right',
+    fullscreenOptions : 'bottom-right',
+    measureLengthOptions : 'top-right',
+    measureAreaOptions : 'top-right',
+    measureAzimuthOptions : 'top-right',
+    elevationPathOptions : 'top-right',
+    layerImportOptions : 'top-right',
+    mousePositionOptions : 'top-right'
+  }
+}
+
+export function useControlsPosition() {
+  let leftC = []
+  let rightC = []
+  // Share
+  if (useControlsExtensionPosition().shareOptions.includes("left"))
+    leftC.push(useControls.Share.id)
+  if (useControlsExtensionPosition().shareOptions.includes("right"))
+    rightC.push(useControls.Share.id)
+  // Print
+  if (useControlsExtensionPosition().printOptions.includes("left"))
+    leftC.push(useControls.Print.id)
+  if (useControlsExtensionPosition().printOptions.includes("right"))
+    rightC.push(useControls.Print.id)
+  // LayerSwitcher
+  if (useControlsExtensionPosition().layerSwitcherOptions.includes("left"))
+    leftC.push(useControls.LayerSwitcher.id)
+  if (useControlsExtensionPosition().layerSwitcherOptions.includes("right"))
+    rightC.push(useControls.LayerSwitcher.id)
+  // Legends
+  if (useControlsExtensionPosition().legendsOptions.includes("left"))
+    leftC.push(useControls.Legends.id)
+  if (useControlsExtensionPosition().legendsOptions.includes("right"))
+    rightC.push(useControls.Legends.id)  
+  // Route
+  if (useControlsExtensionPosition().routeOptions.includes("left"))
+    leftC.push(useControls.Route.id)
+  if (useControlsExtensionPosition().routeOptions.includes("right"))
+    rightC.push(useControls.Route.id)    
+  // Isocurve
+  if (useControlsExtensionPosition().isocurveOptions.includes("left"))
+    leftC.push(useControls.Isocurve.id)
+  if (useControlsExtensionPosition().isocurveOptions.includes("right"))
+    rightC.push(useControls.Isocurve.id) 
+  // ReverseGeocode
+  if (useControlsExtensionPosition().reverseGeocodeOptions.includes("left"))
+    leftC.push(useControls.ReverseGeocode.id)
+  if (useControlsExtensionPosition().reverseGeocodeOptions.includes("right"))
+    rightC.push(useControls.ReverseGeocode.id) 
+  // GetFeatureInfo
+  if (useControlsExtensionPosition().getFeatureInfoOptions.includes("left"))
+    leftC.push(useControls.GetFeatureInfo.id)
+  if (useControlsExtensionPosition().getFeatureInfoOptions.includes("right"))
+    rightC.push(useControls.GetFeatureInfo.id)  
+  // Territories
+  if (useControlsExtensionPosition().territoriesOptions.includes("left"))
+    leftC.push(useControls.Territories.id)
+  if (useControlsExtensionPosition().territoriesOptions.includes("right"))
+    rightC.push(useControls.Territories.id) 
+  // MeasureLength
+  if (useControlsExtensionPosition().measureLengthOptions.includes("left"))
+    leftC.push(useControls.MeasureLength.id)
+  if (useControlsExtensionPosition().measureLengthOptions.includes("right"))
+    rightC.push(useControls.MeasureLength.id) 
+  // MeasureArea
+  if (useControlsExtensionPosition().measureAreaOptions.includes("left"))
+    leftC.push(useControls.MeasureArea.id)
+  if (useControlsExtensionPosition().measureAreaOptions.includes("right"))
+    rightC.push(useControls.MeasureArea.id) 
+  // MeasureAzimuth
+  if (useControlsExtensionPosition().measureAzimuthOptions.includes("left"))
+    leftC.push(useControls.MeasureAzimuth.id)
+  if (useControlsExtensionPosition().measureAzimuthOptions.includes("right"))
+    rightC.push(useControls.MeasureAzimuth.id) 
+  // MousePosition
+  if (useControlsExtensionPosition().mousePositionOptions.includes("left"))
+    leftC.push(useControls.MousePosition.id)
+  if (useControlsExtensionPosition().mousePositionOptions.includes("right"))
+    rightC.push(useControls.MousePosition.id) 
+  // ElevationPath
+  if (useControlsExtensionPosition().elevationPathOptions.includes("left"))
+    leftC.push(useControls.ElevationPath.id)
+  if (useControlsExtensionPosition().elevationPathOptions.includes("right"))
+    rightC.push(useControls.ElevationPath.id) 
+  // LayerImport
+  if (useControlsExtensionPosition().layerImportOptions.includes("left"))
+    leftC.push(useControls.LayerImport.id)
+  if (useControlsExtensionPosition().layerImportOptions.includes("right"))
+    rightC.push(useControls.LayerImport.id) 
+  // ControlList
+  if (useControlsExtensionPosition().controlListOptions.includes("left"))
+    leftC.push(useControls.ControlList.id)
+  if (useControlsExtensionPosition().controlListOptions.includes("right"))
+    rightC.push(useControls.ControlList.id) 
+
+  return {
+    left : leftC,
+    right : rightC
+  }
+}
\ No newline at end of file
diff --git a/src/icons.ts b/src/icons.ts
index baa1bce..c6ae540 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -6,6 +6,8 @@ export {
   RiHome4Line,
   RiRefreshLine,
   RiQuestionMark,
+  RiMenuFill,
+  RiBookmarkLine
 } from 'oh-vue-icons/icons/ri/index.js'
 
 export {
diff --git a/src/iconscustom.ts b/src/iconscustom.ts
index 354323d..6bc55e3 100644
--- a/src/iconscustom.ts
+++ b/src/iconscustom.ts
@@ -10,5 +10,79 @@ export let customIcons = {
         width: 24,
         height: 24,
         raw: "<path d='M5.32894 3.27158C6.56203 2.8332 7.99181 3.10749 8.97878 4.09446C10.0997 5.21537 10.3014 6.90741 9.58381 8.23384L20.2925 18.9437L18.8783 20.358L8.16933 9.64875C6.84276 10.3669 5.1502 10.1654 4.02903 9.04421C3.04178 8.05696 2.76761 6.62665 3.20652 5.39332L5.44324 7.63C6.02903 8.21578 6.97878 8.21578 7.56456 7.63C8.15035 7.04421 8.15035 6.09446 7.56456 5.50868L5.32894 3.27158ZM15.6963 5.15512L18.8783 3.38735L20.2925 4.80157L18.5247 7.98355L16.7569 8.3371L14.6356 10.4585L13.2214 9.04421L15.3427 6.92289L15.6963 5.15512ZM8.97878 13.2869L10.393 14.7011L5.08969 20.0044C4.69917 20.3949 4.066 20.3949 3.67548 20.0044C3.31285 19.6418 3.28695 19.0699 3.59777 18.6774L3.67548 18.5902L8.97878 13.2869Z'/>"
+      },
+      LayerImport : {
+        name : "LayerImport",
+        width: 24,
+        height: 24,
+        raw: "<path d='M15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM13 12V16H11V12H8L12 8L16 12H13Z'/>"
+    },
+      OverviewMap: {
+        id: 'OverviewMap',
+        width: 24,
+        height: 24,
+        raw: "<path d='M2 5L9 2L15 5L21.303 2.2987C21.5569 2.18992 21.8508 2.30749 21.9596 2.56131C21.9862 2.62355 22 2.69056 22 2.75827V19L15 22L9 19L2.69696 21.7013C2.44314 21.8101 2.14921 21.6925 2.04043 21.4387C2.01375 21.3765 2 21.3094 2 21.2417V5ZM15 19.7639V7.17594L14.9352 7.20369L9 4.23607V16.8241L9.06476 16.7963L15 19.7639Z' />"
+      },
+      Isocurve: {
+        id: 'Isocurve',
+        width: 24,
+        height: 24,
+        raw: "<path d='M13 11V6H11V13H17V11H13ZM18.364 17.364L12 23.7279L5.63604 17.364C2.12132 13.8492 2.12132 8.15076 5.63604 4.63604C9.15076 1.12132 14.8492 1.12132 18.364 4.63604C21.8787 8.15076 21.8787 13.8492 18.364 17.364Z' />"
+      },
+      ReverseGeocode: {
+        id: 'ReverseGeocode',
+        width: 24,
+        height: 24,
+        raw: "<path id='Ic&#195;&#180;ne' d='M17.2073 2.29291L15.793 3.70712L18.0859 6.00002H13.0002V8.00001H18.0859L15.793 10.2929L17.2073 11.7071L21.9144 7.00001L17.2073 2.29291ZM7.00015 11.5C9.48543 11.5 11.5002 9.4853 11.5002 7.00001C11.5002 4.51473 9.48543 2.50001 7.00015 2.50001C4.51487 2.50001 2.50015 4.51473 2.50015 7.00001C2.50015 9.4853 4.51487 11.5 7.00015 11.5ZM5.91436 18L8.20726 20.2929L6.79304 21.7071L2.08594 17L6.79304 12.2929L8.20726 13.7071L5.91436 16H11.0002V18H5.91436ZM14.0002 13C13.4479 13 13.0002 13.4477 13.0002 14V20C13.0002 20.5523 13.4479 21 14.0002 21H20.0002C20.5524 21 21.0002 20.5523 21.0002 20V14C21.0002 13.4477 20.5524 13 20.0002 13H14.0002Z' />"
+      },
+      Route: {
+        id: 'Route',
+        width: 24,
+        height: 24,
+        raw: "<path d='M12.0001 3.5148L3.5148 12.0001L12.0001 20.4854L20.4854 12.0001L12.0001 3.5148ZM12.7072 1.39348L22.6067 11.293C22.9972 11.6835 22.9972 12.3167 22.6067 12.7072L12.7072 22.6067C12.3167 22.9972 11.6835 22.9972 11.293 22.6067L1.39348 12.7072C1.00295 12.3167 1.00295 11.6835 1.39348 11.293L11.293 1.39348C11.6835 1.00295 12.3167 1.00295 12.7072 1.39348ZM13.0001 10.0001V7.50008L16.5001 11.0001L13.0001 14.5001V12.0001H10.0001V15.0001H8.00008V11.0001C8.00008 10.4478 8.4478 10.0001 9.00008 10.0001H13.0001Z' />"
+      },
+      MeasureLength: {
+        id: 'MeasureLength',
+        width: 24,
+        height: 24,
+        raw: ""
+      },
+      MeasureArea: {
+        id: 'MeasureArea',
+        width: 24,
+        height: 24,
+        raw: ""
+      },
+      MeasureAzimuth: {
+        id: 'MeasureAzimuth',
+        width: 24,
+        height: 24,
+        raw: ""
+      },
+      Share: {
+        id: 'Share',
+        width: 24,
+        height: 24,
+        raw: ""
+      },
+      MousePosition: {
+        id: 'MousePosition',
+        width: 24,
+        height: 24,
+        raw: `<path d='M11 18.43C11 18.21 11.01 18 11.03 17.78L9.06 16.8L9 16.83V4.24L14.94 7.21L15 7.18V12.11C15.91 11.68 16.92 11.43 18 11.43C19.49 11.43 20.87 11.9 22 12.69V2.76C22 2.69 21.99 2.63 21.96 2.56C21.85 2.31 21.56 2.19 21.3 2.3L15 5L9 2L2 5V21.24C2 21.31 2.01 21.37 2.04 21.44C2.15 21.69 2.44 21.81 2.7 21.7L9 19L11.21 20.11C11.08 19.57 11 19.01 11 18.43Z' />
+<path d='M21.83 17.79L15.45 13.27C15.23 13.12 14.93 13.27 14.93 13.57L15.67 21.36C15.67 21.66 16.11 21.73 16.26 21.51L17.45 19.43L18.64 21.51C18.79 21.81 19.16 21.95 19.46 21.95C19.61 21.95 19.76 21.88 19.9 21.8C20.34 21.5 20.49 20.98 20.27 20.54L19.08 18.46H21.53C21.9 18.39 22.05 18.02 21.83 17.79Z' />
+        `
+      },
+      Territories: {
+        id: 'Territories',
+        width: 21,
+        height: 21,
+        raw: `<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6479 0.985495C11.9419 0.913591 12.2514 1.02796 12.4188 1.2697L12.6352 1.58055H12.7477C13.0651 1.58055 13.3401 1.78064 13.4316 2.07887L13.4708 2.20445C13.6337 2.2391 13.7792 2.32883 13.8819 2.45781C13.9464 2.47003 14.0085 2.49106 14.0679 2.5207L14.3547 2.66111C14.4793 2.72319 14.5799 2.81573 14.6487 2.92829L14.8847 2.87261C15.093 2.82134 15.3208 2.87021 15.4935 3.0032C15.667 3.13739 15.7665 3.33828 15.7665 3.55439V3.80515L16.2513 4.12741C16.3612 4.12121 16.4753 4.14083 16.5788 4.1857L16.6566 4.21875L16.7556 4.17889C16.9089 4.1184 17.0773 4.11019 17.2313 4.15545L17.6196 4.26962C17.7561 4.30988 17.8762 4.38819 17.9664 4.49635L18.2469 4.83223L18.6197 4.79477C18.7695 4.78236 18.9063 4.8094 19.0294 4.87389L19.2564 4.99386L19.5872 4.99967C19.7197 5.00247 19.8479 5.04053 19.9583 5.10983L20.2468 5.28889C20.5594 5.48457 20.6688 5.88835 20.4963 6.20861L20.1853 6.78724L20.1694 6.96109C20.1639 7.01757 20.1527 7.06945 20.1351 7.12072L19.9128 7.75083L19.9302 8.79553C19.9344 9.00743 19.8411 9.20792 19.6739 9.34492L19.2665 9.6782C19.1952 9.73628 19.1127 9.78015 19.0243 9.80779L18.3247 10.6927C18.5644 10.7521 18.7634 10.9306 18.8363 11.1748L18.9125 11.4305L19.0098 11.5507L19.2385 11.885C19.4036 12.1289 19.3971 12.4502 19.2226 12.6861L19.4927 13.0026C19.6078 13.1392 19.6664 13.3104 19.658 13.4855L19.6386 13.85C19.6266 14.0571 19.521 14.2474 19.3579 14.3703L19.4085 14.4176C19.5653 14.5634 19.6454 14.7699 19.6272 14.9832C19.6151 15.126 19.5598 15.2594 19.469 15.3682L19.5539 15.4261L19.6441 15.3946C19.9941 15.274 20.3758 15.4311 20.532 15.7599L20.6494 16.0097C20.7588 16.244 20.7284 16.5172 20.5704 16.7223L20.531 16.7772C20.5685 17.0176 20.4761 17.2603 20.2827 17.4191L19.5625 18.0054L19.2505 18.2019C19.255 18.3102 19.2338 18.4192 19.1879 18.5191C19.1113 18.688 18.9643 18.8226 18.7855 18.8878L18.1548 19.1162C18.0969 19.1358 18.0524 19.1468 18.006 19.153L17.5336 19.2191C17.444 19.2317 17.3495 19.2273 17.2604 19.2055L16.2903 18.9836L15.6446 18.7989C15.6276 18.7941 15.6111 18.7887 15.595 18.7827C15.4472 18.8011 15.2973 18.7739 15.1662 18.7048L14.9441 18.5844C14.7628 18.6209 14.5732 18.5874 14.4164 18.4893L13.8078 18.8486L13.6163 19.2295L13.8025 19.8721C13.8544 20.0531 13.8297 20.2494 13.7355 20.4112C13.6441 20.5709 13.4861 20.691 13.3023 20.7403L12.5337 20.9408C12.479 20.9558 12.4147 20.9642 12.3502 20.9642L12.2479 20.9564L11.6042 20.8439L11.3123 20.9023C11.16 20.9318 11.0001 20.9128 10.8621 20.8485L10.5183 20.6846C10.3389 20.5993 10.2039 20.4425 10.1463 20.257L9.8644 20.1439L9.7464 20.1188C9.7217 20.1485 9.69475 20.1757 9.66535 20.2011C9.50877 20.3361 9.30074 20.3976 9.09434 20.3684L7.87861 20.2075C7.78204 20.1949 7.69099 20.1635 7.60729 20.1144L7.4017 19.9954H7.09282C6.89663 19.9954 6.70718 19.9151 6.57284 19.7749L6.3644 19.5578L5.66784 19.264C5.52595 19.2041 5.4055 19.0981 5.32894 18.9658L5.18685 18.7208L4.88899 18.5598C4.7024 18.4578 4.57276 18.283 4.53213 18.0793C4.49232 17.8726 4.54663 17.6621 4.68116 17.5011L5.145 16.9475L5.40223 15.5681C5.40795 15.5368 5.41611 15.506 5.42612 15.4755C5.38631 15.3716 5.37243 15.2596 5.3859 15.1471L5.59863 13.3252C5.60251 13.2916 5.60884 13.2581 5.61761 13.2255C5.56004 13.1244 5.52819 13.0096 5.52656 12.893C5.5237 12.6937 5.60741 12.5029 5.75623 12.3681C5.71867 12.2986 5.69376 12.2263 5.68131 12.1516L5.35344 11.9865C5.25626 11.9376 5.17052 11.8665 5.10601 11.7808L4.54724 11.053C4.4864 10.9737 4.44414 10.8845 4.42148 10.788L4.25571 10.0509L4.25387 10.0425L4.17977 9.99225C4.11811 9.95059 4.06381 9.89992 4.01808 9.84143L3.77738 9.52878L2.43467 9.00503H2.04861C1.79587 9.00503 1.55946 8.87204 1.43187 8.65773L1.26773 8.38314C1.1779 8.23432 1.14973 8.05586 1.18464 7.88762C1.05623 7.8011 0.959459 7.67832 0.909442 7.53772L0.754286 7.09969C0.633835 6.7588 0.793891 6.38706 1.12666 6.23445L2.14375 5.76878C2.22582 5.73252 2.30401 5.71229 2.38526 5.70568L3.78595 5.58211C4.00705 5.56829 4.21345 5.64319 4.35962 5.7892L4.6189 6.04778L4.67341 6.02675C4.79978 5.97848 4.93574 5.96606 5.06661 5.99049L5.25422 6.02374L5.00087 5.42789L4.81141 4.671C4.7614 4.4679 4.80468 4.2556 4.93044 4.08816C5.05599 3.91952 5.25136 3.81577 5.46613 3.80395L6.04021 3.77531C6.23252 3.75668 6.44994 3.841 6.59836 3.99663L7.09078 4.51557L7.72998 4.63935L7.73672 4.55984C7.75979 4.28224 7.94883 4.04449 8.21852 3.95457L9.4316 3.54638L9.75702 3.25436L9.71067 2.54454C9.70373 2.43017 9.72496 2.31581 9.77192 2.21266L10.0255 1.66748C10.1153 1.4746 10.2866 1.3336 10.4952 1.28012L11.6479 0.985495ZM11.4597 2.96423L11.1295 3.045L11.0939 3.11825L11.1491 3.93344C11.1623 4.13386 11.0797 4.32582 10.9223 4.46068L10.2494 5.0392C10.1766 5.10156 10.0928 5.14796 10.0004 5.17707L9.26324 5.41449L9.49064 5.5717L9.20764 5.70713C9.14964 5.86904 9.02524 6.00616 8.86123 6.08448L8.37823 6.3157C8.23722 6.38144 8.07762 6.40248 7.92742 6.37524L6.73721 6.15511C6.73741 6.15717 6.73761 6.15924 6.73781 6.1613L6.79481 6.95977C6.81901 7.30219 6.5652 7.60028 6.2046 7.65343L5.9006 7.69795C5.82199 7.70922 5.74279 7.70847 5.66519 7.69475L5.07639 7.59464L4.77738 7.70471C4.51438 7.80088 4.21777 7.74115 4.02177 7.55294L3.67597 7.22311L2.75256 7.30087L2.71436 7.3174C2.86376 7.4487 2.94336 7.63371 2.93556 7.82267C2.93876 7.82379 2.94196 7.82511 2.94516 7.82624L4.57158 8.43349C4.69538 8.48139 4.79578 8.55389 4.87218 8.64931L5.07859 8.90608C5.21479 8.89556 5.35359 8.92204 5.47479 8.9844L5.87299 9.18933C6.0334 9.27216 6.1528 9.41172 6.206 9.57419L6.75941 9.85876L6.1644 10.0556C6.0966 10.1846 5.985 10.2902 5.84819 10.3544L6.1982 10.7906L6.81381 11.0872C7.10041 11.2262 7.24921 11.5282 7.17621 11.8218L7.16941 11.8494L7.30281 12.0861C7.40961 12.2754 7.40981 12.4968 7.31361 12.682L7.37021 12.7264C7.47341 12.8092 7.54802 12.9136 7.58762 13.0297L7.97462 14.1295C8.03302 14.2912 8.01902 14.4704 7.93862 14.6246L8.20122 15.3705L7.47922 14.9728C7.38981 14.9937 7.29701 14.9978 7.20681 14.985C7.18821 15.0468 7.16001 15.1066 7.12241 15.1618L6.81721 15.6131L6.5572 16.9481C6.536 17.0583 6.4842 17.1626 6.4078 17.2491L6.3318 17.3361C6.3472 17.356 6.3614 17.3771 6.3744 17.3988L6.494 17.5961L7.09401 17.8384C7.18681 17.8774 7.26221 17.927 7.32701 17.9915L7.42361 18.088H7.61442C7.73762 18.088 7.85962 18.119 7.96682 18.1774L8.21802 18.3168L8.60163 18.3651C8.63963 18.3132 8.68563 18.2663 8.73803 18.2261C8.90323 18.1019 9.11464 18.0538 9.31884 18.0919L10.2991 18.3004L10.9889 18.5634C11.1545 18.6282 11.2845 18.7456 11.3583 18.8914L11.3915 18.885C11.4373 18.876 11.4847 18.8716 11.5317 18.8716L11.6347 18.8793L12.1411 18.9642L12.0915 18.8001C12.0439 18.64 12.0611 18.4717 12.1393 18.3252L12.5357 17.5722C12.5947 17.459 12.6877 17.3643 12.8043 17.2989L13.9689 16.641C14.1743 16.5228 14.4279 16.5149 14.6409 16.615C14.8087 16.5264 14.9999 16.5059 15.1813 16.5555L15.4363 16.6287C15.4475 16.6321 15.4587 16.6355 15.4697 16.6395C15.6911 16.5546 15.9455 16.5808 16.1437 16.7155L16.5237 16.9744C16.6243 17.0423 16.7033 17.1344 16.7531 17.2398L17.2819 17.3547L17.5435 17.32L17.5959 17.3016C17.6213 17.2409 17.6565 17.1836 17.6997 17.1325L17.9283 16.8641C17.9789 16.8057 18.0341 16.7595 18.0979 16.7212L18.539 16.4558L18.7144 16.3175L18.1421 15.9443C17.9565 15.8239 17.8441 15.625 17.8413 15.4124L17.8319 14.7756L17.5937 14.5619C17.4563 14.4407 17.3769 14.267 17.3769 14.0865V13.8549C17.3769 13.5902 17.5443 13.353 17.8035 13.2495L17.7105 13.1452C17.6125 13.0337 17.5569 12.9009 17.5487 12.7602L17.5299 12.4694C17.5283 12.4422 17.5285 12.4151 17.5301 12.3883C17.4437 12.4452 17.3437 12.4839 17.2385 12.4997C17.0519 12.5271 16.8577 12.4822 16.7063 12.3753L16.5045 12.2305C16.2589 12.0547 16.1647 11.7427 16.2757 11.4715L16.3821 11.2121L16.4117 10.8781C16.4213 10.7703 16.4595 10.6657 16.5219 10.5751L16.9687 9.93407L17.4303 9.37378C17.4193 9.29695 17.4227 9.21844 17.4409 9.14237C17.4857 8.95266 17.6167 8.79206 17.8003 8.70209L18.0383 8.58582C18.1171 8.54713 18.2027 8.52328 18.2897 8.51482L18.2779 7.82586C18.2765 7.74716 18.2899 7.66959 18.3181 7.5952L18.5446 6.981L18.5652 6.76668C18.5706 6.71052 18.5838 6.65567 18.604 6.60271C18.5756 6.59256 18.5478 6.58073 18.5212 6.56702L18.3421 6.47648L17.8161 6.5272C17.5675 6.54391 17.3471 6.4562 17.2017 6.28809L16.8537 5.88857L16.7483 5.92896C16.5757 5.99601 16.3773 5.99432 16.2051 5.92426L16.0151 5.84706L15.9621 5.85119C15.8057 5.86303 15.6477 5.82433 15.5187 5.74469L14.6581 5.19698C14.6079 5.16524 14.5623 5.12711 14.5227 5.08428C14.4563 5.09067 14.3887 5.08785 14.3223 5.07583L13.8619 4.99656C13.5577 4.94416 13.3233 4.70561 13.2921 4.41635L13.2805 4.31042C13.0857 4.27586 12.9109 4.16353 12.8063 3.99693L12.7963 3.98096C12.6867 3.95542 12.5841 3.90508 12.4997 3.83464L12.3283 3.69151C12.2851 3.65526 12.2473 3.61526 12.2153 3.57112C12.0079 3.55553 11.8167 3.45335 11.6953 3.28787L11.4597 2.96423Z"/>`
+      },
+      ElevationPath: {
+        id: 'ElevationPath',
+        width: 19,
+        height: 18,
+        raw: `<path d="M2 0V16H18V18H0V0H2ZM17.293 3.293L18.707 4.707L13 10.414L10 7.415L5.707 11.707L4.293 10.293L10 4.586L13 7.585L17.293 3.293Z"/>`
       }
 }
\ No newline at end of file
diff --git a/src/stores/menuStore.js b/src/stores/menuStore.js
new file mode 100644
index 0000000..aa5ae45
--- /dev/null
+++ b/src/stores/menuStore.js
@@ -0,0 +1,69 @@
+import {
+    defineStore
+  } from 'pinia';
+  
+
+export const useMapStore = defineStore('menu', () => {
+
+    const buttonWidth = ref(40)
+    const buttonHeight = ref(40)
+    const marginTop = ref(12)
+    const gutter = ref(4)
+
+
+    const leftControlsTop = computed(() => {
+        return  marginTop + (buttonHeight + gutter) * leftMenuCount
+    })
+    const rightControlsTop = computed(() => {
+        return  marginTop + (buttonHeight + gutter) * rightMenuCount
+    })
+
+    const leftMenuCount = ref(0)
+    const rightMenuCount = ref(0)
+
+    function setLeftMenuCount(val)  {
+        leftMenuCount.value = val
+    }
+    function setRightMenuCount(val)  {
+        rightMenuCount.value = val       
+    }
+    function getLeftMenuCount(val)  {
+        return leftMenuCount.value
+    }
+    function getRightMenuCount(val)  {
+        return rightMenuCount.value       
+    }
+    function toCssPixel(val) {
+        return val + 'px'
+    }
+    
+    return {
+        map,
+        zoom,
+        center,
+        x,
+        y,
+        lon,
+        lat,
+        firstVisit,
+        noInformation,
+        title,
+        comment,
+        info,
+        geolocation,
+        permalink,
+        permalinkShare,
+        getMap,
+        setMap,
+        getLayers,
+        cleanLayers,
+        addLayer,
+        removeLayer,
+        updateLayerProperty,
+        getLayerProperty,
+        getControls,
+        cleanControls,
+        addControl,
+        removeControl
+      }
+})
\ No newline at end of file