WIP

src/assets/main.css

@@ -105,7 +105,7 @@
   }
 
   .lux-caret {
-    @apply inline-block w-0 h-0 align-middle;
+    @apply inline-block w-0 h-0 align-middle ml-2;
     border-top: 4px dashed;
     border-top: 4px solid \9;
     border-right: 4px solid transparent;
@@ -162,6 +162,16 @@
   .lux-navbar-dropdown .lux-dropdown-list-item {
     @apply uppercase text-center;
   }
+
+  .lux-scale-line > div {
+    border: 2px solid grey;
+    border-top: none;
+    color: black;
+    cursor: default;
+    font-size: 12px;
+    text-align: center;
+    margin: 1px;
+  }
 }
 
 .fa-solid {

src/assets/ol.css

@@ -7,7 +7,8 @@
     @apply absolute rounded p-1;
   }
 
-  .ol-control button {
+  .ol-control > button,
+  .ol-control-button {
     @apply w-10 h-10 text-xl text-center font-normal indent-0 block lux-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-btn-ol)];
     font-family: 'geoportail-icons-wc';
   }
@@ -47,10 +48,10 @@
   }
 
   .lux-infobar-wrapper {
-    @apply lux-control-button bottom-12 absolute;
+    @apply lux-control-button bottom-2 absolute;
   }
 
   .lux-infobar-content {
-    @apply bg-white;
+    @apply bg-white flex;
   }
 }

src/components/common/dropdown-list.vue

@@ -7,7 +7,7 @@ const props = withDefaults(
   defineProps<{
     placeholder: string
     options: DropdownOptionModel[]
-    modelValue?: string
+    modelValue?: string | number
   }>(),
   {
     options: () => [{ label: 'Default label', value: 'Default value' }],

src/components/infobar-content/projection-selector.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useTranslation } from 'i18next-vue'
+
+import { PROJECTIONS } from '@/services/projection.utils'
+import { useMapStore } from '@/stores/map.store'
+import DropdownList from '@/components/common/dropdown-list.vue'
+
+const PROJECTIONS_OPTIONS = {
+  LUREF: PROJECTIONS.LUREF,
+  'Lon/Lat WGS84': PROJECTIONS.WGS84,
+  'Lon/Lat WGS84 DMS': PROJECTIONS.WGS84DMS,
+  'Lon/Lat WGS84 DM': PROJECTIONS.WGS84DM,
+  'WGS84 UTM 32|31': PROJECTIONS.WGS84UTM3231,
+} // legacy name is "projectionOptions"
+
+const { t } = useTranslation()
+const { viewZoom } = storeToRefs(useMapStore())
+const mapStore = useMapStore()
+const placeholder = computed(() => 'LUREF')
+const dropdownOptions = computed(() =>
+  Object.keys(PROJECTIONS_OPTIONS).map(projectionLabel => ({
+    label: projectionLabel,
+    value: PROJECTIONS_OPTIONS[projectionLabel],
+    ariaLabel: t(`Changer de projection : {{proj}}`, {
+      scale: PROJECTIONS_OPTIONS[projectionLabel],
+    }),
+  }))
+)
+
+function onChangeScale(scale: number) {
+  // mapStore.setViewZoom(scale)
+}
+</script>
+
+<template>
+  <dropdown-list
+    class="lux-dropdown min-w-[120px]"
+    :options="dropdownOptions"
+    :placeholder="placeholder"
+    @change="onChangeScale"
+  ></dropdown-list>
+</template>

src/components/infobar-content/scale-selector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTranslation } from 'i18next-vue'
 
