Add the function of replacing the map API

proto/api/v1/user_service.proto

@@ -405,6 +405,8 @@ message UserSetting {
     // This references a CSS file in the web/public/themes/ directory.
     // If not set, the default theme will be used.
     string theme = 4 [(google.api.field_behavior) = OPTIONAL];
+    // The user's map tile layer provider.
+    string map_tile_layer_provider = 5 [(google.api.field_behavior) = OPTIONAL];
   }
 
   // User authentication sessions configuration.

proto/gen/openapi.yaml

@@ -3459,6 +3459,9 @@ components:
                 theme:
                     type: string
                     description: "The preferred theme of the user.\r\n This references a CSS file in the web/public/themes/ directory.\r\n If not set, the default theme will be used."
+                mapTileLayerProvider:
+                    type: string
+                    description: The user's map tile layer provider.
             description: General user settings configuration.
         UserSetting_SessionsSetting:
             type: object

proto/store/user_setting.proto

@@ -41,6 +41,8 @@ message GeneralUserSetting {
   // The user's theme preference.
   // This references a CSS file in the web/public/themes/ directory.
   string theme = 3;
+  // The user's map tile layer provider.
+  string map_tile_layer_provider = 4;
 }
 
 message SessionsUserSetting {

server/router/api/v1/user_service.go

@@ -305,9 +305,10 @@ func (s *APIV1Service) DeleteUser(ctx context.Context, request *v1pb.DeleteUserR
 
 func getDefaultUserGeneralSetting() *v1pb.UserSetting_GeneralSetting {
 	return &v1pb.UserSetting_GeneralSetting{
-		Locale:         "en",
-		MemoVisibility: "PRIVATE",
-		Theme:          "",
+		Locale:               "en",
+		MemoVisibility:       "PRIVATE",
+		Theme:                "",
+		MapTileLayerProvider: "",
 	}
 }
 
@@ -390,9 +391,10 @@ func (s *APIV1Service) UpdateUserSetting(ctx context.Context, request *v1pb.Upda
 	}
 
 	updatedGeneral := &v1pb.UserSetting_GeneralSetting{
-		MemoVisibility: generalSetting.GetMemoVisibility(),
-		Locale:         generalSetting.GetLocale(),
-		Theme:          generalSetting.GetTheme(),
+		MemoVisibility:       generalSetting.GetMemoVisibility(),
+		Locale:               generalSetting.GetLocale(),
+		Theme:                generalSetting.GetTheme(),
+		MapTileLayerProvider: generalSetting.GetMapTileLayerProvider(),
 	}
 
 	// Apply updates for fields specified in the update mask
@@ -405,6 +407,8 @@ func (s *APIV1Service) UpdateUserSetting(ctx context.Context, request *v1pb.Upda
 			updatedGeneral.Theme = incomingGeneral.Theme
 		case "locale":
 			updatedGeneral.Locale = incomingGeneral.Locale
+		case "mapTileLayerProvider":
+			updatedGeneral.MapTileLayerProvider = incomingGeneral.MapTileLayerProvider
 		default:
 			// Ignore unsupported fields
 		}
@@ -1166,9 +1170,10 @@ func convertUserSettingFromStore(storeSetting *storepb.UserSetting, userID int32
 		if general := storeSetting.GetGeneral(); general != nil {
 			setting.Value = &v1pb.UserSetting_GeneralSetting_{
 				GeneralSetting: &v1pb.UserSetting_GeneralSetting{
-					Locale:         general.Locale,
-					MemoVisibility: general.MemoVisibility,
-					Theme:          general.Theme,
+					Locale:               general.Locale,
+					MemoVisibility:       general.MemoVisibility,
+					Theme:                general.Theme,
+					MapTileLayerProvider: general.MapTileLayerProvider,
 				},
 			}
 		} else {
@@ -1254,9 +1259,10 @@ func convertUserSettingToStore(apiSetting *v1pb.UserSetting, userID int32, key s
 		if general := apiSetting.GetGeneralSetting(); general != nil {
 			storeSetting.Value = &storepb.UserSetting_General{
 				General: &storepb.GeneralUserSetting{
-					Locale:         general.Locale,
-					MemoVisibility: general.MemoVisibility,
-					Theme:          general.Theme,
+					Locale:               general.Locale,
+					MemoVisibility:       general.MemoVisibility,
+					Theme:                general.Theme,
+					MapTileLayerProvider: general.MapTileLayerProvider,
 				},
 			}
 		} else {

web/src/components/LeafletMap.tsx

@@ -3,6 +3,7 @@ import { MapPinIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import ReactDOMServer from "react-dom/server";
 import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
+import { userStore } from "@/store";
 
 const markerIcon = new DivIcon({
   className: "relative border-none",
@@ -48,11 +49,22 @@ interface MapProps {
 
 const DEFAULT_CENTER_LAT_LNG = new LatLng(48.8584, 2.2945);
 
+// Create a mapping for common map tile providers. If the user-supplied mapTileLayerProvider is not in the map, use it directly as the tile layer URL.
+
+const generalSetting = userStore.state.userGeneralSetting;
+
 const LeafletMap = (props: MapProps) => {
   const position = props.latlng || DEFAULT_CENTER_LAT_LNG;
+  // Default to OpenStreetMap if not set, otherwise use the set value as the URL
+  let tileLayerUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  const tileLayerProvider = generalSetting?.mapTileLayerProvider;
+  if (tileLayerProvider && tileLayerProvider.trim() !== "") {
+    tileLayerUrl = tileLayerProvider;
+  }
+
   return (
     <MapContainer className="w-full h-72" center={position} zoom={13} scrollWheelZoom={false}>
-      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+      <TileLayer url={tileLayerUrl} />
       <LocationMarker position={position} readonly={props.readonly} onChange={props.onChange ? props.onChange : () => {}} />
     </MapContainer>
   );