diff --git a/src/App.js b/src/App.js
index 5516ea6..584c521 100644
--- a/src/App.js
+++ b/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() {
{/* */}
{/* */}
{/* */}
+
{/* *************************************************** mini components *************************************************** */}
{/* */}
{/* */}
@@ -171,7 +172,7 @@ function App() {
{/* */}
{/* */}
{/* */}
-
+ {/* */}
{/*
diff --git a/src/components/LeafletMap/Grid.js b/src/components/LeafletMap/Grid.js
new file mode 100644
index 0000000..367dc34
--- /dev/null
+++ b/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);
diff --git a/src/components/LeafletMap/index.js b/src/components/LeafletMap/index.js
new file mode 100644
index 0000000..1c4a89f
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LeafletMap;
diff --git a/src/components/LeafletMap/index.scss b/src/components/LeafletMap/index.scss
new file mode 100644
index 0000000..89e0beb
--- /dev/null
+++ b/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;
+}