From 9b95cada56b75977d080a18bbbc8d937a315fe2c Mon Sep 17 00:00:00 2001
From: hcaillaud <hector.caillaud@ign.fr>
Date: Fri, 13 Dec 2024 14:29:21 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8C=9F=20control=20sur=20pluiseurs=20?=
 =?UTF-8?q?map?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carte/Carto.vue                |  3 ++-
 src/components/carte/Controls.vue             | 24 ++++++++++++++++++-
 src/components/carte/control/Attributions.vue |  5 ++--
 src/components/carte/control/ControlList.vue  |  5 ++--
 src/components/carte/control/Drawing.vue      |  5 ++--
 .../carte/control/ElevationPath.vue           |  5 ++--
 src/components/carte/control/FullScreen.vue   |  5 ++--
 .../carte/control/GetFeatureInfo.vue          |  5 ++--
 src/components/carte/control/Isocurve.vue     |  5 ++--
 src/components/carte/control/LayerImport.vue  |  5 ++--
 .../carte/control/LayerSwitcher.vue           |  4 ++--
 src/components/carte/control/Legends.vue      |  4 ++--
 src/components/carte/control/MeasureArea.vue  |  5 ++--
 .../carte/control/MeasureAzimuth.vue          |  5 ++--
 .../carte/control/MeasureLength.vue           |  5 ++--
 .../carte/control/MousePosition.vue           |  5 ++--
 src/components/carte/control/OverviewMap.vue  |  5 ++--
 src/components/carte/control/Print.vue        | 23 +++++++++++++++++-
 .../carte/control/ReverseGeocode.vue          |  5 ++--
 src/components/carte/control/Route.vue        |  5 ++--
 src/components/carte/control/ScaleLine.vue    |  5 ++--
 src/components/carte/control/SearchEngine.vue |  5 ++--
 src/components/carte/control/Share.vue        |  1 +
 src/components/carte/control/Territories.vue  |  5 ++--
 src/components/carte/control/Zoom.vue         |  4 ++--
 25 files changed, 108 insertions(+), 45 deletions(-)

diff --git a/src/components/carte/Carto.vue b/src/components/carte/Carto.vue
index bfa909c..3dbc2c7 100644
--- a/src/components/carte/Carto.vue
+++ b/src/components/carte/Carto.vue
@@ -61,7 +61,8 @@ const mapIsReady = computed(() => {
     <!-- Composant pour selectionner les widgets à afficher sur la carte -->
     <Controls
       v-if="mapIsReady"
-      :control-options="props.selectedControls"/>
+      :control-options="props.selectedControls"
+      :map-id="mainMap"/>
     <!-- Composant pour ajouter les couches sur la carte -->
     <Layers
       :map-Id="mainMap"
diff --git a/src/components/carte/Controls.vue b/src/components/carte/Controls.vue
index 97296ef..295ab31 100644
--- a/src/components/carte/Controls.vue
+++ b/src/components/carte/Controls.vue
@@ -41,7 +41,8 @@ import { useControls } from '@/composables/controls';
 import { useLogger } from 'vue-logger-plugin';
 
 const props = defineProps({
-  controlOptions: Array
+  controlOptions: Array,
+  mapId: String
 });
 
 // INFO
@@ -375,126 +376,147 @@ const layerImportOptions = {
     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)"
     :analytic="useControls.LayerSwitcher.analytic"
     :layer-switcher-options="layerSwitcherOptions"
+    :map-id="mapId"
   />
   <Legends
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Legends.id)"
     :analytic="useControls.Legends.analytic"
     :legends-options="legendsOptions"
+    :map-id="mapId"
   />
   <Route
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Route.id)"
     :analytic="useControls.Route.analytic"
     :route-options="routeOptions"
+    :map-id="mapId"
   />
   <Isocurve
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Isocurve.id)"
     :analytic="useControls.Isocurve.analytic"
     :isocurve-options="isocurveOptions"
