Merge pull request #106 from Geoportail-Luxembourg/GSLUX-698-fix-mvt-…

…urls

GSLUX-698: [FIX] mvt urls

.env

@@ -1,3 +1,12 @@
+# Proxy urls
 VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
+
+# Urls for vectortiles
+VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"
+
+# Paths for MVT styles
+VITE_MVTSTYLES_PATH_GET="/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="/uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="/deletevtstyle"

.env.staging

@@ -0,0 +1,12 @@
+# Proxy urls
+VITE_USE_PROXYURL=true
+VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
+VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
+
+# Urls for vectortiles
+VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"
+
+# Paths for MVT styles
+VITE_MVTSTYLES_PATH_GET="https://migration.geoportail.lu/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="https://migration.geoportail.lu/uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="https://migration.geoportail.lu/deletevtstyle"

.github/workflows/ci.yml

@@ -53,7 +53,7 @@ jobs:
         shell: bash
         run: echo "VITE_DEPLOY_GHPAGES=true" >> $GITHUB_ENV
 
-      - run: npm run build-only -- --base=${{env.LUX_BASE}}
+      - run: npm run build-only -- --base=${{env.LUX_BASE}} --mode=staging
 
       - name: deploy to gh pages
         run: |

.prettierignore

@@ -27,6 +27,7 @@
 /out-tsc/
 .parcel-cache
 .env
+.env.*
 
 # fixtures
 /src/__fixtures__/

README.md

@@ -155,6 +155,8 @@ RUN mkdir /etc/static-ngeo/web-components \
 
 ### Initialize app settings
 
+#### 1. Proxy and remote urls
+
 Configure your proxy urls, otherwise, layers may not display correctly.
 
 ```js
@@ -165,6 +167,20 @@ const remoteProxyWms = 'https://map.geoportail.lu/httpsproxy'
 proxyUrlHelper.init(proxyWmsUrl, remoteProxyWms)
 ```
 
+#### 2. Vector tiles url
+
+Configure url for vector tiles (see `.env`, `.env-staging` files).
+
+```bash
+# Urls for vectortiles to be used in prod
+VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"
+
+# OR Urls for vectortiles to be used in staging/dev mode
+VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"
+```
+
+💡 For more info about styling, see `src/composables/mvt-styles/README.md`
+
 ### Use components, services, stores, composables
 
 To use components, services, stores or composables in you application, all these should explicitely exported in the lib.

package.json

@@ -8,7 +8,7 @@
     "build": "run-p type-check build-only",
     "build-only": "vite build",
     "build:lib:prod": "npx vite build --mode prod --config vite-dist.config.ts --minify=esbuild --debug && npx babel bundle/lux.dist.mjs --out-file bundle/lux.dist.js",
-    "build:lib:dev": "npx vite build --mode dev --config vite-dist.config.ts --minify=false --base=/dev/main.html/ --debug && cp bundle/lux.dist.mjs bundle/lux.dist.js",
+    "build:lib:dev": "npx vite build --mode staging --config vite-dist.config.ts --minify=false --base=/dev/main.html/ --debug && cp bundle/lux.dist.mjs bundle/lux.dist.js",
     "preview": "vite preview",
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom --root .",

src/components/style-selector/expert-style-selector.vue

@@ -51,7 +51,7 @@ function getStyleUrl() {
       styleService.getVectorId(mapStore.bgLayer)
     )
   } else {
-    return `${styleStore.registerUrls.get('get')}?id=${styleStore.styleSerial}`
+    return `${styleService.MVTSTYLES_PATH_GET}?id=${styleStore.styleSerial}`
   }
 }
 </script>

src/composables/background-layer/background-layer.composable.ts

@@ -13,6 +13,7 @@ import {
   BgLayerDefaultsType,
 } from '@/composables/background-layer/background-layer.model'
 import useThemes from '@/composables/themes/themes.composable'
