- Minimap code commented

- Code cleaning

package-lock.json

@@ -14,7 +14,7 @@
         "axios": "^1.2.2",
         "class-transformer": "^0.5.1",
         "dayjs": "^1.10.7",
-        "leaflet": "^1.7.1",
+        "leaflet": "^1.9.4",
         "qs": "^6.10.1",
         "rxjs": "^7.5.5",
         "vue": "^3.2.47",

package.json

@@ -17,7 +17,7 @@
     "axios": "^1.2.2",
     "class-transformer": "^0.5.1",
     "dayjs": "^1.10.7",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.4",
     "qs": "^6.10.1",
     "rxjs": "^7.5.5",
     "vue": "^3.2.47",

src/App.vue

@@ -166,6 +166,7 @@ export default App;
 </script>
 
 <style scoped lang="scss">
+@import 'leaflet/dist/leaflet.css';
 // #app {
 //   font-family: Avenir, Helvetica, Arial, sans-serif;
 //   -webkit-font-smoothing: antialiased;

src/app.ts

@@ -1,5 +1,4 @@
 import { Component, Vue, Watch } from "vue-facing-decorator";
-// import { RouteLocation } from "vue-router";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import HelpViewComponent from "./views/help-view/help-view-component.vue";
 import MapViewComponent from "./views/map-view/map-view.component.vue";
@@ -11,27 +10,10 @@ import ContactViewComponent from "./views/contact-view/contact-view-component.vu
 import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue";
 import ImprintViewComponent from "./views/imprint-view/imprint-view-component.vue";
 import TermsViewComponent from "./views/terms-view/terms-view-component";
-// import { VUE_API } from "./constants";
-// import VsInput from "./components/vs-input/vs-input.vue";
-// import VsResult from "./components/vs-result/vs-result.vue";
-// import FacetCategory from "./components/face-category/facet-category.vue";
-// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
 
