update App.js, src/components/LeafletMap/index.js and src/components/LeafletMap/index.scss

master
Your Name 2 years ago
parent 7745e5728c
commit 544a18793f
  1. 4
      src/App.js
  2. 36
      src/components/LeafletMap/index.js
  3. 1
      src/components/LeafletMap/index.scss

@ -138,7 +138,7 @@ function App() {
{/* <DistributedData /> */} {/* <DistributedData /> */}
{/* <CardDesign1 /> */} {/* <CardDesign1 /> */}
{/* <CardDesign2 /> */} {/* <CardDesign2 /> */}
{/* <LeafletMap /> */} <LeafletMap />
{/* *************************************************** mini components *************************************************** */} {/* *************************************************** mini components *************************************************** */}
@ -171,7 +171,7 @@ function App() {
{/* <IndianaDragScroll /> */} {/* <IndianaDragScroll /> */}
{/* <IconText /> */} {/* <IconText /> */}
{/* <CustomToast /> */} {/* <CustomToast /> */}
<DateRangePicker /> {/* <DateRangePicker /> */}
{/* <div className="flex"> {/* <div className="flex">
<SidebarDesign2 className="w-1/5" /> <SidebarDesign2 className="w-1/5" />
<span className="w-4/5 "> <span className="w-4/5 ">

@ -6,6 +6,7 @@ import {
FeatureGroup, FeatureGroup,
Rectangle, Rectangle,
useMap, useMap,
Popup,
Marker, Marker,
LayerGroup, LayerGroup,
ZoomControl, ZoomControl,
@ -22,10 +23,34 @@ import "./index.scss";
import grid from "../../assets/images/grid.png"; import grid from "../../assets/images/grid.png";
// import placeholder from "../placeholder.png"; import placeholder from "./placeholder.png";
import * as L from "leaflet"; 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 = { L.drawLocal = {
draw: { draw: {
toolbar: { toolbar: {
@ -63,6 +88,7 @@ L.drawLocal = {
}, },
}, },
marker: { marker: {
// icon: MyCustomMarker,
tooltip: { tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.", start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
}, },
@ -146,6 +172,8 @@ const LeafletMap = () => {
console.log({ drawnItems }); console.log({ drawnItems });
}; };
const location = [38.9072, -77.0369];
return ( return (
<MapContainer <MapContainer
center={[49.505, -2.09]} center={[49.505, -2.09]}
@ -171,6 +199,12 @@ const LeafletMap = () => {
maxNativeZoom={24} maxNativeZoom={24}
opacity={0.5} opacity={0.5}
/> />
<Marker
position={[49.505, -2.09]}
// icon={pinMB}
>
<Popup>{bedNumb}</Popup>
</Marker>
<FeatureGroup ref={leafEl}> <FeatureGroup ref={leafEl}>
<EditControl <EditControl
position="topright" position="topright"

@ -1,3 +1,4 @@
.leaflet-popup-content,
.leaflet-draw-toolbar a, .leaflet-draw-toolbar a,
span, span,
title, title,

Loading…
Cancel
Save