add http plugin

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": ">=2.0.0-rc.0",
+    "@tauri-apps/plugin-http": "^2.0.0-rc.2",
     "@tauri-apps/plugin-shell": ">=2.0.0-rc.0",
     "ol": "^10.1.0",
     "react": "^18.2.0",
@@ -19,6 +20,7 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": ">=2.0.0-rc.0",
+    "@types/ol": "^6.5.3",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",

src-tauri/Cargo.toml

@@ -19,4 +19,5 @@ tauri = { version = "2.0.0-rc", features = [] }
 tauri-plugin-shell = "2.0.0-rc"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+tauri-plugin-http = "2.0.0-rc"
 

src-tauri/capabilities/default.json

@@ -4,7 +4,8 @@
   "description": "Capability for the main window",
   "windows": ["main"],
   "permissions": [
-    "core:default",
+    "http:default",
+    "core:app:default",
     "shell:allow-open"
   ]
 }

src-tauri/src/lib.rs

@@ -8,6 +8,7 @@ fn greet(name: &str) -> String {
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_http::init())
         .invoke_handler(tauri::generate_handler![greet])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/components/home/Home.tsx

+import { useEffect } from "react";
 import Footer from "../common/Footer";
+import Land from "../land/Land";
 
 const Home = () => {
+
+    useEffect(()=>{
+        
+    },[])
   return (
     <>
+      <Land></Land>
       <Footer></Footer>
     </>
   );

src/components/land/Land.css

+.ol-attribution {
+    display: none;
+  }
\ No newline at end of file

src/components/land/Land.tsx

+import { useEffect, useRef } from "react";
 import Footer from "../common/Footer";
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import 'ol/ol.css';
+import './Land.css'
 
 const Land = ()=>{
-    return(<>
+    const mapRef = useRef(null);
+
+    useEffect(() => {
+      if (mapRef.current) {
+        const map = new Map({
+          target: mapRef.current,
+          layers: [
+            new TileLayer({
+              source: new OSM(),
+            }),
+          ],
+          view: new View({
+            center: [0, 0],
+            zoom: 2,
+          }),
+        });
   
+        return () => {
+          map.setTarget();
+        };
+      }
+    }, []);
+  
+    return(<>
+    <div ref={mapRef}  className=" bottom-14  h-3/5 w-full  absolute"></div>
     <Footer></Footer>
     </>)
 }