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

master
Your Name 2 years ago
parent 8f4870ffed
commit c1305f7bac
  1. 176
      src/components/LeafletMap/index.js
  2. 12
      src/components/LeafletMap/index.scss

@ -39,15 +39,15 @@ const pinMB = L.icon({
shadowAnchor: null,
});
const MyCustomMarker = 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.drawLocal = {
draw: {
@ -86,7 +86,7 @@ L.drawLocal = {
},
},
marker: {
icon: MyCustomMarker,
icon: placeholder,
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
},
@ -156,61 +156,125 @@ L.drawLocal = {
},
},
};
const icon = (val, zoom) =>
L.divIcon({
className: "my-div-icon",
html: `<div
style = 'transform: scale(${Math.pow(2, zoom - 23)})'
class='origin-top-left w-20 h-40 bg-white rounded text-center flex flex-col p-2 justify-between transition-all delay-200'>
<p class='h-4 rounded bg-gray-300'> </p>
<p>${val || 0}</p>
</div>`,
});
function MyComponent({ setZoom }) {
const map = useMap();
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
];
return null;
}
const LeafletMap = () => {
const leafEl = useRef(null);
// const map =
const [zoom, setZoom] = useState(22);
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
];
const onCreated = (e) => {
const drawnItems = leafEl.current._layers;
console.log({ drawnItems });
const leafEl = useRef(null);
const mapRef = useRef(null);
const onCreated = () => {
console.log({ next, add });
add(Math.floor(Math.random() * 10));
// const drawnItems = leafEl.current._layers;
// console.log({ drawnItems });
};
const [next, add] = useState(1);
const location = [38.9072, -77.0369];
console.log({ mapRef });
if (mapRef.current) {
console.log(mapRef.current);
}
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"
<div style={{ direction: "ltr" }}>
<MapContainer
whenCreated={(mapInstance) => {
mapInstance.on("zoomend", function () {
console.log(mapRef.current);
setZoom(mapRef.current._zoom);
});
mapRef.current = mapInstance;
}}
center={[49.505, -2.09]}
zoom={zoom}
maxZoom={24}
minZoom={18}
maxNativeZoom={22}
opacity={0.8}
/>
<TileLayer
url={grid}
apikey="db5ae1f5778a448ca662554581f283c5"
maxZoom={24}
maxNativeZoom={24}
opacity={0.5}
/>
<Marker position={[49.505, -2.09]} icon={pinMB}>
<Popup>{bedNumb}</Popup>
</Marker>
<FeatureGroup ref={leafEl}>
<EditControl
position="topright"
onCreated={onCreated}
allowIntersection={false}
style={{ height: "100vh" }}
zoomControl={false}
bounds={outerBounds}
>
{/* <MyComponent setZoom={setZoom} /> */}
<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>
<LayerGroup></LayerGroup>
<ScaleControl position="topleft" />
<ZoomControl position="topleft" />
</MapContainer>
<Marker icon={icon(50, zoom)} position={[49.505, -2.09]}>
{/* <Marker position={[49.505, -2.09]} icon={MyCustomMarker2()}> */}
<Popup>{bedNumb}</Popup>
</Marker>
<FeatureGroup ref={leafEl}>
<EditControl
draw={{
polyline: {
shapeOptions: {
color: "#f357a1",
weight: 1,
},
},
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: "#e1e100", // Color the shape will turn when intersects
message: "<strong>Oh snap!<strong> you can't draw that!", // Message that will show when intersect
},
shapeOptions: {
color: "#bada55",
},
},
circle: false, // Turns off this drawing tool
rectangle: {
shapeOptions: {
clickable: false,
},
},
marker: {
icon: icon(next, zoom),
},
}}
position="topright"
count={next}
onCreated={(e) => {
console.log({ next, e });
onCreated(next);
}}
allowIntersection={false}
/>
</FeatureGroup>
<LayerGroup></LayerGroup>
<ScaleControl position="topleft" />
<ZoomControl position="topleft" />
</MapContainer>
</div>
);
};

@ -30,13 +30,13 @@ li {
display: none !important;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
display: none !important;
}
// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
// display: none !important;
// }
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
display: none !important;
}
// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
// display: none !important;
// }
.leaflet-right .leaflet-draw-actions li:first-child a {
border-radius: 0px !important;

Loading…
Cancel
Save