add geomap components

src/App.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
-import GeoMap from './geomap/geomap'
+import GeoMap from './components/geomap/geomap'
 
 function App() {
   const [count, setCount] = useState(0)

src/components/geomap/geomap.tsx

@@ -0,0 +1,68 @@
+import {
+  MapContainer,
+  Marker,
+  TileLayer,
+  Popup,
+  useMap,
+  useMapEvents,
+  useMapEvent,
+  CircleMarker,
+  LayerGroup,
+  Circle,
+} from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "./gepmap.css";
+import { useState } from "react";
+import { LatLng, LatLngTuple } from "leaflet";
+import MarkerClusterGroup from "react-leaflet-cluster";
+
+function LocationMarker() {
+  const [markers, setMarkers] = useState<LatLng[]>([]); //[new LatLng(31.979163245291875, 34.89121019840241)]
+  useMapEvent("dblclick", (e) => setMarkers([...markers, e.latlng]));
+
+  return markers.map((marker, index) => {
+    return (
+      <Circle
+        key={index}
+        center={marker}
+        radius={200}
+        className="circle-marker"
+      >
+        <Popup>
+          <button
+            onClick={function () {
+              console.log(index);
+              setMarkers(function (prevMarkers) {
+                prevMarkers.splice(index, 1);
+                return [...prevMarkers];
+              });
+              console.log(markers);
+            }}
+          >
+            remove
+          </button>
+        </Popup>
+      </Circle>
+    );
+  });
+}
+
+function GeoMap() {
+  const position = new LatLng(31.979163245291875, 34.89121019840241);
+  return (
+    <div>
+      <MapContainer id="map" center={position} zoom={13} scrollWheelZoom={true}>
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <MarkerClusterGroup animate={true} animateAddingMarkers={false}>
+          <LocationMarker />
+        </MarkerClusterGroup>
+        <LayerGroup>{/* <CircleLayer/> */}</LayerGroup>
+      </MapContainer>
+    </div>
+  );
+}
+
+export default GeoMap;

src/geomap/geomap.tsx

@@ -1,53 +0,0 @@
-import { MapContainer, Marker, TileLayer, Popup, useMap, useMapEvents, useMapEvent, CircleMarker, LayerGroup, Circle,  } from 'react-leaflet'
-import 'leaflet/dist/leaflet.css';
-import './gepmap.css'
-import { useState } from 'react';
-import { LatLng, LatLngTuple } from 'leaflet';
-import MarkerClusterGroup from 'react-leaflet-cluster'
-
-function LocationMarker() {
-    const [markers, setMarkers] = useState<LatLng[]>([]); //[new LatLng(31.979163245291875, 34.89121019840241)]
-    useMapEvent('dblclick', (e) => setMarkers([...markers, e.latlng]))
-    useMapEvent('zoomanim', (e) => console.log(e))
-    
-    return markers.map((marker, index) => {
-        return <Circle key={index} center={marker} radius={300}>
-                <Popup>
-                    <button onClick={function () {
-                        console.log(index);
-                        setMarkers(function (prevMarkers) { 
-                            prevMarkers.splice(index, 1);
-                            return [...prevMarkers]
-                        })
-                        console.log(markers)
-                        }}>
-                        remove
-                    </button>
-                </Popup>
-            </Circle>
-        }
-    )
-}
-
-function GeoMap() {
-    const position = new LatLng(31.979163245291875, 34.89121019840241)
-    return (
-        <div>
-            <MapContainer id='map' center={position} zoom={13} scrollWheelZoom={true}>
-                <TileLayer
-                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                />
-                <MarkerClusterGroup animate={true} animateAddingMarkers={false}>
-                    <LocationMarker/>
-                </MarkerClusterGroup>
-                <LayerGroup>
-                    {/* <CircleLayer/> */}
-                </LayerGroup>
-            </MapContainer>
-
-        </div>
-    )
-}
-
-export default GeoMap

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import GeoMap from './geomap/geomap.tsx'
+import GeoMap from './components/geomap/geomap.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(