Slight refactoring

src/App.tsx

@@ -1,7 +1,5 @@
-import { Redirect, Route } from 'react-router-dom';
+import { setupIonicReact } from '@ionic/react';
-import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import Map from './components/map';
-import { IonReactRouter } from '@ionic/react-router';
-import Map from './components/Map/Map';
 
 import 'ol/ol.css';
 

src/components/map/Map.tsx

@@ -2,9 +2,11 @@ import React, { useEffect, useRef } from 'react';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
+import Attribution from 'ol/control/Attribution';
+import OSM, { ATTRIBUTION } from 'ol/source/OSM';
 
-import './Map.css'
+import './Map.css';
+import Collection from 'ol/Collection';
 
 export interface MapProperties {}
 
@@ -12,6 +14,7 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
   const target = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const controls = new Collection([new Attribution({ collapsible: true })]);
     const map = new OlMap({
       view: new View({
         center: [0, 0],
@@ -23,6 +26,7 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
         }),
       ],
       target: target.current ?? undefined,
+      controls,
     });
   }, []);
 

src/components/map/index.ts

@@ -0,0 +1 @@
+export { default } from './Map';