Fix sur les css + ajout TODO

src/components/carte/Map.vue

@@ -10,6 +10,7 @@ const mapRef = ref(0)
 
 /**
  * Map
+ * default controls are removed (rotate, zoom and attributions)
  */
 const map = new Map({
   controls: [] // on supprime les contrôles par defaut !
@@ -34,7 +35,7 @@ const onFocusOnMap = () => {
   mapRef.value.focus();
 }
 
-// rendre disponible 'map' aux composants enfannts imbriqués
+// rendre disponible 'map' aux composants enfants imbriqués
 provide('map', map)
 
 </script>
@@ -50,4 +51,10 @@ provide('map', map)
   </div>
 </template>
 
-<style scoped></style>
+<style>
+  #map {
+    margin-left: 0;
+    width: inherit;
+    height: 70vh;
+  }
+</style>

src/components/carte/View.vue

@@ -51,9 +51,6 @@ onMounted(() => {
 })
 </script>
 
-<template>
-  <div />
-</template>
+<template></template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/components/carte/control/Attributions.vue

@@ -31,4 +31,6 @@ onUpdated(() => {
 
 <template></template>
 
-<style scoped></style>
+<style scoped>
+  /* TODO style DSFR */
+</style>

src/components/carte/control/OverviewMap.vue

@@ -32,4 +32,11 @@ onUpdated(() => {
 
 <template></template>
 
-<style scoped></style>
+<style>
+  #map .ol-custom-overviewmap {
+    bottom: 30px;
+    left: auto;
+    right: 20px;
+    top: auto;
+  }
+</style>

src/components/carte/control/SearchEngine.vue

@@ -21,7 +21,7 @@ const searchEngine = ref(new SearchEngine(props.searchEngineOptions))
 onMounted(() => {
   if (props.visibility) {
     map.addControl(searchEngine.value)
-    // abonnement au widget
+    /** abonnement au widget */
     searchEngine.value.on("searchengine:search:click", onClickSearch);
   }
 })
@@ -51,4 +51,8 @@ const onClickSearch = (e) => {
 
 <template></template>
 
-<style scoped></style>
+<style>
+  div[id^="GPsearchEngine-"]{
+    left: 40vw;
+  }
+</style>

src/components/carte/control/Zoom.vue

@@ -31,4 +31,6 @@ onUpdated(() => {
 
 <template></template>
 
-<style scoped></style>
+<style scoped>
+  /* TODO style DSFR */
+</style>

src/composables/controls.ts

@@ -4,4 +4,5 @@ export const useControls = {
   ScaleLine: 'ScaleLine',
   Zoom: 'Zoom',
   // Attributions: 'Attributions'
+  // Rotate: 'Rotate'
 }

src/main.ts

@@ -15,8 +15,6 @@ import router from './router/index'
 import * as icons from './icons'
 
 import './main.css'
-import './assets/ol.css'
-import './assets/controls.css'
 
 addIcons(...Object.values(icons)) // Autoimporté grâce à ohVueIconAutoimportPreset dans vite.config.ts
 

src/views/Carto.vue

@@ -13,6 +13,8 @@ const store = useMapStore()
 store.setZoom(12)
 store.setCenter([-234814.550892, 4774562.534805])
 
+// TODO enregistrer la liste des couches dans le store & localStorage
+// TODO definir la couche par defaut ou les couches utilisateurs (localStorage)
 const layers = [
   new TileLayer({
     source: new OSM(),

tsconfig.app.json

@@ -8,6 +8,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "allowJs": true,
+    "noImplicitAny": false
   }
 }