-// import { SolrSettings } from "@/models/solr";
-// import { DatasetService } from "./services/dataset.service";
-// import { Suggestion } from "./models/dataset";
-// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
-// import { ActiveFilterCategories } from "@/models/solr";
-
-// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
 @Component({
     components: {
-        // HelloWorld,
         HomeViewComponent,
-        // VsInput,
-        // VsResult,
-        // FacetCategory,
-        // ActiveFacetCategory,
         HelpViewComponent,
         MapViewComponent,
         SearchViewComponent,
@@ -48,38 +30,40 @@ export default class App extends Vue {
     public active = false;
     public portal = "https://data.tethys.at/login"; // VUE_API + "/login";
 
+    /**
+     * Computed property that returns the current year.
+     * @returns {number} The current year as a number.
+     */
     get currentYear() {
         return new Date().getFullYear();
     }
 
+    /**
+     * Lifecycle hook called when the component is mounted.
+     * Currently empty, but can be used to add setup logic when the component is mounted.
+     */
     mounted(): void {
-        // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
-        // // Check if there are any navbar burgers
-        // if ($navbarBurgers.length > 0) {
-        //     // Add a click event on each of them
-        //     $navbarBurgers.forEach((elNavBurger) => {
-        //         elNavBurger.addEventListener("click", () => {
-        //             // Get the target from the "data-target" attribute
-        //             const targetNavbar = elNavBurger.dataset.target;
-        //             const $target = document.getElementById(targetNavbar);
-        //             // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-        //             elNavBurger.classList.toggle("is-active");
-        //             $target?.classList.toggle("is-active");
-        //         });
-        //     });
-        // }
+
     }
 
+    /**
+     * Toggles the visibility of the mobile menu.
+     * @param {MouseEvent} event - The mouse event triggered by the user's interaction.
+     */
     public showMobilemenu(event: MouseEvent): void {
-        // Don't follow the link
+        // Prevent the default behavior of the event (e.g., following a link)
         event.preventDefault();
+        // Toggle the active state of the mobile menu
         this.active = !this.active;
     }
 
+    /**
+     * Watcher that triggers when the route changes.
+     * It deactivates the mobile menu by setting `active` to false.
+     */
     @Watch("$route")
     protected oRouteChangedChanged(): void {
-        //(to: RouteLocation, from: RouteLocation): void {
-        // console.log("setting " + from.path + " to " + to.path);
+        // Close the mobile menu when the route changes
         this.active = false;
     }
 }

src/components/minimap/Minimap.ts

@@ -0,0 +1,112 @@
+import { Component, Prop, Vue } from 'vue-facing-decorator';
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+@Component({
+  name: 'Minimap',
+})
+export default class Minimap extends Vue {
+  @Prop({ type: Array, required: true }) bounds!: L.LatLngBoundsLiteral;
+
+  // private originalCenter: L.LatLngExpression = [47.71, 13.55]; // Original center
+  // private originalZoom: number = 6; // Original zoom level
+
+  /**
+   * Lifecycle hook called when the component is mounted.
+   * Initializes the Leaflet map, sets up base layers, and adds either a circle or rectangle
+   * based on the `bounds` prop passed to the component.
+   */
+  mounted() {
+    // Initialize the map with specific center and zoom
+    const map = L.map('map', {
+      center: [47.71, 13.55], // Initial center coordinates
+      zoomControl: true,      // Enable zoom controls
+      zoom: 6,                // Initial zoom level
+      minZoom: 5,             // Minimum zoom level allowed
+      maxBounds: [
+        [44.0, 9.0],          // Southwest corner of the bounding box
+        [51.0, 18.0]          // Northeast corner of the bounding box
+      ],
+      maxBoundsViscosity: 1.0 // Prevent map from being dragged outside the defined bounds
+    });
+  
+    // Remove Leaflet logo and text
+    map.attributionControl.setPrefix(false);
+
+    // Add basemap.at tile layer to the map
+    const basemapAtLayer = L.tileLayer('https://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {
+      attribution: '<a href="https://www.basemap.at">basemap.at</a>',
+      noWrap: true,
+      subdomains: ['', '1', '2', '3', '4']
+    }).addTo(map);
+  
+    // Add Esri imagery tile layer
+    const esriImageryLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+      attribution: 'Tiles &copy; <a href="https://www.esri.com/" target="_blank">Esri</a>'
+    });
+  
+    // Add Esri topo map tile layer
+    const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+      attribution: 'Tiles &copy; <a href="https://www.esri.com/" target="_blank">Esri</a>'
+    });
+  
+    // Define available base maps for the user to toggle between
+    const baseMaps = {
+      //   "OpenStreetMap": openStreetMapLayer,
+      "basemap.at": basemapAtLayer,
+      "ESRI Imagery": esriImageryLayer,
+      "ESRI Topo": esriTopoLayer
+    };
+  
+    // Define available base maps for the user to toggle between
+    L.control.layers(baseMaps).addTo(map);
+  
+    const [southWest, northEast] = this.bounds;
+  
+    if (southWest[0] === northEast[0] || southWest[1] === northEast[1]) {
+      // If y_min and y_max (and x_min and x_max) are equal, generate a circle
+      const center = [southWest[0], southWest[1]] as [number, number];
+      // Add a CircleMarker to the map at the center of the bounds. This kind of marker is used to maintain constant size regardless of zoom level
+      const circleMarker = L.circleMarker(center, {
+        color: '#30D5C8',       // Outline color
+        fillColor: '#336699',   // Fill color
+        fillOpacity: 1,         // Opacity of the fill
+        opacity: 0.5,           // Outline opacity
+        weight: 10,             // Outline weight (thickness)
+        radius: 10              // Radius in pixels
+      }).addTo(map);
+  
+      // Manually create a small bounding box around the marker's center to fit bounds
+      const buffer = 0.01; // Buffer size around the marker. Adjust this value to control the area around the marker
+      const markerBounds = L.latLngBounds(
+        [center[0] - buffer, center[1] - buffer], // Southwest corner of the bounding box
+        [center[0] + buffer, center[1] + buffer]  // Northeast corner of the bounding box
+      );
+  
+      // Add a click event handler to the CircleMarker
+      circleMarker.on('click', () => {
+        map.fitBounds(markerBounds, { padding: [10, 10] }); // Adjust map to fit within marker bounds
+      });
+  
+      // Automatically adjust the map's view to fit the marker's bounds
+      map.fitBounds(markerBounds, { padding: [10, 10] });
+  
+    } else {
+      // If bounds are not equal, draw a rectangle
+      const rectangle = L.rectangle(this.bounds, { 
+        color: '#30D5C8', // Rectangle outline color //Alternative color: 336699
+        weight: 2,        // Outline thickness
+        opacity: 1        // Opacity of the rectangle outline
+      }).addTo(map); 
+
+      // Add a click event handler to the Rectangle
+      rectangle.on('click', () => {
+        map.fitBounds(this.bounds, { padding: [18, 18] }); // Adjust map to fit within rectangle bounds
+      });
+  
+      // Automatically adjust the map's view to fit the rectangle's bounds with padding
+      map.fitBounds(this.bounds, { padding: [18, 18] });
+    }
+  }
+  
+}

