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

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

@ -39,15 +39,15 @@ const pinMB = L.icon({
shadowAnchor: null, shadowAnchor: null,
}); });
const MyCustomMarker = L.icon({ // const MyCustomMarker = L.icon({
iconUrl: placeholder, // iconUrl: placeholder,
iconSize: [24, 41], // iconSize: [24, 41],
iconAnchor: [0, 44], // iconAnchor: [0, 44],
popupAnchor: [12, -40], // popupAnchor: [12, -40],
shadowUrl: null, // shadowUrl: null,
shadowSize: null, // shadowSize: null,
shadowAnchor: null, // shadowAnchor: null,
}); // });
L.drawLocal = { L.drawLocal = {
draw: { draw: {
@ -86,7 +86,7 @@ L.drawLocal = {
}, },
}, },
marker: { marker: {
icon: MyCustomMarker, icon: placeholder,
tooltip: { tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.", start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
}, },
@ -156,32 +156,63 @@ 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();
return null;
}
const LeafletMap = () => {
// const map =
const [zoom, setZoom] = useState(22);
const outerBounds = [ const outerBounds = [
[50.505, -29.09], [50.505, -29.09],
[52.505, 29.09], [52.505, 29.09],
]; ];
const LeafletMap = () => {
const leafEl = useRef(null); const leafEl = useRef(null);
const mapRef = useRef(null);
const onCreated = (e) => { const onCreated = () => {
const drawnItems = leafEl.current._layers; console.log({ next, add });
console.log({ drawnItems }); 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]; const location = [38.9072, -77.0369];
console.log({ mapRef });
if (mapRef.current) {
console.log(mapRef.current);
}
return ( return (
<div style={{ direction: "ltr" }}>
<MapContainer <MapContainer
whenCreated={(mapInstance) => {
mapInstance.on("zoomend", function () {
console.log(mapRef.current);
setZoom(mapRef.current._zoom);
});
mapRef.current = mapInstance;
}}
center={[49.505, -2.09]} center={[49.505, -2.09]}
zoom={24} zoom={zoom}
maxZoom={24} maxZoom={24}
minZoom={18}
maxNativeZoom={22} maxNativeZoom={22}
style={{ height: "100vh" }} style={{ height: "100vh" }}
zoomControl={false} zoomControl={false}
bounds={outerBounds} bounds={outerBounds}
> >
{/* <MyComponent setZoom={setZoom} /> */}
<TileLayer <TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}" url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
@ -197,13 +228,45 @@ const LeafletMap = () => {
maxNativeZoom={24} maxNativeZoom={24}
opacity={0.5} opacity={0.5}
/> />
<Marker position={[49.505, -2.09]} icon={pinMB}> <Marker icon={icon(50, zoom)} position={[49.505, -2.09]}>
{/* <Marker position={[49.505, -2.09]} icon={MyCustomMarker2()}> */}
<Popup>{bedNumb}</Popup> <Popup>{bedNumb}</Popup>
</Marker> </Marker>
<FeatureGroup ref={leafEl}> <FeatureGroup ref={leafEl}>
<EditControl <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" position="topright"
onCreated={onCreated} count={next}
onCreated={(e) => {
console.log({ next, e });
onCreated(next);
}}
allowIntersection={false} allowIntersection={false}
/> />
</FeatureGroup> </FeatureGroup>
@ -211,6 +274,7 @@ const LeafletMap = () => {
<ScaleControl position="topleft" /> <ScaleControl position="topleft" />
<ZoomControl position="topleft" /> <ZoomControl position="topleft" />
</MapContainer> </MapContainer>
</div>
); );
}; };

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

Loading…
Cancel
Save