update App.js

src/App.js

@@ -63,7 +63,6 @@ import PopupCard from "./components/PopupCard";
 import OutlineInput from "./components/OutlineInput";
 import CancleIcon from "./components/CancleIcon";
 import ButtonNewDesign from "./components/ButtonNewDesign";
-// import TimeLine from "./components/TimeLine";
 import TimeLineComponent from "./components/TimeLineComponent";
 
 import TitleSubtitle from "./components/TitleSubtitle";
@@ -85,6 +84,7 @@ import CardDesign2 from "./components/CardDesign2";
 import ButtonDivTag from "./components/ButtonDivTag";
 import Button from "./components/Button";
 import LeafLet from "./components/LeafLet";
+import LeafletMap from "./components/LeafletMap";
 import CssCountdown from "./components/CssCountdown";
 
 // import Digikala from "./components/Digikala/ImageSlider";
@@ -141,6 +141,7 @@ function App() {
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}
         {/* <LeafLet /> */}
+        <LeafletMap />
         {/* *************************************************** mini components ***************************************************  */}
         {/* <Button /> */}
         {/* <ButtonDesign /> */}
@@ -171,7 +172,7 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
-        <CssCountdown />
+        {/* <CssCountdown /> */}
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/LeafletMap/Grid.js

@@ -0,0 +1,31 @@
+import L from "leaflet";
+import { GridLayer, withLeaflet } from "react-leaflet";
+
+class Grid extends GridLayer {
+  createLeafletElement() {
+    const Grid = L.GridLayer.extend({
+      createTile: () => {
+        const tile = document.createElement("div");
+        tile.style.outline = "1px solid black";
+        return tile;
+      },
+    });
+    return new Grid({ tileSize: 100 });
+  }
+
+  componentDidMount() {
+    const { map } = this.props.leaflet;
+    if (this.props.showGrid) this.leafletElement.addTo(map);
+  }
+
+  updateLeafletElement(fromProps, toProps) {
+    const { map } = this.props.leaflet;
+    if (toProps.showGrid !== fromProps.showGrid) {
+      toProps.showGrid
+        ? this.leafletElement.addTo(map)
+        : this.leafletElement.removeFrom(map);
+    }
+  }
+}
+
+export default withLeaflet(Grid);

src/components/LeafletMap/index.js

@@ -0,0 +1,78 @@
+import React, { useState, useRef, useMemo } from "react";
+import {
+  MapContainer,
+  TileLayer,
+  FeatureGroup,
+  Rectangle,
+  useMap,
+  LayerGroup,
+  ZoomControl,
+  ScaleControl,
+} from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-draw/dist/leaflet.draw.css";
+import { EditControl } from "react-leaflet-draw";
+import "leaflet-draw";
+import "./index.scss";
+import grid from "../../assets/images/grid.png";
+// import Grid from "./Grid";
+const outerBounds = [
+  [50.505, -29.09],
+  [52.505, 29.09],
+];
+
+const LeafletMap = () => {
+  const leafEl = useRef(null);
+  const onCreated = (e) => {
+    const drawnItems = leafEl.current._layers;
+    console.log({ drawnItems });
+    // if (Object.keys(drawnItems).length > 1) {
+    //   Object.keys(drawnItems).forEach((layerid, index) => {
+    //     if (index > 0) return;
+    //     const layer = drawnItems[layerid];
+    //     leafEl.current.removeLayer(layer);
+    //   });
+    //   console.log(drawnItems);
+    // }
+  };
+
+  return (
+    <MapContainer
+      center={[49.505, -2.09]}
+      zoom={24}
+      maxZoom={24}
+      maxNativeZoom={22}
+      style={{ height: "100vh" }}
+      zoomControl={false}
+      bounds={outerBounds}
+    >
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
+        apikey="db5ae1f5778a448ca662554581f283c5"
+        maxZoom={24}
+        maxNativeZoom={22}
+        opacity={0.8}
+      />
+      <TileLayer
+        url={grid}
+        apikey="db5ae1f5778a448ca662554581f283c5"
+        maxZoom={24}
+        maxNativeZoom={24}
+        opacity={0.5}
+      />
+      <FeatureGroup ref={leafEl}>
+        <EditControl
+          position="topright"
+          onCreated={onCreated}
+          allowIntersection={false}
+        />
+      </FeatureGroup>
+      <LayerGroup></LayerGroup>
+      <ScaleControl position="topleft" />
+      <ZoomControl position="topleft" />
+    </MapContainer>
+  );
+};
+
+export default LeafletMap;

src/components/LeafletMap/index.scss

@@ -0,0 +1,12 @@
+.leaflet-container {
+  width: 100%;
+  height: 100vh;
+}
+.leaflet-control-scale-line:not(:first-child) {
+  display: none !important;
+}
+.leaflet-tile {
+  border: 1px solid gray;
+
+  box-sizing: content-box;
+}