src/components/minimap/Minimap.vue

@@ -0,0 +1,16 @@
+<!-- Contains the template and references the TypeScript logic. -->
+<template>
+  <div id="map" style="height: 300px;"></div>
+</template>
+
+<script lang="ts">
+import Minimap from './Minimap';
+export default Minimap;
+</script>
+
+<style scoped>
+#map {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/constants.ts

@@ -1,19 +1,13 @@
-// declare const POINT_URL: string;
-// declare const EDGE_URL: string;
 declare const APP_URL: string;
 declare const VUE_API: string;
 declare const SOLR_HOST: string;
 declare const SOLR_CORE: string;
 
-// const _EDGE_URL = EDGE_URL;
-// const _POINT_URL = POINT_URL;
 const _APP_URL = APP_URL;
 const _VUE_API = VUE_API;
 const _SOLR_HOST = SOLR_HOST;
 const _SOLR_CORE = SOLR_CORE;
 
-// export { _EDGE_URL as EDGE_URL };
-// export { _POINT_URL as POINT_URL };
 export { _APP_URL as APP_URL };
 export { _VUE_API as VUE_API };
 export { _SOLR_HOST as SOLR_HOST };

src/models/dataset.ts

@@ -264,6 +264,19 @@ export class DbDataset {
             return "";
         }
     }
+
+    /* Provides the bounds of the publication for the Leaflet minimap */
+    public get Bounds(): L.LatLngBoundsLiteral | string {
+        if (this.coverage != undefined) { 
+            return [
+                [Number(this.coverage.y_min), Number(this.coverage.x_min)], // Southwest corner
+                [Number(this.coverage.y_max), Number(this.coverage.x_max)]  // Northeast corner
+            ];
+        } else {
+            return ""; 
+        }
+    }
+    
 }
 type Nullable<T> = T | undefined;
 

src/search_page.html

