style: with attribution

Author: bclswl0827

src/components/MapContainer.tsx

@@ -10,7 +10,10 @@ export interface IMapContainer {
     readonly zoom?: number;
     readonly minZoom: number;
     readonly maxZoom: number;
-    readonly tile: string;
+    readonly tileSrc: {
+        readonly url: string;
+        readonly attribution: string;
+    };
     readonly coordinates: number[];
     readonly scrollWheelZoom?: boolean;
     readonly zoomControl?: boolean;
@@ -24,7 +27,7 @@ export const MapContainer = ({
     minZoom,
     maxZoom,
     zoom,
-    tile,
+    tileSrc,
     borderRadius = '8px',
     coordinates,
     scrollWheelZoom,
@@ -78,15 +81,14 @@ export const MapContainer = ({
             zoom={zoom ?? 6}
             scrollWheelZoom={scrollWheelZoom}
             zoomControl={zoomControl}
-            attributionControl={false}
             doubleClickZoom={false}
             dragging={dragging}
             maxZoom={maxZoom}
             minZoom={minZoom}
             center={[latitude, longitude]}
             style={{ cursor: 'default', borderRadius, height }}
         >
-            <TileLayer url={tile} />
+            <TileLayer url={tileSrc.url} attribution={tileSrc.attribution} />
             <Marker position={[latitude, longitude]} icon={icon} />
         </MapBox>
     );

src/schemas/location.tsx

@@ -100,7 +100,10 @@ export const Location = ({ onCreate, onUpdate }: ISchema) => {
                     scrollWheelZoom
                     height={200}
                     onClick={handleMapClick}
-                    tile="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                    tileSrc={{
+                        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                        attribution: '© OpenStreetMap contributors'
+                    }}
                     minZoom={1}
                     maxZoom={18}
                     coordinates={[currentConfig.latitude, currentConfig.longitude]}