feat(leaflet): remove leaflet, change to mapLibre (#468)

SocialGouv · Sep 10, 2024 · 0170a4b · 0170a4b
2 parents fe93f24 + 857262a
commit 0170a4b
Show file tree

Hide file tree

Showing 17 changed files with 462 additions and 118 deletions.
diff --git a/.env.dev.example.env b/.env.dev.example.env
@@ -15,7 +15,7 @@ PG_VAO_SUPERPASSWORD=postgres
 
 TZ=Europe/Paris
 
-# SMTP 
+# SMTP
 SMTP_HOST=maildev
 SMTP_PORT=1025
 SMTP_USER=[email protected]
@@ -58,4 +58,7 @@ API_INSEE_CLIENT_ID=""
 API_INSEE_URL="https://api.insee.fr"
 API_INSEE_URI="/entreprises/sirene/V3.11"
 
-ANTIVIRUS_URL="https://antivirus.fabrique.social.gouv.fr/vao/api/v1/scan"
+# https://cloud.maptiler.com/account/keys/
+API_MAP_TILER="dtDQE2ONXrpleRHWIyNC"
+
+ANTIVIRUS_URL="https://antivirus.fabrique.social.gouv.fr/vao/api/v1/scan"
diff --git a/.kontinuous/values.yaml b/.kontinuous/values.yaml
@@ -131,12 +131,12 @@ jobs:
       use: build
       envFrom:
         - secretRef:
-            name: "{{ or $.with.registrySecretRefName $.Values.global.registrySecretRefName }}"      
+            name: "{{ or $.with.registrySecretRefName $.Values.global.registrySecretRefName }}"
         - configMapRef:
             name: matomo
       with:
         imagePackage: frontend-usagers
-        context: ./ 
+        context: ./
         dockerfile: packages/frontend-usagers/Dockerfile
         buildArgs:
           NUXT_PUBLIC_BACKEND_URL: "https://api-{{ .Values.global.host }}"
@@ -145,6 +145,7 @@ jobs:
           NUXT_PUBLIC_MATOMO_SITE_ID: "${FRONTEND_USAGERS_MATOMO_SITE_ID}"
           NUXT_PUBLIC_SENTRY_DSN: "https://[email protected]/103"
           NUXT_PUBLIC_SENTRY_RELEASE: "{{.Values.global.branchSlug32}}-{{.Values.global.shortSha}}"
+          NUXT_PUBLIC_API_MAP_TILER: "g9IvoA8h0Ow8I9szhdzW"
           SENTRY_URL: "https://sentry.fabrique.social.gouv.fr"
           SENTRY_ORG: incubateur
           SENTRY_PROJECT: vao-usagers
@@ -157,7 +158,7 @@ jobs:
       use: build
       envFrom:
         - secretRef:
-            name: "{{ or $.with.registrySecretRefName $.Values.global.registrySecretRefName }}"      
+            name: "{{ or $.with.registrySecretRefName $.Values.global.registrySecretRefName }}"
         - configMapRef:
             name: matomo
       with:
@@ -171,6 +172,7 @@ jobs:
           NUXT_PUBLIC_MATOMO_SITE_ID: "${FRONTEND_BO_MATOMO_SITE_ID}"
           NUXT_PUBLIC_SENTRY_DSN: "https://[email protected]/104"
           NUXT_PUBLIC_SENTRY_RELEASE: "{{.Values.global.branchSlug32}}-{{.Values.global.shortSha}}"
+          NUXT_PUBLIC_API_MAP_TILER: "g9IvoA8h0Ow8I9szhdzW"
           SENTRY_URL: "https://sentry.fabrique.social.gouv.fr"
           SENTRY_ORG: incubateur
           SENTRY_PROJECT: vao-admin
@@ -210,7 +212,7 @@ jobs:
             secretKeyRef:
               name: pg-app
               key: PGDATABASE
-      
+
     init-db:
       ~needs: [pg]
       retry: 3
@@ -251,7 +253,7 @@ jobs:
         else
           echo "01-init : "
           psql -f /workspace/pg/scripts/01-init.sql
-          
+
           echo "Users creation : "
           psql -d $PGDATABASE -c "CREATE USER \"$PG_VAO_USER\" WITH password '$PG_VAO_PASSWORD'"
           psql -d $PGDATABASE -c "CREATE USER \"$PG_VAO_DOCUMENT_USER\" WITH password '$PG_VAO_DOCUMENT_PASSWORD'"

diff --git a/.talismanrc b/.talismanrc
@@ -1,6 +1,6 @@
 fileignoreconfig:
 - filename: .env.dev.example.env
-  checksum: dfd9f0258a5e81735c0b4aee57b7a9637ca6a9167b537e1bce8ee1fbe61f9e3a
+  checksum: 1e080a0322cbf88ef7699a975c648434a20b3c22b259d744a9ba1a003d671968
 - filename: .github/workflows/deactivate.yaml
   checksum: 0458870e0ed4b3cfbe94be2ce65a16e697f5a61bc5b4ad9a87818f4facc7a422
 - filename: .github/workflows/preproduction.yaml
@@ -87,6 +87,8 @@ fileignoreconfig:
   checksum: a9495759b787f06a1d8d5ff1bdb5fad2c9f3cf40e6fad67cad8dddf6fd3e6d15
 - filename: docker-compose.yaml
   checksum: a631fbf33a27c02362e3986094d5f674db98a3265c10c3f8aad9abad6dd43679
+- filename: package.json
+  checksum: 8437030cbab7db5734c16f9924b7e25a26b9145414d2bd1c81031d2f9f5558bd
 - filename: packages/backend/src/config.js
   checksum: c0baf7f4f878d3f3406030471f15c092ed9fc671b1e66276fe9b071ea025b58c
 - filename: packages/backend/src/controllers/authentication/email/forgotten-password.js
@@ -161,6 +163,10 @@ fileignoreconfig:
   checksum: 804991141c657357577a88be19580a02b64d7868cb69f034cc74e9be7ae8617f
 - filename: packages/frontend-bo/src/pages/connexion/reset-mot-de-passe.vue
   checksum: f544299c6795c35ca29f1ddd0babb1c840f7c25c72435b3c6b0939e0ea55d120
+- filename: packages/frontend-bo/src/pages/hebergements/[type]/[demandeSejourId]/[hebergementId].vue
+  checksum: ec721f5acc148b6156ea413f0f3045193d881df49300efffe04722d185f83a5e
+- filename: packages/frontend-bo/src/pages/hebergements/[type]/[hebergementId].vue
+  checksum: 712a9bb80aa048127944c8d4d189923207c77122e6eadc95631e3e01f6a28d17
 - filename: packages/frontend-bo/src/pages/sejours/[[idDemande]].vue
   checksum: e076b4e667aeda0b354d743dd92a8ae129c61a3fbdfc6bea4e39b603caa90791
 - filename: packages/frontend-bo/src/pages/sejours/[idDemande].vue
@@ -169,6 +175,8 @@ fileignoreconfig:
   checksum: 4716f6a0de6f2dc2af6d8ac8abf11a253a5a719c231df5ae51c783e6148c42ed
 - filename: packages/frontend-usagers/src/assets/Download.svg
   checksum: a5c2caf47b1b715b2cf8240e9af9090061faae6261b21bc62173689f1666536e
+- filename: packages/frontend-usagers/src/components/DS/hebergements-sejour-detail.vue
+  checksum: ea2516289eea24b6cf226322360163f840249383a5b30f5766ac730e52463162
 - filename: packages/frontend-usagers/src/components/DS/synthese.vue
   checksum: 1745df4066b3957901ec41d0b0e546cb5ed32dcc2abadcd1e825e06d092bd031
 - filename: packages/frontend-usagers/src/components/EIG/Recap.vue
@@ -181,6 +189,8 @@ fileignoreconfig:
   checksum: c9db57531db09ec221d07b3a695d81caef7948b109147ad47e605a00c33b5ae0
 - filename: packages/frontend-usagers/src/components/EIG/Type.vue
   checksum: fb6ea335f92549ebf30e662bca4d9cfbd654aac221aeba5b9714ef5bf4978dc3
+- filename: packages/frontend-usagers/src/components/HebergementWithSave.vue
+  checksum: 59d65c7e15f215c9bcb33eed7919c8a63a77b6fe9b83eb3b043e936310ca12f3
 - filename: packages/frontend-usagers/src/components/PasswordInput.vue
   checksum: 8513c95ff253eb7ef038d5cdd5aff7d09b478c31409ea5644cd0081afbf6428e
 - filename: packages/frontend-usagers/src/components/customInput.vue
@@ -229,8 +239,6 @@ fileignoreconfig:
   checksum: c358c5f8cf7a408173e9ff8d273f05c8e1a193c3369ec2389bfd713ff1bab716
 - filename: packages/shared/src/components/Chat.vue
   checksum: f2dbbf72bf098c7abd2c3aee230d220f5a5a106952883c0e116eb49f4f9d4db7
-- filename: packages/migrations/src/migrations/20240710125537_eig.js
-  checksum: c358c5f8cf7a408173e9ff8d273f05c8e1a193c3369ec2389bfd713ff1bab716
 - filename: packages/shared/src/components/PasswordInput.vue
   checksum: 6d60a6028edc072a3300ac06e693436bc38405cb5847bf32c5ef67448cb60ceb
 - filename: pg/scripts/01-init.sql

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -22,6 +22,7 @@ services:
       NUXT_PUBLIC_MATOMO_SITE_ID: ${FRONTEND_USAGERS_MATOMO_SITE_ID}
       NUXT_PUBLIC_SENTRY_DSN: ${FRONTEND_USAGERS_SENTRY_DSN}
       NUXT_PUBLIC_SENTRY_ENABLED: ${FRONTEND_USAGERS_SENTRY_ENABLED}
+      NUXT_PUBLIC_API_MAP_TILER: ${API_MAP_TILER}
     ports:
       - 3000:3000
     user: 1000:1000
@@ -45,6 +46,7 @@ services:
       NUXT_PUBLIC_SENTRY_ENABLED: ${FRONTEND_BO_SENTRY_ENABLED}
       NUXT_PUBLIC_BACKEND_URL: ${BACKEND_URL}
       NUXT_PUBLIC_ENVIRONMENT: local
+      NUXT_PUBLIC_API_MAP_TILER: ${API_MAP_TILER}
       DEBUG: info:vao*
     ports:
       - 3001:3000

diff --git a/packages/frontend-bo/Dockerfile b/packages/frontend-bo/Dockerfile
@@ -8,7 +8,7 @@ RUN apt-get update \
 WORKDIR /app
 
 COPY package.json yarn.lock ./
-COPY packages/shared/package.json packages/shared/ 
+COPY packages/shared/package.json packages/shared/
 COPY packages/frontend-bo/package.json packages/frontend-bo/yarn.lock packages/frontend-bo/
 RUN yarn workspace @vao/frontend-bo install --frozen-lockfile
 
@@ -22,6 +22,7 @@ ARG NUXT_PUBLIC_MATOMO_SITE_ID
 ARG NUXT_PUBLIC_SENTRY_DSN
 ARG NUXT_PUBLIC_SENTRY_RELEASE
 ARG NUXT_PUBLIC_SENTRY_ENABLED
+ARG NUXT_PUBLIC_API_MAP_TILER
 ARG SENTRY_ORG
 ARG SENTRY_PROJECT
 ARG SENTRY_URL
@@ -35,6 +36,7 @@ ENV NUXT_PUBLIC_MATOMO_SITE_ID=$NUXT_PUBLIC_MATOMO_SITE_ID
 ENV NUXT_PUBLIC_SENTRY_DSN=$NUXT_PUBLIC_SENTRY_DSN
 ENV NUXT_PUBLIC_SENTRY_RELEASE=$NUXT_PUBLIC_SENTRY_RELEASE
 ENV NUXT_PUBLIC_SENTRY_ENABLED=$NUXT_PUBLIC_SENTRY_ENABLED
+ENV NUXT_PUBLIC_API_MAP_TILER=$NUXT_PUBLIC_API_MAP_TILER
 ENV SENTRY_RELEASE=$NUXT_PUBLIC_SENTRY_RELEASE
 ENV SENTRY_ORG=$SENTRY_ORG
 ENV SENTRY_PROJECT=$SENTRY_PROJECT
@@ -44,9 +46,9 @@ COPY packages/shared packages/shared
 COPY packages/frontend-bo packages/frontend-bo
 
 RUN --mount=type=secret,id=sentry_auth_token \
-    export SENTRY_AUTH_TOKEN=$(cat /run/secrets/sentry_auth_token) \ 
+    export SENTRY_AUTH_TOKEN=$(cat /run/secrets/sentry_auth_token) \
     && yarn workspace @vao/frontend-bo generate
 
 FROM ghcr.io/socialgouv/docker/nginx4spa:8.2.3
 
-COPY --from=builder --chown=101:101 /app/packages/frontend-bo/.output/public /usr/share/nginx/html
+COPY --from=builder --chown=101:101 /app/packages/frontend-bo/.output/public /usr/share/nginx/html
diff --git a/packages/frontend-bo/nuxt.config.ts b/packages/frontend-bo/nuxt.config.ts
@@ -21,13 +21,14 @@ export default defineNuxtConfig({
   modules: [
     "nuxt-security",
     "@pinia/nuxt",
-    "@nuxtjs/leaflet",
     "@socialgouv/dsfr-toaster-nuxt-module",
+    "nuxt-maplibre",
   ],
   runtimeConfig: {
     public: {
       appVersion: undefined,
       backendUrl: undefined,
+      apiMapTiler: undefined,
       environment: undefined,
       matomo: {
         enabled: undefined,

diff --git a/packages/frontend-bo/package.json b/packages/frontend-bo/package.json
@@ -17,7 +17,6 @@
   "dependencies": {
     "@gouvfr/dsfr": "~1.12.0",
     "@gouvminint/vue-dsfr": "~5.18.0",
-    "@nuxtjs/leaflet": "^1.0.14",
     "@pinia/nuxt": "~0.5.1",
     "@sentry/vue": "~8.17.0",
     "@socialgouv/dsfr-toaster-nuxt-module": "~1.3.0",
@@ -29,6 +28,7 @@
     "dayjs": "^1.11.11",
     "debug": "~4.3.4",
     "nuxt": "~3.12.4",
+    "nuxt-maplibre": "^1.0.0",
     "nuxt-security": "~1.4.0",
     "oh-vue-icons": "~1.0.0-rc3",
     "pinia": "~2.1.7",

diff --git a/packages/frontend-bo/src/pages/hebergements/[type]/[demandeSejourId]/[hebergementId].vue b/packages/frontend-bo/src/pages/hebergements/[type]/[demandeSejourId]/[hebergementId].vue
@@ -16,25 +16,18 @@
           disabled
         />
       </template>
-      <!-- <template #map="scope">
+      <template #map="scope">
         <div style="height: 50vh">
-          <LMap
-            ref="map"
+          <MglMap
+            :map-style="`https://api.maptiler.com/maps/streets/style.json?key=${config.public.apiMapTiler}`"
             :zoom="zoom"
             :center="scope.markers"
-            :use-global-leaflet="false"
-            style="z-index: 0"
           >
-            <LTileLayer
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-              attribution='&amp;copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
-              layer-type="base"
-              name="OpenStreetMap"
-            />
-            <LMarker :lat-lng="scope.markers"></LMarker>
-          </LMap>
+            <MglNavigationControl />
+            <MglMarker :coordinates="scope.markers" />
+          </MglMap>
         </div>
-      </template> -->
+      </template>
     </Hebergement>
   </div>
 </template>
@@ -51,7 +44,7 @@ const demandeSejourStore = useDemandeSejourStore();
 
 const config = useRuntimeConfig();
 
-// const zoom = 16;
+const zoom = 15;
 
 if (route.params.type !== "lies-a-des-sejours") {
   navigateTo({

diff --git a/packages/frontend-bo/src/pages/hebergements/[type]/[hebergementId].vue b/packages/frontend-bo/src/pages/hebergements/[type]/[hebergementId].vue
@@ -16,25 +16,18 @@
           disabled
         />
       </template>
-      <!-- <template #map="scope">
+      <template #map="scope">
         <div style="height: 50vh">
-          <LMap
-            ref="map"
+          <MglMap
+            :map-style="`https://api.maptiler.com/maps/streets/style.json?key=${config.public.apiMapTiler}`"
             :zoom="zoom"
             :center="scope.markers"
-            :use-global-leaflet="false"
-            style="z-index: 0"
           >
-            <LTileLayer
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-              attribution='&amp;copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
-              layer-type="base"
-              name="OpenStreetMap"
-            />
-            <LMarker :lat-lng="scope.markers"></LMarker>
-          </LMap>
+            <MglNavigationControl />
+            <MglMarker :coordinates="scope.markers" />
+          </MglMap>
         </div>
-      </template> -->
+      </template>
     </Hebergement>
   </div>
 </template>
@@ -51,7 +44,7 @@ const hebergementStore = useHebergementStore();
 
 const config = useRuntimeConfig();
 
-// const zoom = 16;
+const zoom = 15;
 
 if (route.params.type !== "tous") {
   navigateTo({

diff --git a/packages/frontend-usagers/Dockerfile b/packages/frontend-usagers/Dockerfile
@@ -8,7 +8,7 @@ RUN apt-get update \
 WORKDIR /app
 
 COPY package.json yarn.lock ./
-COPY packages/shared/package.json packages/shared/ 
+COPY packages/shared/package.json packages/shared/
 COPY packages/frontend-usagers/package.json packages/frontend-usagers/yarn.lock packages/frontend-usagers/
 RUN yarn workspace @vao/frontend-usagers install --frozen-lockfile
 
@@ -22,6 +22,7 @@ ARG NUXT_PUBLIC_MATOMO_SITE_ID
 ARG NUXT_PUBLIC_SENTRY_DSN
 ARG NUXT_PUBLIC_SENTRY_RELEASE
 ARG NUXT_PUBLIC_SENTRY_ENABLED
+ARG NUXT_PUBLIC_API_MAP_TILER
 ARG SENTRY_ORG
 ARG SENTRY_PROJECT
 ARG SENTRY_URL
@@ -35,6 +36,7 @@ ENV NUXT_PUBLIC_MATOMO_SITE_ID=$NUXT_PUBLIC_MATOMO_SITE_ID
 ENV NUXT_PUBLIC_SENTRY_DSN=$NUXT_PUBLIC_SENTRY_DSN
 ENV NUXT_PUBLIC_SENTRY_RELEASE=$NUXT_PUBLIC_SENTRY_RELEASE
 ENV NUXT_PUBLIC_SENTRY_ENABLED=$NUXT_PUBLIC_SENTRY_ENABLED
+ENV NUXT_PUBLIC_API_MAP_TILER=$NUXT_PUBLIC_API_MAP_TILER
 ENV SENTRY_RELEASE=$NUXT_PUBLIC_SENTRY_RELEASE
 ENV SENTRY_ORG=$SENTRY_ORG
 ENV SENTRY_PROJECT=$SENTRY_PROJECT
@@ -44,10 +46,10 @@ COPY packages/shared packages/shared
 COPY packages/frontend-usagers packages/frontend-usagers
 
 RUN --mount=type=secret,id=sentry_auth_token \
-    export SENTRY_AUTH_TOKEN=$(cat /run/secrets/sentry_auth_token) \ 
+    export SENTRY_AUTH_TOKEN=$(cat /run/secrets/sentry_auth_token) \
     && yarn workspace @vao/frontend-usagers generate
 
 
 FROM ghcr.io/socialgouv/docker/nginx4spa:8.2.3
 
-COPY --from=builder --chown=101:101 /app/packages/frontend-usagers/.output/public /usr/share/nginx/html
+COPY --from=builder --chown=101:101 /app/packages/frontend-usagers/.output/public /usr/share/nginx/html
diff --git a/packages/frontend-usagers/nuxt.config.ts b/packages/frontend-usagers/nuxt.config.ts
@@ -22,14 +22,15 @@ export default defineNuxtConfig({
   modules: [
     "nuxt-security",
     "@pinia/nuxt",
-    "@nuxtjs/leaflet",
     "@socialgouv/dsfr-toaster-nuxt-module",
+    "nuxt-maplibre",
   ],
   runtimeConfig: {
     public: {
       appVersion: undefined,
       backendUrl: undefined,
       environment: undefined,
+      apiMapTiler: undefined,
       matomo: {
         enabled: undefined,
         host: undefined,

diff --git a/packages/frontend-usagers/package.json b/packages/frontend-usagers/package.json
@@ -15,7 +15,6 @@
   "dependencies": {
     "@gouvfr/dsfr": "~1.12.0",
     "@gouvminint/vue-dsfr": "~5.18.0",
-    "@nuxtjs/leaflet": "^1.0.14",
     "@pinia/nuxt": "~0.5.1",
     "@sentry/vue": "~8.17.0",
     "@socialgouv/dsfr-toaster-nuxt-module": "~1.3.0",
@@ -27,6 +26,7 @@
     "dayjs": "~1.11.10",
     "debug": "~4.3.4",
     "nuxt": "~3.12.4",
+    "nuxt-maplibre": "^1.0.0",
     "oh-vue-icons": "~1.0.0-rc3",
     "pinia": "~2.1.7",
     "vee-validate": "~4.13.0",