From 4f0e31f0cab3a6aebbad1d5a9d37a193cc4e4d3c Mon Sep 17 00:00:00 2001
From: RudiThoeni <r.thoeni@noi.bz.it>
Date: Tue, 14 Nov 2023 17:53:46 +0100
Subject: [PATCH] cleaning up adding onclick

---
 src/App.vue                                   | 24 +++++-
 src/components/detailComponents/Weather.vue   |  1 -
 .../detailComponents/WeatherMap.vue           | 77 +++++--------------
 3 files changed, 41 insertions(+), 61 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3761efa..9ce36b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -74,6 +74,27 @@ import ItemDetail from './components/ItemDetail.vue';
 import VueI18n from 'vue-i18n';
 import Spinner from './components/Spinner.vue';
 
+import { LMap, LTileLayer, LMarker, } from 'vue2-leaflet';
+import { Icon } from 'leaflet';
+//import 'leaflet/dist/leaflet.css';
+
+Vue.component('l-map', LMap);
+Vue.component('l-tile-layer', LTileLayer);
+Vue.component('l-marker', LMarker);
+
+type D = Icon.Default & {
+  _getIconUrl?: string;
+};
+
+delete (Icon.Default.prototype as D)._getIconUrl;
+
+//Hack to load icons
+Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+});
+
 import messagesEn from '@/assets/locales/en.json';
 import messagesDe from '@/assets/locales/de.json';
 import messagesIt from '@/assets/locales/it.json';
@@ -247,9 +268,10 @@ export default Vue.extend({
 
 <style lang="scss">
 @import './assets/scss/styles.scss';
+@import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css';
 
 #app {
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;  
 }
 </style>
diff --git a/src/components/detailComponents/Weather.vue b/src/components/detailComponents/Weather.vue
index 77c84ed..9a13770 100644
--- a/src/components/detailComponents/Weather.vue
+++ b/src/components/detailComponents/Weather.vue
@@ -147,7 +147,6 @@ export default Vue.extend({
         )
         .then((value) => {
           this.rawMeasuringpoints = value.data.length === 0 ? null : value.data;
-          console.log(this.rawMeasuringpoints);
         });
     },
   },
diff --git a/src/components/detailComponents/WeatherMap.vue b/src/components/detailComponents/WeatherMap.vue
index 4df632d..21e7e2e 100644
--- a/src/components/detailComponents/WeatherMap.vue
+++ b/src/components/detailComponents/WeatherMap.vue
@@ -7,19 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <div>
     <div>
-      <!-- <div id="mapContainer"></div> -->
       <l-map
         :center="center"
         :zoom="zoom"
         class="map"
-        ref="myMap"               
-        @ready="doSomethingOnReady"
-      >  <!-- @update:center="centerUpdated" -->
-      <l-tile-layer
+        ref="myMap"           
+        @click="resizeMap"                            
+      >
+        <l-tile-layer
           :url="url"
         >             
         </l-tile-layer>  
-      <l-marker 
+        <l-marker 
         :lat-lng="center"
         >        
         </l-marker>
@@ -28,45 +27,25 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         >                   
         <!-- <l-popup :options="{ autoClose: false, closeOnClick: false }" :content="getMarkerContent(marker)"></l-popup>   -->
         </l-marker>         
-        <l-layer-group ref="popups">
-          <l-popup>Hallo</l-popup>
-        </l-layer-group>
       </l-map>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import L from 'leaflet';
-import { LMap, LTileLayer, LMarker, LPopup, LLayerGroup, } from 'vue2-leaflet';
+import { LMap, LTileLayer, LMarker, LPopup, LLayerGroup } from 'vue2-leaflet';
 import { LatLngTuple } from 'leaflet';
 import { WeatherApi } from '@/api/api';
 import { Measuringpoint, SkiAreaLinked } from '@/api/models';
 import Vue, { PropType } from 'vue';
-import { Icon } from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-
-type D = Icon.Default & {
-  _getIconUrl?: string;
-};
-
-delete (Icon.Default.prototype as D)._getIconUrl;
-
-//Hack to load icons
-Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-});
-
 
 export default Vue.extend({
   components: {
     LMap,
     LTileLayer,
     LMarker,
-    LPopup,
-    LLayerGroup
+    // LPopup,
+    // LLayerGroup
   },
   props: {
     item: {
@@ -106,7 +85,7 @@ export default Vue.extend({
     return data;
   },
   // mounted() {
-  //  this.setupLeafletMap();
+  //  this.doSomethingOnReady();
   // },
   computed: {
     measuringpoints():
@@ -161,12 +140,6 @@ export default Vue.extend({
     init() {
       this.loadMeasuringpoints();
     },
-    // setupLeafletMap() {
-    //   const mapDiv = L.map("mapContainer").setView(this.center!, 13);
-    //   L.tileLayer(
-    //     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',        
-    //   ).addTo(mapDiv);
-    // },
     loadMeasuringpoints() {
       if (!this.item.Id) return;
       new WeatherApi()
@@ -198,33 +171,19 @@ export default Vue.extend({
           this.rawMeasuringpoints = value.data.length === 0 ? null : value.data;
                             
           this.center = [this.item.Latitude!, this.item.Longitude!]
-
-          //var myobject = this.$refs.features.mapObject as L.map
-          
-          //.openPopup(this.center);
-
-          //https://vue2-leaflet.netlify.app/faq/#my-map-and-or-markers-don-t-fully-render-what-gives
+                    
         });
     },
-  //   centerUpdated (center: LatLngTuple) {
-  //         this.center = center;
-  //         //L.map("mapContainer").setView(this.center!, 15);
-        
-  //  },
-   doSomethingOnReady() {
-        const mymap = (this.$refs?.myMap as unknown as L.Map);
-        console.log('ready');
-        
-        //working
-        mymap.setZoom(10);
+  resizeMap() {
+        const mymap = (this.$refs?.myMap as LMap).mapObject;
 
-        //vue.runtime.esm.js:3049  TypeError: mymap.invalidateSize is not a function
-        //mymap.invalidateSize(true);
-        //vue.runtime.esm.js:3049  TypeError: mymap.invalidateSize is not a function
+        console.log('refresh map');
         
-        mymap.setView(this.center, this.zoom);
-        //vue.runtime.esm.js:3049  TypeError: mymap.invalidateSize is not a function
-        //mymap.setTimeout(function(){map.invalidateSize(true);},500);;
+        //working
+        //mymap.setZoom(10);        
+        mymap.invalidateSize();
+        //mymap.setView([40.7225, -74.0025], 14);
+        //mymap.setTimeout(function(){mymap.invalidateSize(true);},500);;
    },
    returnMarkerLatLng(marker: Measuringpoint)
    {