Improvement minimap

src/components/minimap/Minimap.ts

@@ -8,12 +8,15 @@ import 'leaflet/dist/leaflet.css';
 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
+
   mounted() {
     const map = L.map('map', {
       center: [47.71, 13.55],
       zoomControl: false, // Disable zoom controls
       zoom: 6,
-      maxZoom: 9,
+      // maxZoom: 9,
       minZoom: 5,
       maxBounds: [
         [45.0, 10.0], // Southwest corner of the bounds
@@ -54,15 +57,66 @@ export default class Minimap extends Vue {
 
     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 L.LatLngExpression;
+      // const center = [southWest[0], southWest[1]] as L.LatLngExpression;
-      const radius = 1000; // You can adjust the radius as needed
+      const center = [southWest[0], southWest[1]] as [number, number];
-      const circle = L.circle(center, { radius, color: '#30D5C8', weight: 4, opacity: 1 }).addTo(map); //336699
+      
+      // const radius = 1000; // You can adjust the radius as needed
+
+      // // Draw a filled circle
+      // var circle = L.circle(center, {
+      //   color: '#30D5C8',       // Outline color
+      //   fillColor: '#336699' ,  // Fill color
+      //   fillOpacity: 1,   // Opacity of the fill
+      //   opacity: 0.5, 
+      //   weight: 10,
+      //   radius: radius         // Radius in meters
+      // }).addTo(map);
+
+      // Using CircleMarker 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
+        radius: 10              // Radius in pixels
+      }).addTo(map);
+
+
+      // // Create an empty circle to adjust the map to it
+      // var circle = L.circle(center, {radius: radius}).addTo(map);
+
+      // // Fit the map's view to the circle's bounds
+      // map.fitBounds(circle.getBounds());
+
+      // Manually create a small bounding box around the marker's center to fit bounds
+      const buffer = 0.01; // Adjust this value to control the area around the marker
+      const markerBounds = L.latLngBounds(
+        [center[0] - buffer, center[1] - buffer], // Southwest corner
+        [center[0] + buffer, center[1] + buffer]  // Northeast corner
+      );
+
+      // Add a click event to the CircleMarker
+      circleMarker.on('click', () => {
+        // map.setView(this.originalCenter, this.originalZoom);
+        map.fitBounds(markerBounds);
+      });
+
+      map.fitBounds(markerBounds);
 
-      // Fit the map's view to the circle's bounds
-      map.fitBounds(circle.getBounds());
     } else {
       // Otherwise, generate a rectangle
-      const rectangle = L.rectangle(this.bounds, { color: '#30D5C8', weight: 2, opacity: 1 }).addTo(map); //336699
+      const rectangle = L.rectangle(this.bounds, { 
+        color: '#30D5C8', 
+        weight: 2, 
+        opacity: 1 
+      }).addTo(map); //336699
+
+      // Add a click event to the Rectangle
+      rectangle.on('click', () => {
+        // map.setView(this.originalCenter, this.originalZoom);
+        map.fitBounds(this.bounds);
+      });
 
       // Fit the map's view to the rectangle's bounds
       map.fitBounds(this.bounds);

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

@@ -10,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">