More style tweaks, add geoip server

Docs/ServerConfig/hetzner/Caddyfile

@@ -34,5 +34,7 @@ lod.mapcomplete.org {
 }
 
 ipinfo.mapcomplete.org {
-    reverse_proxy 127.0.0.1:2347
+    reverse_proxy {
+        to 127.0.0.1:2347
+    }
 }

package.json

@@ -24,6 +24,7 @@
     "mvt_layer_server": "https://cache.mapcomplete.org/public.{type}_{layer}/{z}/{x}/{y}.pbf",
     "#summary_server": "Should be the endpoint; appending status.json should work",
     "summary_server": "https://cache.mapcomplete.org/",
+    "geoip_server":"https://ipinfo.mapcomplete.org/",
     "disabled:oauth_credentials": {
       "##": "DEV",
       "#": "This client-id is registered by 'MapComplete' on https://master.apis.dev.openstreetmap.org/",

src/Logic/Actors/InitialMapPositioning.ts

@@ -6,6 +6,8 @@ import Hash from "../Web/Hash"
 import OsmObjectDownloader from "../Osm/OsmObjectDownloader"
 import { OsmObject } from "../Osm/OsmObject"
 import Constants from "../../Models/Constants"
+import { Utils } from "../../Utils"
+import { GeoLocationState } from "../State/GeoLocationState"
 
 /**
  * This actor is responsible to set the map location.
@@ -13,6 +15,7 @@ import Constants from "../../Models/Constants"
  * - Set the map to the position of the selected element
  * - Set the map to the position as passed in by the query parameters (if available)
  * - Set the map to the position remembered in LocalStorage (if available)
+ * - Set the map to what IP-info says (very coarse)
  * - Set the map to the layout default
  *
  * Additionally, it will save the map location to local storage
@@ -22,7 +25,7 @@ export default class InitialMapPositioning {
     public location: UIEventSource<{ lon: number; lat: number }>
     public useTerrain: Store<boolean>
 
-    constructor(layoutToUse: LayoutConfig) {
+    constructor(layoutToUse: LayoutConfig, geolocationState: GeoLocationState) {
         function localStorageSynced(
             key: string,
             deflt: number,
@@ -52,14 +55,16 @@ export default class InitialMapPositioning {
             layoutToUse?.startZoom ?? 1,
             "The initial/current zoom level"
         )
+        const defaultLat =layoutToUse?.startLat ?? 0
         const lat = localStorageSynced(
             "lat",
-            layoutToUse?.startLat ?? 0,
+           defaultLat ,
             "The initial/current latitude"
         )
+        const defaultLon = layoutToUse?.startLon ?? 0
         const lon = localStorageSynced(
             "lon",
-            layoutToUse?.startLon ?? 0,
+           defaultLon ,
             "The initial/current longitude of the app"
         )
 
@@ -72,6 +77,7 @@ export default class InitialMapPositioning {
         this.useTerrain = new ImmutableStore<boolean>(layoutToUse.enableTerrain)
 
         if (initialHash?.match(/^(node|way|relation)\/[0-9]+$/)) {
+            // We pan to the selected element
             const [type, id] = initialHash.split("/")
             OsmObjectDownloader.RawDownloadObjectAsync(
                 type,
@@ -86,6 +92,19 @@ export default class InitialMapPositioning {
                 const [lat, lon] = osmObject.centerpoint()
                 this.location.setData({ lon, lat })
             })
+        } else if (Constants.GeoIpServer && lat.data === defaultLat && lon.data === defaultLon) {
+            console.log("Using geoip to determine start location...")
+            // We use geo-IP to zoom to some location
+            Utils.downloadJson<{ latitude: number, longitude: number }>(
+                Constants.GeoIpServer + "ip"
+            ).then(({ longitude, latitude }) => {
+                if(geolocationState.currentGPSLocation.data !== undefined){
+                    return // We got a geolocation by now, abort
+                }
+                console.log("Setting location based on geoip", longitude,  latitude)
+                this.zoom.setData(8)
+                this.location.setData({ lon: longitude, lat: latitude })
+            })
         }
     }
 }

src/Models/Constants.ts

@@ -163,6 +163,8 @@ export default class Constants {
      * This is a MapLibre/MapBox vector tile server which hosts vector tiles for every (official) layer
      */
     public static VectorTileServer: string | undefined = Constants.config.mvt_layer_server
+    public static GeoIpServer: string | undefined = Constants.config.geoip_server
+
     public static readonly maptilerApiKey = "GvoVAJgu46I5rZapJuAy"
     public static readonly SummaryServer: string = Constants.config.summary_server
 

src/Models/ThemeViewState.ts

@@ -158,10 +158,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
             layout.id
         )
         this.map = new UIEventSource<MlMap>(undefined)
-        const initial = new InitialMapPositioning(layout)
+        const geolocationState = new GeoLocationState()
+        const initial = new InitialMapPositioning(layout, geolocationState)
         this.mapProperties = new MapLibreAdaptor(this.map, initial)
 
-        const geolocationState = new GeoLocationState()
 
         this.featureSwitchIsTesting = this.featureSwitches.featureSwitchIsTesting
         this.featureSwitchUserbadge = this.featureSwitches.featureSwitchEnableLogin

src/UI/BigComponents/ThemeButton.svelte

@@ -85,10 +85,11 @@
 </script>
 
 {#if theme.id !== personal.id || $unlockedPersonal}
-  <a class={"button theme-button w-full text-ellipsis"} style="justify-content: start" href={$href}>
-    <img src={theme.icon} class="m-1 mr-2 block h-11 w-11 sm:m-2 sm:mr-4" alt="" />
-    <span class="flex flex-col overflow-hidden text-ellipsis ">
-      <Tr t={title} />
+  <a class={"flex w-full items-center text-ellipsis rounded my-2"} href={$href}>
+    <img src={theme.icon} class="m-1 block h-11 w-11 sm:mr-2" alt="" />
+    <span class="flex flex-col overflow-hidden text-ellipsis font-bold text-xl">
+      <Tr cls="underline" t={title} />
+      <Tr cls="subtle text-base" t={description}/>
 
       {#if selected}
         <span class="thanks hidden-on-mobile" aria-hidden="true">