+import { LayerTypeValue } from '../themes/themes.model'
 
 export default function useBackgroundLayer() {
   const appStore = useAppStore()
@@ -42,15 +43,19 @@ export default function useBackgroundLayer() {
 
   function setMapBackground(bgLayer: Layer | null) {
     if (bgLayer) {
-      if (bgLayer.type === 'WMTS' || bgLayer.type === 'BG WMTS') {
-        bgLayer.type = 'BG WMTS'
-      } else if (bgLayer.type === 'BG MVT') {
+      if (
+        bgLayer.type === LayerTypeValue.WMTS ||
+        bgLayer.type === LayerTypeValue.BG_WMTS
+      ) {
+        bgLayer.type = 'BG WMTS' // <= ????
+      } else if (bgLayer.type === LayerTypeValue.BG_MVT) {
         console.log(`passed through MVT layer ${bgLayer.name}`)
       } else {
         throw new Error(
           `Only WMTS and MVT BG layers are currently implemented (not ${bgLayer.type} for ${bgLayer.name})`
         )
       }
+
       layers.handleExclusionLayers(bgLayer)
       mapStore.setBgLayer(layers.initLayer(bgLayer))
     } else {

src/composables/map/ol.synchronizer.ts

@@ -89,11 +89,11 @@ export class OlSynchronizer {
     watch(appliedStyle, (style: StyleSpecification) => {
       if (styleStore.bgStyle === null && !styleStore.isExpertStyleActive) {
         styleService
-          .unregisterStyle(styleStore.styleSerial, styleStore.registerUrls)
+          .unregisterStyle(styleStore.styleSerial)
           .then((styleStore.styleSerial = null))
       } else {
         styleService
-          .registerStyle(style, styleStore.styleSerial, styleStore.registerUrls)
+          .registerStyle(style, styleStore.styleSerial)
           .then(serial => {
             styleStore.styleSerial = serial
             const id = mapStore?.bgLayer?.id

src/composables/mvt-styles/README.md

@@ -0,0 +1,118 @@
+## Styling Vector Tiles
+
+## Introduction
+
+In the Luxembourg geoportal, map background styles can be customized by the user through the three components of the `style-selector`:
+
+- one component for simple mode,
+- one for medium mode,
+- and a final one for expert mode
+
+The styles modified by the user are saved or reloaded via `/getvtstyle`, `/uploadvtstyle`, `/deletevtstyle` and `vectortilesurl` requests.
+
+⚠️ Users styles are stored using file system on the luxembourg geoportal server https://map.geoportail.lu into a shared directory `VT_DIR`. The tile server https://vectortiles.geoportail.lu is able to retrieve styling info from this shared directory.
+
+This processing is done on the backend side, see legacy v3 code for more info:
+🔗 [Geoportail-Luxembourg/geoportailv3](https://github.com/Geoportail-Luxembourg/geoportailv3/blob/18ab23ff9cf1ac7fce4fc6a19cae71f1b94e0715/geoportal/geoportailv3_geoportal/views/upload.py#L18)
+
+⚠️ The https://vectortiles.geoportail.lu is mandatory to make the print and the 3D map work because both functionalities need raster images.
+
+⚠️ For dev purposes, we will be using https://migration.geoportail.lu and https://vectortiles-staging.geoportail.lu plateform instead.
+
+## 💡 How it works
+
+### Default styles `style.json`
+
+First, default styles are loaded for each vector background layers (currently, there are 3 background layers available), eg:
+
+- https://vectortiles.geoportail.lu/styles/roadmap/style.json
+- https://vectortiles.geoportail.lu/styles/topomap/style.json
+- https://vectortiles.geoportail.lu/styles/topomap_gray/style.json
+
+### User' styles
+
+- `/uploadvtstyle`: each time the user changes the vector tile style, the frontend sends the new style to the server. The new style is saved and a **new id is created and associated to this new style**.
+- `/getvtstyle`: given a style id, get the style content from the server.
+- `/deletevtstyle`: remove the associated style content from the server.
+
+## 🔧 Configure styles urls
+
+`/getvtstyle`, `/uploadvtstyle`, `/deletevtstyle` requests can be configured through `.env` (or `.env-staging`) variables: `VITE_MVTSTYLES_PATH_GET`, `VITE_MVTSTYLES_PATH_UPLOAD`, `VITE_MVTSTYLES_PATH_DELETE`. See below for details about .env configuration.
+
+It is also possible to override theses values by settings new urls using `useMvtStyles().setRegisterUrl_v3()`. This function is meant to be used by the legacy v3 version of Luxembourg geoportal.
+
+```js
+// MainController.js
+// Override urls on legacy v3 side:
+const mvtStyles = useMvtStyles()
+mvtStyles.setRegisterUrl_v3({
+  get: 'https://migration.geoportail.lu/getvtstyle',
+  upload: 'https://migration.geoportail.lu/uploadvtstyle',
+  delete: 'https://migration.geoportail.lu/deletevtstyle',
+  vectortiles: 'https://vectortiles-staging.geoportail.lu',
+})
+```
+
+### Save styles on local dev server
+
+Style files will be saved on local dev server (v3 in docker environment).
+
+```sh
+# Urls for vectortiles
+VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"
+
+# Paths for MVT styles
+VITE_MVTSTYLES_PATH_GET="https://localhost:8080/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="https://localhost:8080//uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="https://localhost:8080/deletevtstyle"
+```
+
+same as using relative urls:
+
+```sh
+# Urls for vectortiles
+VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu" # ⚠️ NO VECTORTILES SERVER ON LOCAL DEV
+
+# Paths for MVT styles
+VITE_MVTSTYLES_PATH_GET="/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="/uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="/deletevtstyle"
+```
+
+NB. Using relative urls is possible because proxy urls are defined in `vite.config.ts`.
+
+⚠️ There is no vectortiles server providing default `style.json` nor raster images on local dev, this is why you should always use `VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"`. Raster images are used for 3D and printing.
+
+### Save styles on staging server
+
+```sh
+# Urls for vectortiles
+VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"
+
+# Paths for MVT styles
+VITE_MVTSTYLES_PATH_GET="https://migration.geoportail.lu/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="https://migration.geoportail.lu/uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="https://migration.geoportail.lu/deletevtstyle"
+```
+
+### Save styles on production server
+
+```sh
+# Urls for vectortiles
+VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"
+
+# Paths for MVT styles
+VITE_MVTSTYLES_PATH_GET="https://map.geoportail.lu/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="https://map.geoportail.lu/uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="https://map.geoportail.lu/deletevtstyle"
+```
+
+### Relative urls
+
+You can also use relative urls if your environment allows it.
+
+```sh
+VITE_MVTSTYLES_PATH_GET="/getvtstyle"
+VITE_MVTSTYLES_PATH_UPLOAD="/uploadvtstyle"
+VITE_MVTSTYLES_PATH_DELETE="/deletevtstyle"
+```