fix viewer

.gitignore

@@ -1,2 +1,90 @@
-node_modules
-.env
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

package.json

@@ -15,8 +15,7 @@
     "format": "prettier .  --write"
   },
   "dependencies": {
-    "maplibre-gl": "^2.4.0",
-    "photo-sphere-viewer": "^4.8.1",
+    "geovisio": "^1.4.0",
     "vue": "^3.2.45",
     "vue-eslint-parser": "^9.1.0",
     "vue-i18n": "9",

src/lib/Viewer.js

@@ -27,30 +27,6 @@ const BASE_PANORAMA = {
   tileUrl: (col) => (col === 0 ? LoaderImgTile0 : LoaderImgTile1),
 };
 
-/**
- * Viewer is the component allowing display of 360° pictures.
- *
- * @augments {external:photo-sphere-viewer.Viewer}
- * @fires picture-loaded
- * @param {string|Node} container The DOM element to create viewer into
- * @param {string} endpoint URL to API to use (must be a [STAC API Item Search endpoint](https://github.com/radiantearth/stac-api-spec/tree/master/item-search))
- * @param {object} [options] Viewer options
- * @param {string} [options.picId] Initial picture identifier to display
- * @param {number[]} [options.position] Initial position to go to (in [lat, lon] format)
- * @param {boolean} [options.player=true] Enable sequence player buttons (next/prev/play buttons)
- * @param {boolean|object} [options.map=false] Enable contextual map for locating pictures. Setting to true or passing an object enables the map. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters)
- * @param {string} [options.map.picturesTiles] URL for fetching pictures vector tiles (if map is enabled, defaults to GeoVisio /api/map endpoint)
- * @param {boolean} [options.map.startWide] Show the map as main element at startup (defaults to false, viewer is wider at start)
- * @param {number} [options.map.minZoom=0] The minimum zoom level of the map (0-24).
- * @param {number} [options.map.maxZoom=22] The maximum zoom level of the map (0-24).
- * @param {object|string} [options.map.style] The map's MapLibre style. This must be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL to such JSON.
- * @param {(boolean|string)} [options.map.hash=false] If `true`, the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.
- *   For example, `http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60`.
- *   An additional string may optionally be provided to indicate a parameter-styled hash, e.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar, where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash.
- * @param {external:maplibre-gl.LngLatLike} [options.map.center=[0, 0]] The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
- * @param {number} [options.map.zoom=0] The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
- * @param {external:maplibre-gl.LngLatBoundsLike} [options.map.bounds] The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
- */
 class Viewer extends PSViewer {
   constructor(container, endpoint, options = {}) {
     super({
@@ -223,7 +199,7 @@ class Viewer extends PSViewer {
           this.goToPosition(...options.position).catch((e) => console.log(e));
         }
       };
-      
+
       if (options.map) {
         this._map = new Map(this, options.map);
         this._map._map.once("load", onReady);
@@ -423,6 +399,7 @@ class Viewer extends PSViewer {
    */
   goToPicture(picId) {
     // Actually move to wanted picture
+    console.log(picId);
     this._myVTour.setCurrentNode(picId);
   }
 

src/views/HomeView.vue

@@ -1,19 +1,34 @@
 <template>
-  <div id="viewer"></div>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://geovisio.fr/viewer/lib/index.css"
+  />
+
+  <div id="viewer" class="viewer"></div>
 </template>
+
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import Viewer from "../lib/Viewer.js";
-const onloadImg = () => {
-  new Viewer("viewer", import.meta.env.VITE_API_URL, {
-    map: {
-      startWide: true,
-    },
-  });
-};
+import GeoVisio from "geovisio";
 
 onMounted(() => {
-  onloadImg();
+  new GeoVisio(
+    "viewer", // Div ID
+    import.meta.env.VITE_API_URL, // STAC API search endpoint
+    {
+      map: {
+        startWide: true,
+      },
+    } // Viewer options
+  );
 });
 </script>
-<style scoped></style>
+<style scoped>
+.viewer {
+  height: 500px;
+  width: 95%;
+  position: relative;
+  margin: auto;
+}
+</style>