diff --git a/solid/src/App.tsx b/solid/src/App.tsx
index a41d209..88aa24b 100644
--- a/solid/src/App.tsx
+++ b/solid/src/App.tsx
@@ -1,27 +1,8 @@
import type { Component } from 'solid-js';
-
-import logo from './logo.svg';
-import styles from './App.module.css';
+import Map from './components/map';
const App: Component = () => {
- return (
-
-
-
- );
+ return ;
};
export default App;
diff --git a/solid/src/components/map/Map.css b/solid/src/components/map/Map.css
new file mode 100644
index 0000000..cc1165f
--- /dev/null
+++ b/solid/src/components/map/Map.css
@@ -0,0 +1,17 @@
+.ol-map {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+.ol-control {
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.4);
+ border-radius: 4px;
+ padding: 2px;
+}
+.ol-full-screen {
+ top: 0.5em;
+ right: 0.5em;
+}
diff --git a/solid/src/components/map/Map.tsx b/solid/src/components/map/Map.tsx
new file mode 100644
index 0000000..a16484a
--- /dev/null
+++ b/solid/src/components/map/Map.tsx
@@ -0,0 +1,45 @@
+import { Component, createSignal, onMount } from 'solid-js';
+import OlMap from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import Attribution from 'ol/control/Attribution';
+import Rotate from 'ol/control/Rotate';
+import ScaleLine from 'ol/control/ScaleLine';
+import Control from 'ol/control/Control';
+import OSM from 'ol/source/OSM';
+import { useGeographic as olUseGeographic } from 'ol/proj';
+
+import 'ol/ol.css';
+import './Map.css';
+
+const Map: Component = () => {
+ const [getMap, setMap] = createSignal(null);
+ let target: HTMLDivElement;
+
+ onMount(() => {
+ const olMap = new OlMap({
+ view: new View({
+ center: [0, 0],
+ zoom: 1,
+ }),
+ layers: [
+ new TileLayer({
+ source: new OSM(),
+ }),
+ //new VectorLayer({ source: newSource }),
+ ],
+ target: target,
+ // controls,
+ });
+ // olMap.on(['moveend'], changeListener);
+ setMap(olMap);
+ });
+
+ // @ts-ignore
+ return ;
+};
+
+export default Map;
diff --git a/solid/src/components/map/index.tsx b/solid/src/components/map/index.tsx
new file mode 100644
index 0000000..84bebe9
--- /dev/null
+++ b/solid/src/components/map/index.tsx
@@ -0,0 +1 @@
+export { default } from './Map';
diff --git a/solid/src/index.css b/solid/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/solid/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/solid/src/index.tsx b/solid/src/index.tsx
index 6362c7b..b83a025 100644
--- a/solid/src/index.tsx
+++ b/solid/src/index.tsx
@@ -1,7 +1,5 @@
/* @refresh reload */
import { render } from 'solid-js/web';
-
-import './index.css';
import App from './App';
render(() => , document.getElementById('root') as HTMLElement);
diff --git a/solid/src/logo.svg b/solid/src/logo.svg
deleted file mode 100644
index 025aa30..0000000
--- a/solid/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file