From 544a18793f8d6bc77bb1a39eb1813e46e716d55f Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 20 Apr 2022 16:32:27 +0430 Subject: [PATCH] update App.js, src/components/LeafletMap/index.js and src/components/LeafletMap/index.scss --- src/App.js | 4 ++-- src/components/LeafletMap/index.js | 36 +++++++++++++++++++++++++++- src/components/LeafletMap/index.scss | 1 + 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 4843b65..2e6ff1b 100644 --- a/src/App.js +++ b/src/App.js @@ -138,7 +138,7 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* *************************************************** mini components *************************************************** */} @@ -171,7 +171,7 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/*
diff --git a/src/components/LeafletMap/index.js b/src/components/LeafletMap/index.js index 5a0f97b..83e33e3 100644 --- a/src/components/LeafletMap/index.js +++ b/src/components/LeafletMap/index.js @@ -6,6 +6,7 @@ import { FeatureGroup, Rectangle, useMap, + Popup, Marker, LayerGroup, ZoomControl, @@ -22,10 +23,34 @@ import "./index.scss"; import grid from "../../assets/images/grid.png"; -// import placeholder from "../placeholder.png"; +import placeholder from "./placeholder.png"; import * as L from "leaflet"; +const bedNumb = "تخت شماره 33"; + +// const pinMB = L.icon({ +// iconUrl: placeholder, +// iconSize: [24, 41], +// iconAnchor: [0, 44], +// popupAnchor: [12, -40], +// shadowUrl: null, +// shadowSize: null, +// shadowAnchor: null, +// }); + +// const MyCustomMarker = L.icon({ +// iconUrl: placeholder, +// iconSize: [24, 41], +// iconAnchor: [0, 44], +// popupAnchor: [12, -40], +// shadowUrl: null, +// shadowSize: null, +// shadowAnchor: null, +// }); + +L.Icon.Default(); + L.drawLocal = { draw: { toolbar: { @@ -63,6 +88,7 @@ L.drawLocal = { }, }, marker: { + // icon: MyCustomMarker, tooltip: { start: "با کلیک بر روی نقشه یک مارکر رسم کنید.", }, @@ -146,6 +172,8 @@ const LeafletMap = () => { console.log({ drawnItems }); }; + const location = [38.9072, -77.0369]; + return ( { maxNativeZoom={24} opacity={0.5} /> + + {bedNumb} +