diff --git a/src/App.tsx b/src/App.tsx index ea03ee3..ff8904b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,5 @@ -import { Redirect, Route } from 'react-router-dom'; -import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react'; -import { IonReactRouter } from '@ionic/react-router'; -import Map from './components/Map/Map'; +import { setupIonicReact } from '@ionic/react'; +import Map from './components/map'; import 'ol/ol.css'; diff --git a/src/components/Map/Map.css b/src/components/map/Map.css similarity index 100% rename from src/components/Map/Map.css rename to src/components/map/Map.css diff --git a/src/components/Map/Map.tsx b/src/components/map/Map.tsx similarity index 71% rename from src/components/Map/Map.tsx rename to src/components/map/Map.tsx index 78b6acf..6336482 100644 --- a/src/components/Map/Map.tsx +++ b/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 = (props: MapProperties) => { const target = useRef(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 = (props: MapProperties) => { }), ], target: target.current ?? undefined, + controls, }); }, []); diff --git a/src/components/map/index.ts b/src/components/map/index.ts new file mode 100644 index 0000000..84bebe9 --- /dev/null +++ b/src/components/map/index.ts @@ -0,0 +1 @@ +export { default } from './Map';