Ajout du widget FullScreen et OverviewMap

package.json

@@ -17,7 +17,7 @@
     "@gouvminint/vue-dsfr": "^5.14.2",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
-    "geoportal-extensions-openlayers": "./geoportal-extensions-openlayers-1.0.0-beta.80.tgz",
+    "geoportal-extensions-openlayers": "./geoportal-extensions-openlayers-1.0.0-beta.81.tgz",
     "ol": "8.2.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

src/components/carte/Control.vue

@@ -1,5 +1,4 @@
 <script setup lang="js">
-
 import TileLayer from 'ol/layer/Tile.js'
 import OSM from 'ol/source/OSM'
 
@@ -18,11 +17,11 @@ const props = defineProps({
 })
 
 const layerSwitcherOptions = {
-  options : {
+  options: {
     // position : "top-right",
-    collapsed : true,
-    panel : true,
-    counter : true
+    collapsed: true,
+    panel: true,
+    counter: true
   }
 }
 
@@ -42,46 +41,35 @@ const searchEngineOptions = {
     search: true
   },
   searchOptions: {
-    addToMap : false,
-    serviceOptions : {
-      services: "WMTS,WMS,TMS"
+    addToMap: false,
+    serviceOptions: {
+      services: 'WMTS,WMS,TMS'
     }
   }
 }
 
 const overviewMapOptions = {
-  className: 'ol-overviewmap ol-custom-overviewmap',
-  collapseLabel: '',
-  label: '',
-  collapsed: true,
-  layers : [
-    new TileLayer({
-      source: new OSM(),
-    })
-  ]
+  position: 'bottom-left'
 }
 
 const zoomOptions = {
-  position : "bottom-right",
+  position: 'bottom-right',
 }
 
 const attributionsOptions = {}
 
-// FIXME exception
+// FIXME exception sur la position
 const isocurveOptions = {
-  position : "bottom-right"
+  position: 'bottom-right'
 }
 
 const reverseGeocodeOptions = {
-  position : "bottom-right"
+  position: 'bottom-right'
 }
 
 const fullscreenOptions = {
-  className: "ol-custom-full-screen",
-  label : "",
-  labelActive : ""
+  position: 'bottom-right'
 }
-
 </script>
 
 <template>
@@ -97,6 +85,10 @@ const fullscreenOptions = {
     :visibility="props.controlOptions.includes(useControls.ReverseGeocode.id)"
     :reverse-geocode-options="reverseGeocodeOptions"
   />
+  <FullScreen
+    :visibility="props.controlOptions.includes(useControls.FullScreen.id)"
+    :fullscreen-options="fullscreenOptions"
+  />
   <Zoom
     :visibility="props.controlOptions.includes(useControls.Zoom.id)"
     :zoom-options="zoomOptions"
@@ -117,20 +109,16 @@ const fullscreenOptions = {
     :visibility="props.controlOptions.includes(useControls.OverviewMap.id)"
     :overview-map-options="overviewMapOptions"
   />
-  <FullScreen
-    :visibility="props.controlOptions.includes(useControls.FullScreen.id)"
-    :fullscreen-options="fullscreenOptions"
-  />
 </template>
 
 <style>
-  .position-container-bottom-left, 
-  .position-container-bottom-right, 
-  .position-container-top-left, 
+  .position-container-bottom-left,
+  .position-container-bottom-right,
+  .position-container-top-left,
   .position-container-top-right {
     border-style: unset;
   }
   .position-container-top-right {
     top: 90px;
   }
-</style>
+</style>

src/components/carte/control/FullScreen.vue

@@ -1,14 +1,13 @@
 <script setup lang="js">
-
-import FullScreen from 'ol/control/FullScreen'
+import { GeoportalFullScreen } from 'geoportal-extensions-openlayers'
 
 const props = defineProps({
   visibility: Boolean,
   fullscreenOptions: Object
 })
 
 const map = inject('map')
-const fullscreen = ref(new FullScreen(props.fullscreenOptions)) 
+const fullscreen = ref(new GeoportalFullScreen(props.fullscreenOptions))
 
 onMounted(() => {
   if (props.visibility) {
@@ -24,27 +23,8 @@ onBeforeUpdate(() => {
     map.removeControl(fullscreen.value)
   }
 })
-
 </script>
 
 <template></template>
 
-<style>
-  #map .ol-custom-full-screen {
-    bottom: 54px;
-    left: 5px;
-  }
-
-  /* surcharge en mode dsfr */
-  .ol-custom-full-screen button {
-    height: 40px;
-    width: 40px;
-    background-color: #000091;
-    background-image: url("../../../assets/fullscreen.svg");
-    background-position: center center;
-    background-repeat: no-repeat;
-  }
-  .ol-custom-full-screen button:hover {
-    background-color: #1212ff;
-  }
-</style>
+<style></style>

src/components/carte/control/OverviewMap.vue

@@ -1,17 +1,19 @@
 <script setup lang="js">
-
-import { useMatchMedia } from '@/composables/matchMedia';
-import OverviewMap from 'ol/control/OverviewMap'
+import { useLogger } from 'vue-logger-plugin'
+import { GeoportalOverviewMap } from 'geoportal-extensions-openlayers'
+import { useMatchMedia } from '@/composables/matchMedia'
 
 const props = defineProps({
   visibility: Boolean,
   overviewMapOptions: Object
 })
 
+const log = useLogger()
+
 const map = inject('map')
-const overviewMap = ref(new OverviewMap(props.overviewMapOptions))
+const overviewMap = ref(new GeoportalOverviewMap(props.overviewMapOptions))
 
-const isSmallScreen =  useMatchMedia("SM")
+const isSmallScreen = useMatchMedia('SM')
 
 watch(isSmallScreen, () => {
   if (props.visibility && !isSmallScreen.value) {
@@ -20,11 +22,12 @@ watch(isSmallScreen, () => {
   else {
     map.removeControl(overviewMap.value)
   }
-})  
+})
 
 onMounted(() => {
   if (props.visibility && !isSmallScreen.value) {
     map.addControl(overviewMap.value)
+    overviewMap.value.on('overviewmap:toggle', onToggleOverviewMap)
   }
 })
 
@@ -37,26 +40,11 @@ onBeforeUpdate(() => {
   }
 })
 
+function onToggleOverviewMap (e) {
+  log.debug(e)
+}
 </script>
 
 <template></template>
 
-<style>
-  #map .ol-custom-overviewmap {
-    bottom: 10px;
-    left: 5px;
-  }
-
-  /* surcharge en mode dsfr */
-  .ol-custom-overviewmap button {
-    height: 40px;
-    width: 40px;
-    background-color: #000091;
-    background-image: url("../../../assets/map.svg");
-    background-position: center center;
-    background-repeat: no-repeat;
-  }
-  .ol-custom-overviewmap button:hover {
-    background-color: #1212ff;
-  }
-</style>
+<style></style>

src/components/carte/control/Zoom.vue

@@ -1,6 +1,6 @@
 <script setup lang="js">
-
-import { 
+import { useLogger } from 'vue-logger-plugin'
+import {
   GeoportalZoom
 } from 'geoportal-extensions-openlayers'
 
@@ -9,12 +9,16 @@ const props = defineProps({
   zoomOptions: Object
 })
 
+const log = useLogger()
+
 const map = inject('map')
 const zoom = ref(new GeoportalZoom(props.zoomOptions))
 
 onMounted(() => {
   if (props.visibility) {
     map.addControl(zoom.value)
+    zoom.value.on('zoom:in', onClickZoomIn)
+    zoom.value.on('zoom:out', onClickZoomOut)
   }
 })
 
@@ -29,10 +33,18 @@ onUpdated(() => {
     map.addControl(zoom.value)
   }
 })
+
+function onClickZoomIn (e) {
+  log.debug(e)
+}
+
+function onClickZoomOut (e) {
+  log.debug(e)
+}
 </script>
 
 <template></template>
 
 <style scoped>
   /* TODO style DSFR */
-</style>
+</style>