margins

components/Button.tsx

@@ -6,7 +6,7 @@ export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
     <button
       {...props}
       disabled={!IS_BROWSER || props.disabled}
-      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
+      class="px-2 py-1 border(gray-200 2) hover:bg-gray-400"
     />
   );
 }

components/Navigation.tsx

@@ -0,0 +1,9 @@
+// import { titleApp } from "../utils/settings.ts";
+
+export default function Navigation() {
+  return (
+    <nav class="flex h-[50px] absolute top-0 left-0 right-0 bg-blue-800 text-white items-center justify-between px-4">
+      <h1 class="text-lg font-bold">TEST</h1>
+    </nav>
+  );
+}

deno-fresh.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

fresh.gen.ts

@@ -7,6 +7,7 @@ import * as $0 from "./routes/[name].tsx";
 import * as $1 from "./routes/api/joke.ts";
 import * as $2 from "./routes/index.tsx";
 import * as $$0 from "./islands/Counter.tsx";
+import * as $$1 from "./islands/OLMap.tsx";
 
 const manifest = {
   routes: {
@@ -16,6 +17,7 @@ const manifest = {
   },
   islands: {
     "./islands/Counter.tsx": $$0,
+    "./islands/OLMap.tsx": $$1,
   },
   baseUrl: import.meta.url,
   config,

import_map.json

@@ -8,5 +8,6 @@
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
     "twind": "https://esm.sh/[email protected]",
     "twind/": "https://esm.sh/[email protected]/"
+
   }
 }

islands/Counter.tsx

@@ -9,21 +9,21 @@ interface CounterProps {
 export default  function Counter(props: CounterProps) {
   const [count, setCount] = useState(props.start);
 
-  const testJsonFile = async () => {
-  const file1 = await Deno.open("../data/lu.json", { read: true });
+  // const testJsonFile = async () => {
+  // const file1 = await Deno.open("../data/lu.json", { read: true });
 
-  // let  dataArray = JSON.parse(file1.read())
-  console.log(file1)
+  // // let  dataArray = JSON.parse(file1.read())
+  // console.log(file1)
 
-  }
+  // }
 
 
   return (
     <div class="flex gap-2 w-full">
       <p class="flex-grow-1 font-bold text-xl">{count}</p>
       <Button onClick={() => setCount(count - 1)}>-1</Button>
       <Button onClick={() => setCount(count + 1)}>+1</Button>
-      <Button onClick={testJsonFile}>test </Button>
+      {/* <Button onClick={testJsonFile}>test </Button> */}
 
     </div>
   );

islands/OLMap.tsx

@@ -0,0 +1,72 @@
+import { useState,  useEffect} from "preact/hooks";
+
+// import fs from 'fs'
+
+
+// import Map from 'ol/Map';
+import Map from "https://cdn.jsdelivr.net/npm/[email protected]/Map.js"
+import View from 'https://cdn.jsdelivr.net/npm/[email protected]/View.js';
+import TileLayer from 'https://cdn.jsdelivr.net/npm/[email protected]/Tile.js';
+import XYZ from 'https://cdn.jsdelivr.net/npm/[email protected]/source/XYZ.js';
+import OSM from 'https://cdn.jsdelivr.net/npm/[email protected]/source/OSM.js';
+
+// import "https://cdn.jsdelivr.net/npm/[email protected]/ol.css"
+
+// import {
+//     Map,
+//     View,
+//     TileLayer,
+
+// } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js";
+
+// import View from 'ol/View';
+// import TileLayer from 'ol/layer/Tile';
+// import XYZ from 'ol/source/XYZ';
+
+
+
+interface MapProps {
+  start?: number;
+}
+
+export default  function OLMap(props: MapProps) {
+//   const [count, setCount] = useState(props.start);
+
+const mapInit = ()=> {
+ const mymap =  new Map({
+    target: 'map',
+    layers: [
+      new TileLayer({source: new OSM(),}),
+      // new TileLayer({source: new XYZ({ url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'})}),
+    ],
+    view: new View({
+      center: [70, 60],
+      zoom: 2,
+    })
+
+
+  });
+
+}
+
+useEffect(() => {
+  // Trigger your effect
+
+  mapInit()
+
+  return () => {
+    // Optional: Any cleanup code
+  };
+}, []);
+
+
+
+// class="flex w-full h-full"
+  return (
+
+
+    <div id="map" style="border: 1; height: 800px; width: 100% ;"  />
+
+
+  );
+}

routes/index.tsx

@@ -1,22 +1,36 @@
 import { Head } from "$fresh/runtime.ts";
+import Navigation from "../components/Navigation.tsx";
 import Counter from "../islands/Counter.tsx";
+import OLMap from "../islands/OLMap.tsx";
+
+// import "https://cdn.jsdelivr.net/npm/[email protected]/ol.css"
 
 export default function Home() {
   return (
     <>
       <Head>
-        <title>Fresh App</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" />
+        <title>Map Fresh App</title>
       </Head>
+      <Navigation/>
+
+      <div class="mt-50 max-w-screen-md">
+        <OLMap/>
+      </div>
       <div class="p-4 mx-auto max-w-screen-md">
-        <img
+
+
+        {/* <img
           src="/logo.svg"
           class="w-32 h-32"
           alt="the fresh logo: a sliced lemon dripping with juice"
-        />
-        <p class="my-6">
+        /> */}
+        {/* <p class="my-6">
           Welcome to `fresh`. Try updating this message in the ./routes/index.tsx
           file, and refresh.
-        </p>
+        </p> */}
+
+
         <Counter start={3} />
       </div>
     </>