@@ -1,698 +0,0 @@
-<div class="columns">
-
-    <div class="column is-9 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
-        <div class="column" id="loading_bar" style="padding-top: 0px; display: none">
-            <div class="column" style="padding-top: 0; padding-bottom: 0; margin-bottom: 0"></div>
-            <div class="card" style="margin-bottom: 0px">
-                <div class="card-content">
-                    <div class="content">
-                        <noscript>It appears that your Javascript is disabled. To view results on
-                            this page, you will need to enable it. You might want to visit our
-                            <a href="/lite/results">lite results</a>.
-                        </noscript>
-                        <progress class="progress is-large" max="100">60%</progress>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id="results">
-            <div class="column" style="padding-top: 0">
-                <div class="card" style="margin-bottom: 0px">
-                    <div class="card-content">
-                        <div class="content">
-                            It looks like you're not logged in right now. you will need to
-                            <a href="/login" target="_self">login to Pro</a> or become a
-                            <a href="https://coil.com/?ref=InfinitySearch2229" target="_self">Coil Member</a>
-                            to access the results.
-                            <div class="block"></div>
-                            <div class="columns" style="text-align: center">
-                                <div class="column is-one-third">
-                                    <a class="button" style="width: 100%" href="/login" target="_self">Login</a>
-                                </div>
-                                <div class="column is-one-third">
-                                    <a class="button" style="width: 100%" href="/pro" target="_self">Learn more about
-                                        Infinity Pro</a>
-                                </div>
-                                <div class="column is-one-third">
-                                    <a class="button" style="width: 100%"
-                                        href="https://coil.com/?ref=InfinitySearch2229" target="_self">Learn more about
-                                        Coil</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div hidden="" id="id-custom-tab-page">
-            <div class="columns" style="margin-top: 1rem">
-                <div class="column is-one-quarter is-offset-2">
-                    <p class="heading">Current Tabs</p>
-                    <div id="id-current-tab-list">
-                        <nav class="level is-mobile" id="id-web-tab">
-                            <div class="level-item has-text-centered is-capitalized">web</div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-web" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                        <nav class="level is-mobile" id="id-images-tab">
-                            <div class="level-item has-text-centered is-capitalized">
-                                images
-                            </div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-images" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                        <nav class="level is-mobile" id="id-videos-tab">
-                            <div class="level-item has-text-centered is-capitalized">
-                                videos
-                            </div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-videos" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                        <nav class="level is-mobile" id="id-homepages-tab">
-                            <div class="level-item has-text-centered is-capitalized">
-                                homepages
-                            </div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-homepages" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                        <nav class="level is-mobile" id="id-food-tab">
-                            <div class="level-item has-text-centered is-capitalized">
-                                food
-                            </div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-food" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                        <nav class="level is-mobile" id="id-books-tab">
-                            <div class="level-item has-text-centered is-capitalized">
-                                books
-                            </div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-books" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                        <nav class="level is-mobile" id="id-movies-tab">
-                            <div class="level-item has-text-centered is-capitalized">
-                                movies
-                            </div>
-                            <div class="level-item has-text-centered is-one-quarter">
-                                <div style="order: 2; margin-left: auto; margin-right: 0.5rem">
-                                    <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                    " />
-                                    <img class="handle trash" src="/static/images/fa/trash-alt.svg"
-                                        id="id-remove-tab-icon-movies" style="
-                      cursor: pointer;
-                      min-width: 0.5em;
-                      width: 16px;
-                      height: 16px;
-                      margin-left: 0.5rem;
-                    " onclick="removeTab(this);" />
-                                </div>
-                            </div>
-                        </nav>
-                    </div>
-                </div>
-                <div class="column is-one-quarter is-offset-1">
-                    <p class="heading">Add New Tabs</p>
-                    <nav class="level">
-                        <div class="level-item">
-                            <div class="select">
-                                <select id="id-add-tab-selector" style="
-                    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
-                      Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
-                      'Droid Sans', 'Helvetica Neue', Helvetica, Arial,
-                      sans-serif;
-                  ">
-                                    <option id="id-tab-selector-web" value="web" style="display: none">
-                                        Web
-                                    </option>
-                                    <option id="id-tab-selector-images" value="images" style="display: none">
-                                        Images
-                                    </option>
-                                    <option id="id-tab-selector-videos" value="videos" style="display: none">
-                                        Videos
-                                    </option>
-                                    <option id="id-tab-selector-homepages" value="homepages" style="display: none">
-                                        Homepages
-                                    </option>
-                                    <option id="id-tab-selector-general" value="general">
-                                        General
-                                    </option>
-                                    <option id="id-tab-selector-food" value="food" style="display: none">
-                                        Food
-                                    </option>
-                                    <option id="id-tab-selector-books" value="books" style="display: none">
-                                        Books
-                                    </option>
-                                    <option id="id-tab-selector-movies" value="movies" style="display: none">
-                                        Movies
-                                    </option>
-                                    <option id="id-tab-selector-music" value="music">
-                                        Music
-                                    </option>
-                                    <option id="id-tab-selector-infinity" value="infinity">
-                                        Infinity
-                                    </option>
-                                    <option id="id-tab-selector-edu" value="edu">Edu</option>
-                                    <option id="id-tab-selector-pdf" value="pdf">Pdf</option>
-                                    <option id="id-tab-selector-qa" value="qa">Qa</option>
-                                    <option id="id-tab-selector-reddit" value="reddit">
-                                        Reddit
-                                    </option>
-                                    <option id="id-tab-selector-fandom" value="fandom">
-                                        Fandom
-                                    </option>
-                                    <option id="id-tab-selector-coil" value="coil">Coil</option>
-                                    <option id="id-tab-selector-no_js" value="no_js">
-                                        No Javascript
-                                    </option>
-                                    <option id="id-tab-selector-decentralized" value="decentralized">
-                                        Decentralized
-                                    </option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="level-item">
-                            <button class="button" id="id-add-tab-button" onclick="addTab();" style="
-                  font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
-                    Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                    'Helvetica Neue', Helvetica, Arial, sans-serif;
-                ">
-                                Add
-                            </button>
-                        </div>
-                    </nav>
-                    <br />
-                    <nav class="level">
-                        <div class="level-item">
-                            <button class="button" id="id-update-tabs-button" style="
-                  order: 2;
-                  margin-left: auto;
-                  font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
-                    Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                    'Helvetica Neue', Helvetica, Arial, sans-serif;
-                " onclick="resetTabsToOriginal();">
-                                Reset
-                            </button>
-                        </div>
-                    </nav>
-                    <div id="id-custom-tabs-error"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-
-    <div id="id-side-bar" class="column is-3 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
-        <div id="externals" class="">
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://en.wikipedia.org/w/index.php?search="
-                            href="https://en.wikipedia.org/w/index.php?search=test" name="external_link_0"
-                            style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/wikipedia.ico"
-                                name="external_icon_0'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_0"
-                                style="font-size: 0.95rem; display: inline">
-                                Wikipedia Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://duckduckgo.com/?q=" href="https://duckduckgo.com/?q=test" name="external_link_1"
-                            style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/duckduckgo.ico"
-                                name="external_icon_1'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_1"
-                                style="font-size: 0.95rem; display: inline">
-                                DuckDuckGo Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://www.google.com/search?q=" href="https://www.google.com/search?q=test"
-                            name="external_link_2" style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/google.ico"
-                                name="external_icon_2'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_2"
-                                style="font-size: 0.95rem; display: inline">
-                                Google Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://www.youtube.com/results?search_query="
-                            href="https://www.youtube.com/results?search_query=test" name="external_link_3"
-                            style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/youtube.svg"
-                                name="external_icon_3'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_3"
-                                style="font-size: 0.95rem; display: inline">
-                                Youtube Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://www.amazon.com/s?k=" href="https://www.amazon.com/s?k=test"
-                            name="external_link_4" style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/amazon.ico"
-                                name="external_icon_4'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_4"
-                                style="font-size: 0.95rem; display: inline">
-                                Amazon Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://twitter.com/search?q=" href="https://twitter.com/search?q=test"
-                            name="external_link_5" style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/twitter.png"
-                                name="external_icon_5'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_5"
-                                style="font-size: 0.95rem; display: inline">
-                                Twitter Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://www.reddit.com/search/?q=" href="https://www.reddit.com/search/?q=test"
-                            name="external_link_6" style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/reddit.ico"
-                                name="external_icon_6'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_6"
-                                style="font-size: 0.95rem; display: inline">
-                                Reddit Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://github.com/search?q=" href="https://github.com/search?q=test"
-                            name="external_link_7" style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/github.ico"
-                                name="external_icon_7'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_7"
-                                style="font-size: 0.95rem; display: inline">
-                                GitHub Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-            <div class="card" name="external_card" style="margin-bottom: 0px">
-                <header class="card-header">
-                    <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                        <a id="https://www.reuters.com/search/news?blob="
-                            href="https://www.reuters.com/search/news?blob=test" name="external_link_8"
-                            style="display: block" rel="noreferrer noopener" target="_self">
-                            <img onerror="imgError(this)" src="/static/images/favicons/reuters.ico"
-                                name="external_icon_8'" class="external-icon" />
-                            <span hidden="" class="external-text" name="external_text_8"
-                                style="font-size: 0.95rem; display: inline">
-                                Reuters Results
-                            </span>
-                        </a>
-                    </p>
-                    <span class="clickableIcon" onclick="removeExternalClickable(this)" style="
-              cursor: pointer;
-              display: block;
-              margin: auto;
-              margin-right: 6px;
-              min-width: 0.5em;
-            ">
-                        <img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
-                cursor: pointer;
-                display: block;
-                margin: auto;
-                margin-right: 12px;
-                min-width: 0.5em;
-                width: 16px;
-                height: 16px;
-              " />
-                    </span>
-                </header>
-            </div>
-        </div>
-        <div id="externals_menu">
-            <div class="card is-fullwidth" id="plus-minus-info" style="
-          margin-top: 0.5rem;
-          margin-bottom: 0px;
-          height: 2.5rem;
-          padding: 0.7rem;
-        ">
-                <div class="columns is-vcentered is-mobile">
-                    <div class="column" style="text-align: center">
-                        <button class="button is-small" id="external_add" style="
-                border-color: transparent;
-                font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
-                  Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                  'Helvetica Neue', Helvetica, Arial, sans-serif;
-              ">
-                            <img src="/static/images/fa/plus.svg" class="cl-external-link-img" />
-                        </button>
-                    </div>
-                    <div class="column is-narrow" style="text-align: center">|</div>
-                    <div class="column" style="text-align: center">
-                        <button class="button is-small" id="external_minus" style="
-                border-color: transparent;
-                font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
-                  Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                  'Helvetica Neue', Helvetica, Arial, sans-serif;
-              ">
-                            <img src="/static/images/fa/minus.svg" class="cl-external-link-img" />
-                        </button>
-                    </div>
-                    <div class="column is-narrow" style="text-align: center">|</div>
-                    <div class="column" style="text-align: center">
-                        <div id="external-info-button" style="text-align: center">
-                            <div style="cursor: pointer" id="externals_layout_button"
-                                onclick="toggleExternalsLayout();">
-                                <img id="id-externals-layout-img" class="cl-external-link-img"
-                                    src="/static/images/fa/list.svg" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="external_link_add_box" style="margin: 0.5rem" hidden="">
-                <div class="box is-fullwidth is" style="margin: 0; padding: 0.5rem">
-                    <input class="input is-small" id="new_external_label" placeholder="Search Label" style="
-              margin: 0.25rem;
-              font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
-                Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                'Helvetica Neue', Helvetica, Arial, sans-serif;
-            " />
-                    <input class="input is-small" id="new_external_link"
-                        placeholder="Search Link (https://is.com/results?q=)" style="
-              margin: 0.25rem;
-              font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
-                Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                'Helvetica Neue', Helvetica, Arial, sans-serif;
-            " />
-                    <input class="input is-small" id="new_external_icon"
-                        placeholder="Icon Link (https://is.com/img.png)" style="
-              margin: 0.25rem;
-              font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
-                Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-                'Helvetica Neue', Helvetica, Arial, sans-serif;
-            " />
-                </div>
-                <button class="button is-small is-outlined" id="external_input_add" style="
-            float: right;
-            margin: 0.5rem;
-            font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
-              Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-              'Helvetica Neue', Helvetica, Arial, sans-serif;
-          ">
-                    Add
-                </button>
-                <button class="button is-small is-outlined is-danger" id="external_input_cancel" style="
-            float: right;
-            margin-top: 0.5rem;
-            font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
-              Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-              'Helvetica Neue', Helvetica, Arial, sans-serif;
-          ">
-                    Cancel
-                </button>
-            </div>
-            <div id="external_input_defaults" hidden="">
-                <button class="button is-small is-outlined is-danger" id="external_input_defaults_button" style="
-            float: right;
-            margin-top: 0.5rem;
-            font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
-              Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-              'Helvetica Neue', Helvetica, Arial, sans-serif;
-          ">
-                    Reset
-                </button>
-            </div>
-        </div>
-        <br />
-    </div>
-
-    
-</div>

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -1,3 +1,4 @@
+// detail-dataset.component.ts
 import { Component, Vue, Prop } from "vue-facing-decorator";
 import { DbDataset } from "@/models/dataset";
 import DatasetService from "../../services/dataset.service";
