Merge branch 'fix/center-map' into 'develop'

fi: add env var to center map on France at the init

See merge request geovisio/website!91

Dockerfile

@@ -22,6 +22,8 @@ ENV VITE_INSTANCE_NAME=DOCKER_VITE_INSTANCE_NAME
 ENV VITE_API_URL=DOCKER_VITE_API_URL
 ENV VITE_TILES=DOCKER_VITE_TILES
 ENV VITE_MAX_ZOOM=DOCKER_VITE_MAX_ZOOM
+ENV VITE_ZOOM=DOCKER_VITE_ZOOM
+ENV VITE_CENTER=DOCKER_VITE_CENTER
 
 # Build code
 ENV PORT=3000
@@ -48,6 +50,8 @@ ENV VITE_INSTANCE_NAME="GeoVisio/Docker"
 ENV VITE_API_URL="https://panoramax.openstreetmap.fr"
 ENV VITE_TILES="https://tile-vect.openstreetmap.fr/styles/basic/style.json"
 ENV VITE_MAX_ZOOM=""
+ENV VITE_ZOOM=""
+ENV VITE_CENTER=""
 
 # Start Nginx
 EXPOSE 3000

docker/docker-entrypoint.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 ROOT_DIR=/usr/share/nginx/html
-DOCKER_VARS=(VITE_INSTANCE_NAME VITE_API_URL VITE_TILES VITE_MAX_ZOOM)
+DOCKER_VARS=(VITE_INSTANCE_NAME VITE_API_URL VITE_TILES VITE_MAX_ZOOM VITE_ZOOM VITE_CENTER )
 
 echo "Setting env variables in web files"
 for file in $ROOT_DIR/assets/*.js $ROOT_DIR/index.html; do

docs/03_Settings.md

@@ -12,6 +12,8 @@ Available parameters are:
 - `VITE_INSTANCE_NAME`: the name of the instance (example: `IGN`)
 - `VITE_TILES`: the URL of your tiles : default tiles are the Open Street Map Tiles (example: `https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/attenue.json`)
 - `VITE_MAX_ZOOM`: the max zoom to use on the map (defaults to 24).
+- `VITE_ZOOM`: the zoom to use at the initialization of the map (defaults to 0).
+- `VITE_CENTER`: the center position to use at the initialization of the map (defaults to 0).
 - Settings for the work environment:
   - `NPM_CONFIG_PRODUCTION`: is it production environment (`true`, `false`)
   - `YARN_PRODUCTION`: same as below, but if you use Yarn instead of NPM

src/views/HomeView.vue

@@ -23,11 +23,32 @@ onMounted(async () => {
   reportLink.className = 'gvs-group gvs-group-large gvs-group-btnpanel'
   const tiles = import.meta.env.VITE_TILES
   const maxZoom = import.meta.env.VITE_MAX_ZOOM
+  const zoom = import.meta.env.VITE_ZOOM
+  const center = import.meta.env.VITE_CENTER
+  console.log(zoom)
+  console.log(center)
   let paramsGeovisio: ViewerMapInterface = {
     map: {
       startWide: true
     }
   }
+  if (center && center !== '') {
+    const centerMap = center.split(',').map((el: string) => parseInt(el))
+    paramsGeovisio = {
+      map: {
+        ...paramsGeovisio.map,
+        center: centerMap
+      }
+    }
+  }
+  if (zoom && zoom !== '') {
+    paramsGeovisio = {
+      map: {
+        ...paramsGeovisio.map,
+        zoom: parseFloat(zoom)
+      }
+    }
+  }
   if (maxZoom && maxZoom !== '') {
     paramsGeovisio = {
       map: {

src/views/interfaces/common/index.ts

@@ -13,5 +13,7 @@ export interface ViewerMapInterface extends OptionalViewerMapInterface {
     startWide: boolean
     style?: object | string
     maxZoom?: number
+    zoom?: number
+    center?: number[]
   }
 }