Close keyboard on mobile before loading polygon on map and use custom…

… minimized attribution control for better ui on mobiles.

TODO.md

@@ -28,4 +28,5 @@
 - [] Add close button to the info-container.
 - [] Add directions with [maplibre-gl-directions](https://maplibre.org/maplibre-gl-directions) [https://github.com/maplibre/maplibre-gl-directions](https://github.com/maplibre/maplibre-gl-directions)
 - [] Add distance.
-
+- [x] Hide the keyboard on phone when something is selected. [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur)
+- [] Add loading location spinner.

app/src/main.ts

@@ -1,7 +1,7 @@
 import { Map } from "maplibre-gl";
 import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
-import { ShareControl, FAQControl, hideAllContainers, hideInfo, showSpinButton, hideSpinButton, currentlyDisplayedContainer } from "./ui";
+import { ShareControl, FAQControl, hideAllContainers, hideInfo, showSpinButton, hideSpinButton, currentlyDisplayedContainer, CustomAttributionControl } from "./ui";
 import { FeatureCollection, Feature, Geometry } from "geojson";
 import { fetchPubsInRelation } from "./overpass";
 
@@ -16,6 +16,7 @@ export const map = new Map({
   zoom: 2,
   maxZoom: 18,
   minZoom: 0,
+  attributionControl: false
 });
 
 
@@ -91,13 +92,23 @@ geocoderControl.on('result', async (event: any) => {
     return;
   }
 
+  // remove focus the input field to hide the keyboard on mobile
+  const inputElement = document.getElementsByClassName('maplibregl-ctrl-geocoder--input')[0];
+  if (inputElement instanceof HTMLElement) {
+    inputElement.blur();
+    await (300) // wait for the Map resize to finish after the keyboard is hidden
+  } else {
+    console.error('Element not found or is not an HTMLElement');
+  }
+
   displayBoundaryOnMap(event.result.geometry)
   pubs = await fetchPubsInRelation(event.result.properties.osm_id);
   displayPointsOnMap(pubs)
   showSpinButton();
 });
 
 map.addControl(geocoderControl, "top-right");
+map.addControl(new CustomAttributionControl({ compact: true }), "bottom-right");
 map.addControl(new FAQControl(), "bottom-right");
 map.addControl(new ShareControl("https://whereroulette.com", "Spin the wheel!", "WhereRoulette helps you choose a place to meet! 🌍 Powered by OSM ❤️‍🔥"), "bottom-right");
 

app/src/ui.ts

@@ -1,12 +1,42 @@
 import { library, icon } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion, faShareNodes, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import maplibregl from "maplibre-gl";
 
 // register the icons with the library for future use
 library.add(faQuestion, faShareNodes, faSpinner);
 
 // state variable to keep track of which container is currently displayed
 export let currentlyDisplayedContainer: "faq" | "info" | null = "info";
 
+export class CustomAttributionControl extends maplibregl.AttributionControl {
+  _toggleAttribution = () => {
+    if (this._container.classList.contains("maplibregl-compact")) {
+      if (this._container.classList.contains("maplibregl-compact-show")) {
+        this._container.setAttribute("open", "");
+        this._container.classList.remove("maplibregl-compact-show");
+      } else {
+        this._container.classList.add("maplibregl-compact-show");
+        this._container.removeAttribute("open");
+      }
+    }
+  };
+
+  _updateCompactMinimize = () => {
+    if (this._container.classList.contains("maplibregl-compact")) {
+      if (this._container.classList.contains("maplibregl-compact-show")) {
+        this._container.classList.remove("maplibregl-compact-show");
+      }
+    }
+  };
+
+  onAdd(map: maplibregl.Map) {
+    const container = super.onAdd(map);
+    container.classList.add("maplibregl-compact");
+    this._map.on("mousedown", this._updateCompactMinimize);
+    return container;
+  }
+}
+
 export class FAQControl {
   _map: any;
   _container!: HTMLDivElement;