+    :map-id="mapId"
   />
   <ReverseGeocode
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.ReverseGeocode.id)"
     :analytic="useControls.ReverseGeocode.analytic"
     :reverse-geocode-options="reverseGeocodeOptions"
+    :map-id="mapId"
   />
   <FullScreen
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.FullScreen.id)"
     :analytic="useControls.FullScreen.analytic"
     :fullscreen-options="fullscreenOptions"
+    :map-id="mapId"
   />
   <Zoom
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Zoom.id)"
     :analytic="useControls.Zoom.analytic"
     :zoom-options="zoomOptions"
+    :map-id="mapId"
   />
   <SearchEngine
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.SearchEngine.id)"
     :analytic="useControls.SearchEngine.analytic"
     :search-engine-options="searchEngineOptions"
+    :map-id="mapId"
   />
   <GetFeatureInfo
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.GetFeatureInfo.id)"
     :analytic="useControls.GetFeatureInfo.analytic"
     :get-feature-info-options="getFeatureInfoOptions"
+    :map-id="mapId"
   />
   <ScaleLine
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.ScaleLine.id)"
     :analytic="useControls.ScaleLine.analytic"
     :scale-line-options="scaleLineOptions"
+    :map-id="mapId"
   />
   <OverviewMap
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.OverviewMap.id)"
     :analytic="useControls.OverviewMap.analytic"
     :overview-map-options="overviewMapOptions"
+    :map-id="mapId"
   />
   <Territories
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Territories.id)"
     :analytic="useControls.Territories.analytic"
     :territories-options="territoriesOptions"
+    :map-id="mapId"
   />
   <MeasureLength
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.MeasureLength.id)"
     :analytic="useControls.MeasureLength.analytic"
     :measure-length-options="measureLengthOptions"
+    :map-id="mapId"
   />
   <MeasureArea
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.MeasureArea.id)"
     :analytic="useControls.MeasureArea.analytic"
     :measure-area-options="measureAreaOptions"
+    :map-id="mapId"
   />
   <MeasureAzimuth
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.MeasureAzimuth.id)"
     :analytic="useControls.MeasureAzimuth.analytic"
     :measure-azimuth-options="measureAzimuthOptions"
+    :map-id="mapId"
   />
   <MousePosition
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.MousePosition.id)"
     :analytic="useControls.MousePosition.analytic"
     :mouse-position-options="mousePositionOptions"
+    :map-id="mapId"
   />
   <Drawing
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Drawing.id)"
     :analytic="useControls.Drawing.analytic"
     :drawing-options="drawingOptions"
+    :map-id="mapId"
   />
   <ElevationPath
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.ElevationPath.id)"
     :analytic="useControls.ElevationPath.analytic"
     :elevation-path-options="elevationPathOptions"
+    :map-id="mapId"
   />
   <LayerImport
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.LayerImport.id)"
     :analytic="useControls.LayerImport.analytic"
     :layer-import-options="layerImportOptions"
+    :map-id="mapId"
   />
   <ControlList
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.ControlList.id)"
     :analytic="useControls.ControlList.analytic"
     :control-list-options="controlListOptions"
+    :map-id="mapId"
   />
 </template>
 