@@ -9,11 +10,14 @@ import { Suggestion } from "@/models/dataset";
 import { VUE_API } from "@/constants";
 // import DataMetricsBadge from "data-metrics-badge/dist/data-metrics-badge.js";
 // import DataMetricsBadge from "@/components/datacite/DataMetricsBadge.vue";
+import Minimap from '@/components/minimap/Minimap.vue';
+import * as L from 'leaflet';
 
 @Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,
+        Minimap,
         // DataMetricsBadge,
     },
 })
@@ -172,4 +176,6 @@ export default class DatasetDetailComponent extends Vue {
         citation += ", Wien";
         return citation;
     }
+
+    
 }

src/views/dataset-detail.component/dataset-detail.component.vue

@@ -1,3 +1,4 @@
+<!-- detail-dataset.component.vue -->
 <template v-if="datasetId">
     <!-- <div class="container">
         <section class="section" v-if="dataset != undefined">
@@ -9,35 +10,6 @@
         </section>
     </div> -->
     <div class="container-fluid banner mz-5">
-        <!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
-            <div class="search-box mx-auto">
-                <div class="field has-addons main-search-from-bg">
-                    <div class="control is-expanded">
-                        <input
-                            v-on:input="searchChanged"
-                            id="search_query"
-                            class="input is-medium"
-                            type="text"
-                            name="q"
-                            autocomplete="off"
-                            v-model="display"
-                            v-bind:placeholder="placeholder"
-                            v-on:keydown.down="onArrowDown"
-                            v-on:keydown.up="onArrowUp"
-                            v-on:keydown.enter="onEnter"
-                            @keydown.tab="close"
-                            v-on:focus="focus"
-                        />                      
-                    </div>
-                    <div class="control">
-                        <button class="button input is-medium search-button-icon" @click="search()">
-                            <i class="fas fa-search text-white"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div> -->
-        <!-- <simple-search-component></simple-search-component> -->
         <vs-input v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
     </div>
     <section v-if="loaded" class="section">
@@ -186,6 +158,12 @@
                             <!-- <data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge> -->
                         </div>
                     </div>
+                    <div class="card">
+                        <div class="column">
+                            <!-- <h3 class="label uppercase">MAP</h3> -->
+                            <Minimap :bounds="dataset.Bounds"></Minimap>
+                        </div>
+                    </div>
                     <div class="card">
                         <div class="column">
                             <h3 class="label uppercase">Beitragende/Contributor</h3>
@@ -322,11 +300,13 @@
 </template>
 
 <script lang="ts">
+import Minimap from "@/components/Minimap.vue";
 import DatasetDetailComponent from "./dataset-detail.component";
 export default DatasetDetailComponent;
 </script>
 
 <style scoped lang="scss">
+// @import 'leaflet/dist/leaflet.css';
 .section {
     font-size: 0.8rem;
     padding: 0;