@@ -48,9 +48,10 @@ function onChangeScale(scale: number) {
 
 <template>
   <dropdown-list
-    class="lux-dropdown"
+    class="lux-dropdown min-w-[120px]"
     :options="dropdownOptions"
     :placeholder="placeholder"
+    v-model="viewZoom"
     @change="onChangeScale"
   ></dropdown-list>
 </template>

src/components/map-controls/infobar-control.vue

@@ -5,7 +5,10 @@ import { CLASS_CONTROL, CLASS_UNSELECTABLE } from 'ol/css'
 import Control from 'ol/control/Control'
 
 import useControl from '@/composables/control/control.composable'
+import MouseCoordinatesControl from '@/components/map-controls/mouse-coordinates-control.vue'
+import ProjectionSelector from '@/components/infobar-content/projection-selector.vue'
 import ScaleSelector from '@/components/infobar-content/scale-selector.vue'
+import ScaleLineControl from '@/components/map-controls/scale-line-control.vue'
 
 const { t } = useTranslation()
 const props = withDefaults(
@@ -43,19 +46,20 @@ function onClickOpenBtn(event: MouseEvent) {
     :class="`${CLASS_UNSELECTABLE} ${CLASS_CONTROL}`"
   >
     <div ref="controlElement" :class="`${props.className}`">
-      <button :title="t(props.tipLabel)" @click="onClickOpenBtn">
+      <button
+        :title="t(props.tipLabel)"
+        @click="onClickOpenBtn"
+        class="ol-control-button"
+      >
         {{ props.label }}
       </button>
     </div>
 
     <div class="lux-infobar-content" :class="isOpen ? '' : 'hidden'">
-      <div class="scale-select hidden-3d w-auto">
-        <scale-selector />
-      </div>
-      <div class="scaleline-select hidden-3d">
-        <!-- <app-scaleline app-scaleline-map="::ctrl.map"></app-scaleline> -->
-      </div>
-      <!-- <app-projectionselector app-projectionselector-map="::ctrl.map"></app-projectionselector> -->
+      <scale-selector class="scale-select hidden-3d w-auto" />
+      <scale-line-control class="hidden-3d" />
+      <projection-selector />
+      <mouse-coordinates-control />
       <!-- <div ng-if="!ctrl.ngeoNetworkStatus.isDisconnected()" class="elevation-service hidden-xs hidden-sm">
           <app-elevation app-elevation-map="::ctrl.map" app-elevation-active="ctrl.infobarOpen"></app-elevation>
         </div> -->

src/components/map-controls/mouse-coordinates-control.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import MousePosition from 'ol/control/MousePosition'
+import { Coordinate, CoordinateFormat } from 'ol/coordinate'
+
+import useControl from '@/composables/control/control.composable'
+import { useMapStore } from '@/stores/map.store'
+import { PROJECTIONS, coordinatesToString } from '@/services/projection.utils'
+
+const { mapProjection } = storeToRefs(useMapStore())
+const controlElement = ref(null)
+const props = withDefaults(
+  defineProps<{
+    className?: string
+    coordinateFormat?: CoordinateFormat
+  }>(),
+  {
+    className: 'lux-mouse-coordinates',
+  }
+)
+let mousePositionControl: MousePosition
+
+watch(mapProjection, mapProjection =>
+  mousePositionControl.setCoordinateFormat(coordinateFormat(mapProjection))
+)
+
+// TODO: watch proj and set new format position
+
+function coordinateFormat(mapProjection?: string) {
+  return (coordinate: number[] | undefined) => {
+    if (mapProjection === PROJECTIONS.WGS84DMS) {
+      return coordinatesToString(
+        <Coordinate>coordinate,
+        mapProjection,
+        PROJECTIONS.WGS84,
+        true,
+        false
+      )
+    } else if (mapProjection === PROJECTIONS.WGS84DM) {
+      return coordinatesToString(
+        <Coordinate>coordinate,
+        mapProjection,
+        PROJECTIONS.WGS84,
+        false,
+        true
+      )
+    } else {
+      return coordinatesToString(
+        <Coordinate>coordinate,
+        mapProjection!,
+        mapProjection!,
+        false,
+        false
+      ) // TODO: verify return this.coordinateString_(
+      //         coord, mapEpsgCode, this['projection']['value'], false, false)
+    }
+
+    return ''
+  }
+}
+
+onMounted(() => {
+  if (controlElement.value) {
+    const newControl = useControl(MousePosition, {
+      className: props.className,
+      ...{ target: controlElement.value },
+    })
+    mousePositionControl = newControl.control as MousePosition
+    mousePositionControl.setCoordinateFormat(
+      coordinateFormat(mapProjection.value)
+    )
+    newControl.addControlToMap()
+  }
+})
+</script>
+
+<template>
+  <div ref="controlElement" class="p-3"></div>
+</template>

src/components/map-controls/scale-line-control.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import ScaleLine from 'ol/control/ScaleLine'
+
+import useControl from '@/composables/control/control.composable'
+
+const controlElement = ref(null)
+const props = withDefaults(
+  defineProps<{
+    className?: string
+  }>(),
+  {
+    className: 'lux-scale-line', // Default from ol:'ol-scale-line'
+  }
+)
+
+onMounted(() => {
+  if (controlElement.value) {
+    const scaleLineControl = useControl(ScaleLine, {
+      className: props.className,
+      ...{ target: controlElement.value },
+    })
+    scaleLineControl.addControlToMap()
+  }
+})
+</script>
+
+<template>
+  <div ref="controlElement" class="p-3"></div>
+</template>

src/composables/control/control.composable.ts

@@ -10,18 +10,23 @@ export default function useControl(ControlClass: typeof Control, options: any) {
   const map = useMap()
   const olMap = inject('olMap') as OlMap
 
-  onMounted(() => {
+  onMounted(() => addControlToMap())
+  onUnmounted(() => removeControlFromMap())
+
+  function addControlToMap() {
     olMap.addControl(control)
     olMap.changed()
-  })
+  }
 
-  onUnmounted(() => {
+  function removeControlFromMap() {
     const olMap = map.getOlMap()
     olMap.removeControl(control)
     olMap.changed()
-  })
+  }
 
   return {
     control,
+    addControlToMap,
+    removeControlFromMap,
   }
 }

src/composables/map/map.composable.ts

@@ -7,10 +7,6 @@ import type {
   MapContext,
 } from '@/stores/map.store.model'
 
-export const PROJECTION_WEBMERCATOR = 'EPSG:3857'
-export const PROJECTION_WGS84 = 'EPSG:4326'
-export const PROJECTION_LUX = 'EPSG:2169'
-
 let map: OlMap
 
 export default function useMap() {

src/composables/map/ol.composable.ts

@@ -13,7 +13,6 @@ import type { Layer, LayerId } from '@/stores/map.store.model'
 import useMap from './map.composable'
 import { VectorSourceDict } from '@/composables/mvt-styles/mvt-styles.model'
 import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service'
-import { PROJECTION_WEBMERCATOR, PROJECTION_WGS84 } from './map.composable'
 import { isHiDpi, stringToBoolean } from '@/services/utils'
 import { storageHelper } from '@/services/state-persistor/storage/storage.helper'
 import { SP_KEY_IPV6 } from '@/services/state-persistor/state-persistor.model'
@@ -22,15 +21,16 @@ import {
   TILE_MATRIX_IDS,
 } from '@/__fixtures__/wmts.fixture'
 import { useStyleStore } from '@/stores/style.store'
+import { PROJECTIONS } from '@/services/projection.utils'
 
 const proxyWmsUrl = 'https://map.geoportail.lu/ogcproxywms'
 export const remoteProxyWms = 'https://map.geoportail.lu/httpsproxy'
 
 function getOlcsExtent() {
   return transformExtent(
     [5.31, 49.38, 6.64, 50.21],
-    PROJECTION_WGS84,
-    PROJECTION_WEBMERCATOR
+    PROJECTIONS.WGS84,
+    PROJECTIONS.WEBMERCATOR
   )
 }
 
@@ -62,7 +62,7 @@ function createWmsLayer(layer: Layer): ImageLayer<ImageWMS> {
 function createWmtsLayer(layer: Layer): TileLayer<WMTS> {
   const { name, imageType, id } = layer
   const hasRetina = getLayerHasRetina(layer)
-  const projection = getProjection(PROJECTION_WEBMERCATOR)!
+  const projection = getProjection(PROJECTIONS.WEBMERCATOR)!
   const extent = projection!.getExtent()
 
   const olLayer = new TileLayer({

src/composables/map/ol.synchronizer.ts

@@ -21,6 +21,12 @@ export class OlSynchronizer {
     const styleService = useMvtStyles()
     const openLayers = useOpenLayers()
     const { appliedStyle } = storeToRefs(styleStore)
+    const { viewZoom } = storeToRefs(mapStore)
+
+    watch(
+      viewZoom,
+      viewZoom => viewZoom !== undefined && map.getView().setZoom(viewZoom)
+    )
 
     watch(
       () => mapStore.layers,
@@ -70,7 +76,6 @@ export class OlSynchronizer {
         openLayers.setBgLayer(map, bgLayer, styleStore.bgVectorSources)
     )
 
-    //const appliedStyle = computed(() =>
     watchEffect(() => {
       if (!styleStore.isExpertStyleActive) {
         // must ignore typing error (too deep)