diff --git a/src/components/carte/control/Attributions.vue b/src/components/carte/control/Attributions.vue
index 7931c1b..5fd840b 100644
--- a/src/components/carte/control/Attributions.vue
+++ b/src/components/carte/control/Attributions.vue
@@ -7,13 +7,14 @@ import Attributions from 'ol/control/Attribution'
 // - tracker Eulerian !?
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   attributionsOptions: Object
 })
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const attributions = ref(new Attributions(props.attributionsOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/ControlList.vue b/src/components/carte/control/ControlList.vue
index 68b4154..ec4b799 100644
--- a/src/components/carte/control/ControlList.vue
+++ b/src/components/carte/control/ControlList.vue
@@ -5,10 +5,11 @@ import { useLogger } from 'vue-logger-plugin'
 import {
   ControlList
 } from 'geopf-extensions-openlayers'
-import { mainMap } from "@/composables/keys"
+
 
 import { selectedControls } from '@/composables/mapControls'
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   controlListOptions: Object
@@ -16,7 +17,7 @@ const props = defineProps({
 
 const log = useLogger()
 
-const map = inject(mainMap)
+const map = inject(props.mapId)
 const controlList = ref(new ControlList(props.controlListOptions))
 
 const isSmallScreen = useMatchMedia('SM')
diff --git a/src/components/carte/control/Drawing.vue b/src/components/carte/control/Drawing.vue
index 0a88733..fea93d3 100644
--- a/src/components/carte/control/Drawing.vue
+++ b/src/components/carte/control/Drawing.vue
@@ -1,15 +1,16 @@
 <script setup lang="js">
 import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { Drawing } from 'geopf-extensions-openlayers';
-import { mainMap } from "@/composables/keys"
+
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   drawingOptions: Object
 });
 
-const map = inject(mainMap)
+const map = inject(props.mapId)
 const drawing = ref(new Drawing(props.drawingOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/ElevationPath.vue b/src/components/carte/control/ElevationPath.vue
index 13ae493..f865cd6 100644
--- a/src/components/carte/control/ElevationPath.vue
+++ b/src/components/carte/control/ElevationPath.vue
@@ -6,6 +6,7 @@ import {
 } from 'geopf-extensions-openlayers'
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   elevationPathOptions: Object
@@ -13,8 +14,8 @@ const props = defineProps({
 
 const log = useLogger()
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const elevationPath = ref(new ElevationPath(props.elevationPathOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/FullScreen.vue b/src/components/carte/control/FullScreen.vue
index 448c71d..f7b82e0 100644
--- a/src/components/carte/control/FullScreen.vue
+++ b/src/components/carte/control/FullScreen.vue
@@ -5,13 +5,14 @@ import { GeoportalFullScreen } from 'geopf-extensions-openlayers'
 // ajouter un ID sur le bouton pour y ajouter un tracker Eulerian
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   fullscreenOptions: Object
 })
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const fullscreen = ref(new GeoportalFullScreen(props.fullscreenOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/GetFeatureInfo.vue b/src/components/carte/control/GetFeatureInfo.vue
index c07e766..d134712 100644
--- a/src/components/carte/control/GetFeatureInfo.vue
+++ b/src/components/carte/control/GetFeatureInfo.vue
@@ -6,6 +6,7 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { GetFeatureInfo } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   getFeatureInfoOptions: Object
@@ -13,8 +14,8 @@ const props = defineProps({
 
 const log = useLogger();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const getFeatureInfo = ref(new GetFeatureInfo(props.getFeatureInfoOptions));
 
 const isSmallScreen = useMatchMedia('SM')
diff --git a/src/components/carte/control/Isocurve.vue b/src/components/carte/control/Isocurve.vue
index 1b5816c..93e0260 100644
--- a/src/components/carte/control/Isocurve.vue
+++ b/src/components/carte/control/Isocurve.vue
@@ -7,6 +7,7 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { Isocurve } from 'geopf-extensions-openlayers'
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   isocurveOptions: Object
@@ -15,8 +16,8 @@ const props = defineProps({
 const log = useLogger()
 const store = useDataStore();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const isocurve = ref(new Isocurve(props.isocurveOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/LayerImport.vue b/src/components/carte/control/LayerImport.vue
index 3571417..0324908 100644
--- a/src/components/carte/control/LayerImport.vue
+++ b/src/components/carte/control/LayerImport.vue
@@ -6,6 +6,7 @@ import {
 } from 'geopf-extensions-openlayers'
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   layerImportOptions: Object
@@ -13,8 +14,8 @@ const props = defineProps({
 
 const log = useLogger()
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const layerImport = ref(new LayerImport(props.layerImportOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/LayerSwitcher.vue b/src/components/carte/control/LayerSwitcher.vue
index acb40e3..8e152de 100644
--- a/src/components/carte/control/LayerSwitcher.vue
+++ b/src/components/carte/control/LayerSwitcher.vue
@@ -12,6 +12,7 @@ import {
 import { LayerSwitcher } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   layerSwitcherOptions: Object
@@ -21,8 +22,7 @@ const log = useLogger();
 const mapStore = useMapStore();
 const dataStore = useDataStore();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+const map = inject(props.mapId)
 const layerSwitcher = ref(new LayerSwitcher(props.layerSwitcherOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/Legends.vue b/src/components/carte/control/Legends.vue
index 8703161..90acb6b 100644
--- a/src/components/carte/control/Legends.vue
+++ b/src/components/carte/control/Legends.vue
@@ -3,13 +3,13 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { Legends } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   legendsOptions: Object
 });
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+const map = inject(props.mapId);
 const legends = ref(new Legends(props.legendsOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/MeasureArea.vue b/src/components/carte/control/MeasureArea.vue
index e039e7f..3ce4516 100644
--- a/src/components/carte/control/MeasureArea.vue
+++ b/src/components/carte/control/MeasureArea.vue
@@ -3,13 +3,14 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { MeasureArea } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   measureAreaOptions: Object
 })
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const measureArea = ref(new MeasureArea(props.measureAreaOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/MeasureAzimuth.vue b/src/components/carte/control/MeasureAzimuth.vue
index 11a5107..1bd3dc3 100644
--- a/src/components/carte/control/MeasureAzimuth.vue
+++ b/src/components/carte/control/MeasureAzimuth.vue
@@ -3,13 +3,14 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { MeasureAzimuth } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   measureAzimuthOptions: Object
 })
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const measureAzimuth = ref(new MeasureAzimuth(props.measureAzimuthOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/MeasureLength.vue b/src/components/carte/control/MeasureLength.vue
index 3870c2b..e77d670 100644
--- a/src/components/carte/control/MeasureLength.vue
+++ b/src/components/carte/control/MeasureLength.vue
@@ -3,13 +3,14 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { MeasureLength } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   measureLengthOptions: Object
 })
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const measureLength = ref(new MeasureLength(props.measureLengthOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/MousePosition.vue b/src/components/carte/control/MousePosition.vue
index 6b1d698..1434d03 100644
--- a/src/components/carte/control/MousePosition.vue
+++ b/src/components/carte/control/MousePosition.vue
@@ -6,6 +6,7 @@ import {
 } from 'geopf-extensions-openlayers'
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   mousePositionOptions: Object
@@ -13,8 +14,8 @@ const props = defineProps({
 
 const log = useLogger()
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const mousePosition = ref(new MousePosition(props.mousePositionOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/OverviewMap.vue b/src/components/carte/control/OverviewMap.vue
index 748f18d..b1e0bc9 100644
--- a/src/components/carte/control/OverviewMap.vue
+++ b/src/components/carte/control/OverviewMap.vue
@@ -6,6 +6,7 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { GeoportalOverviewMap } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   overviewMapOptions: Object
@@ -13,8 +14,8 @@ const props = defineProps({
 
 const log = useLogger();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const overviewMap = ref(new GeoportalOverviewMap(props.overviewMapOptions));
 
 const isSmallScreen = useMatchMedia('SM')
diff --git a/src/components/carte/control/Print.vue b/src/components/carte/control/Print.vue
index 6b2ca75..aa045b8 100644
--- a/src/components/carte/control/Print.vue
+++ b/src/components/carte/control/Print.vue
@@ -21,6 +21,7 @@ import { jsPDF } from "jspdf";
 const eulerian = useEulerian();
 const mapStore = useMapStore();
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   printOptions: Object
 });
@@ -78,6 +79,7 @@ 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
@@ -85,6 +87,7 @@ const coeffPX2MM = 0.264583333
  *  {String} paperFormat - Format standard de papier
  *  {Object} dimension - Dimension du papier selon format choisi
  */
+const hasScale = ref(false)
 const hasTitle = ref(false)
 const printTitle = ref("Ma carte")
 const pageOrientation = ref("portrait");
@@ -248,6 +251,13 @@ onUpdated(() => {
       modalDOM.classList.remove("fr-container-md", "fr-container");
     }
 });
+
+
+const scaleLineOptions = {
+  id: "4",
+  units: 'metric',
+  bar: false,
+};
 </script>
 
 <template>
@@ -308,6 +318,12 @@ onUpdated(() => {
               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"
@@ -334,6 +350,11 @@ onUpdated(() => {
                 <Layers
                   :map-Id="printMap"
                   :selected-layers="selectedLayers"/>
+                  <ScaleLine
+                  :visibility="hasScale"
+                  :scale-line-options="scaleLineOptions"
+                  :map-id="printMap"
+                />
             </Map>
         </div>
         </div>    
@@ -451,7 +472,7 @@ onUpdated(() => {
 <style>
 /* hack pour surcharger le style modal dsfr */
   .modal-override {
-    max-width: 98vw;
+    max-width: 80vw;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
diff --git a/src/components/carte/control/ReverseGeocode.vue b/src/components/carte/control/ReverseGeocode.vue
index b5892a6..331d784 100644
--- a/src/components/carte/control/ReverseGeocode.vue
+++ b/src/components/carte/control/ReverseGeocode.vue
@@ -7,6 +7,7 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { ReverseGeocode } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   reverseGeocodeOptions: Object
@@ -15,8 +16,8 @@ const props = defineProps({
 const log = useLogger();
 const store = useDataStore();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const reverseGeocode = ref(new ReverseGeocode(props.reverseGeocodeOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/Route.vue b/src/components/carte/control/Route.vue
index 6906507..123f3d6 100644
--- a/src/components/carte/control/Route.vue
+++ b/src/components/carte/control/Route.vue
@@ -7,6 +7,7 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { Route } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   routeOptions: Object
@@ -15,8 +16,8 @@ const props = defineProps({
 const log = useLogger();
 const store = useDataStore();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const route = ref(new Route(props.routeOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/ScaleLine.vue b/src/components/carte/control/ScaleLine.vue
index 87cfd52..6d5c02a 100644
--- a/src/components/carte/control/ScaleLine.vue
+++ b/src/components/carte/control/ScaleLine.vue
@@ -7,13 +7,14 @@ import ScaleLine from 'ol/control/ScaleLine'
 // - tracker Eulerian ?
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   scaleLineOptions: Object
 })
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const scaleLine = ref(new ScaleLine(props.scaleLineOptions))
 
 onMounted(() => {
diff --git a/src/components/carte/control/SearchEngine.vue b/src/components/carte/control/SearchEngine.vue
index 6c0112c..2de2e76 100644
--- a/src/components/carte/control/SearchEngine.vue
+++ b/src/components/carte/control/SearchEngine.vue
@@ -12,6 +12,7 @@ import {
 // choisir où placer le tracker Eulerian sur ce widget !
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   searchEngineOptions: Object
@@ -22,8 +23,8 @@ const log = useLogger();
 const mapStore = useMapStore();
 const dataStore = useDataStore();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap);
+
+const map = inject(props.mapId);
 const searchEngine = ref(new SearchEngine(props.searchEngineOptions));
 
 onMounted(() => {
diff --git a/src/components/carte/control/Share.vue b/src/components/carte/control/Share.vue
index 6985066..4ce733c 100644
--- a/src/components/carte/control/Share.vue
+++ b/src/components/carte/control/Share.vue
@@ -21,6 +21,7 @@ const dataStore = useDataStore();
 const mapStore = useMapStore();
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   shareOptions: Object
 });
diff --git a/src/components/carte/control/Territories.vue b/src/components/carte/control/Territories.vue
index 29d9b55..8c3ea38 100644
--- a/src/components/carte/control/Territories.vue
+++ b/src/components/carte/control/Territories.vue
@@ -7,6 +7,7 @@ import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
 import { Territories } from 'geopf-extensions-openlayers';
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   territoriesOptions: Object
@@ -15,8 +16,8 @@ const props = defineProps({
 const log = useLogger();
 const store = useDataStore();
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+
+const map = inject(props.mapId)
 const territories = ref(new Territories(props.territoriesOptions));
 
 function addTerritories () {
diff --git a/src/components/carte/control/Zoom.vue b/src/components/carte/control/Zoom.vue
index 0234841..55762e5 100644
--- a/src/components/carte/control/Zoom.vue
+++ b/src/components/carte/control/Zoom.vue
@@ -8,6 +8,7 @@ import {
 // tracker Eulerian !?
 
 const props = defineProps({
+  mapId: String,
   visibility: Boolean,
   analytic: Boolean,
   zoomOptions: Object
@@ -15,8 +16,7 @@ const props = defineProps({
 
 const log = useLogger()
 
-import { mainMap } from "@/composables/keys"
-const map = inject(mainMap)
+const map = inject(props.mapId)
 const zoom = ref(new GeoportalZoom(props.zoomOptions))
 
 onMounted(() => {

From 38b4e34811a26a8e37b019bc56163ddcfff26f5f Mon Sep 17 00:00:00 2001
From: hcaillaud <hector.caillaud@ign.fr>
Date: Mon, 16 Dec 2024 13:35:47 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=91=20annotation=20+=20print=20sca?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carte/Map.vue           |  4 +-
 src/components/carte/control/Print.vue | 93 +++++++++++++++++++-------
 2 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/src/components/carte/Map.vue b/src/components/carte/Map.vue
index a19732b..e306e97 100644
--- a/src/components/carte/Map.vue
+++ b/src/components/carte/Map.vue
@@ -29,10 +29,10 @@ const mapRef = ref(null)
  * Map
  * default controls are removed (rotate, zoom and attributions)
  */
-const map = reactive(new Map({
+const map = new Map({
   target: props.mapId,
   controls: [] // on supprime les contrôles par defaut !
-  }))
+  })
 provide(props.mapId, map)
 
 onMounted(() => {
diff --git a/src/components/carte/control/Print.vue b/src/components/carte/control/Print.vue
index aa045b8..2914403 100644
--- a/src/components/carte/control/Print.vue
+++ b/src/components/carte/control/Print.vue
@@ -87,7 +87,7 @@ const coeffPX2MM = 0.264583333
  *  {String} paperFormat - Format standard de papier
  *  {Object} dimension - Dimension du papier selon format choisi
  */
-const hasScale = ref(false)
+const hasScale = ref(true)
 const hasTitle = ref(false)
 const printTitle = ref("Ma carte")
 const pageOrientation = ref("portrait");
@@ -197,11 +197,11 @@ const previewWidth = computed(() => {
     return ((dimension.value.height * coeff.value ) / coeffPX2MM) + "px";
 })
 
+
 /**
  * Fonction d'export de la carte
  */
 const exportPDF = () => {
-  console.log("export pdf")
   const opts = {
     orientation : pageOrientation.value,
     unit : "mm",
@@ -212,35 +212,67 @@ const exportPDF = () => {
   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
-  const addMapAndSavePDF = () => {
-    doc.addImage(img, 'PNG', imgPosX, imgPosY, imgWidth, imgHeight)
-    doc.save('carte.pdf')
-  }
-  if (!hasTitle.value || printTitle.value == "") {
-    addMapAndSavePDF()
-  }
-  else {
-    doc.html(
-      mapTitle.value, 
-      {
-        html2canvas : {
-          scale: coeff.value
-        },
-        callback: function(doc) {
-          addMapAndSavePDF()
-        }
-      }
-    )
+  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)
+
   }
-  /**
-   * On repart d'un canvas neuf donc il faut recalculer les widht height et position en fonction des paramètres
-   * 
-   */
+  doc.save('carte.pdf')
 }
 
 onUpdated(() => {
@@ -362,7 +394,16 @@ const scaleLineOptions = {
     </DsfrModal>
   </div>
 </template>
-
+<style>
+canvas.fixedoverlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>
 <style scoped>
   #print-button-position {
     position: absolute;