Reset map size on screen size change (#19)

* add margin on small screens for github buttons

* reset map size when screens are changing and adjust mb for github buttons.

Author: alifarooq93

components/MyLeafletMap.vue

@@ -289,17 +289,30 @@ function clearLegend() {
 
 defineExpose({
   resetSelectedMarker,
+  invalidateMapSize,
 });
 
+function invalidateMapSize() {
+  if (leafletMap) {
+    leafletMap.invalidateSize({ animate: false });
+  }
+}
+
 onMounted(() => {
   if (!map.value)
     return;
 
-  leafletMap = L.map(map.value).setView([54.2194, 9.6961], 8);
+  leafletMap = L.map(map.value, { preferCanvas: true }).setView([54.2194, 9.6961], 8);
 
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '© OpenStreetMap contributors',
   }).addTo(leafletMap);
+  setTimeout(() => invalidateMapSize(), 300);
+  window.addEventListener('resize', invalidateMapSize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', invalidateMapSize);
 });
 
 watch(() => props.fetchedData, (newData) => {

pages/index.vue

@@ -50,7 +50,7 @@
           </ul>
         </div>
 
-        <div class="flex flex-col p-4 mb-10 space-y-1">
+        <div class="flex flex-col p-4 mb-20 lg:mb-10 space-y-1">
           <a
             href="https://github.com/geprog/openkarte/discussions"
             target="_blank"
@@ -230,4 +230,10 @@ watch(feature, async (newval) => {
 watch(locale, (newLocale) => {
   setLocale(newLocale);
 });
+
+watch(sidebarOpen, () => {
+  setTimeout(() => {
+    leafletMapRef.value?.invalidateMapSize?.();
+  }, 300);
+});
 </script>