424 lines
22 KiB
JavaScript
424 lines
22 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
|
||
import { MapContainer, TileLayer, Polygon, Marker, Circle, Rectangle, useMapEvents, useMap } from 'react-leaflet';
|
||
import 'leaflet/dist/leaflet.css';
|
||
import { propertiesAPI, wateringAPI, equipmentAPI } from '../../services/api';
|
||
import toast from 'react-hot-toast';
|
||
|
||
const SprinklerPlacement = ({ onPlace }) => {
|
||
useMapEvents({
|
||
click(e) { onPlace([e.latlng.lat, e.latlng.lng]); }
|
||
});
|
||
return null;
|
||
};
|
||
|
||
const computeCoverage = (sprinkler) => {
|
||
if (sprinkler.type === 'rotor_impact' || sprinkler.type === 'spray_fixed') {
|
||
return { kind: 'circle', radius: sprinkler.throwFeet, degrees: sprinkler.degrees || 360 };
|
||
}
|
||
if (sprinkler.type === 'oscillating_fan') {
|
||
const L = sprinkler.lengthFeet || 0; const W = sprinkler.widthFeet || 0;
|
||
return { kind: 'rect', length: L, width: W };
|
||
}
|
||
return null;
|
||
};
|
||
|
||
const Watering = () => {
|
||
const [properties, setProperties] = useState([]);
|
||
const [selectedProperty, setSelectedProperty] = useState(null);
|
||
const [sections, setSections] = useState([]);
|
||
const [placing, setPlacing] = useState(false);
|
||
const [sprinklerForm, setSprinklerForm] = useState({
|
||
mount: 'above_ground',
|
||
type: 'rotor_impact',
|
||
gpm: 2.5,
|
||
throwFeet: 20,
|
||
degrees: 360,
|
||
lengthFeet: 30,
|
||
widthFeet: 20,
|
||
durationMinutes: 60
|
||
});
|
||
const [plan, setPlan] = useState(null);
|
||
const [points, setPoints] = useState([]);
|
||
const [guiding, setGuiding] = useState(false);
|
||
const [guideIndex, setGuideIndex] = useState(0);
|
||
const [currentPos, setCurrentPos] = useState(null);
|
||
const [watchId, setWatchId] = useState(null);
|
||
const [sprinklers, setSprinklers] = useState([]);
|
||
const [selectedSprinklerId, setSelectedSprinklerId] = useState('');
|
||
const [selectedPointId, setSelectedPointId] = useState(null);
|
||
const selectedPoint = useMemo(()=> points.find(p=> p.id===selectedPointId), [points, selectedPointId]);
|
||
const [editForm, setEditForm] = useState(null);
|
||
const [satellite, setSatellite] = useState(false);
|
||
|
||
useEffect(() => { (async () => {
|
||
try {
|
||
const [pr, eq] = await Promise.all([propertiesAPI.getAll(), equipmentAPI.getAll()]);
|
||
setProperties(pr.data?.data?.properties||[]);
|
||
const list = (eq.data?.data?.equipment||[]).filter(e => (e.categoryName||'').toLowerCase()==='sprinkler');
|
||
setSprinklers(list);
|
||
}
|
||
catch(e){ toast.error('Failed to load properties'); }
|
||
})(); }, []);
|
||
|
||
const loadProperty = async (pid) => {
|
||
try {
|
||
const r = await propertiesAPI.getById(pid); const p = r.data?.data?.property; setSelectedProperty(p);
|
||
const secs = (p.sections||[]).map(s => ({ ...s, polygonData: typeof s.polygonData === 'string' ? JSON.parse(s.polygonData) : s.polygonData }));
|
||
setSections(secs);
|
||
}
|
||
catch(e){ toast.error('Failed to load property'); }
|
||
};
|
||
|
||
const ensurePlan = async () => {
|
||
if (plan) return plan;
|
||
if (!selectedProperty) { toast.error('Select a property first'); return null; }
|
||
try { const r = await wateringAPI.createPlan({ propertyId: selectedProperty.id, name: `${selectedProperty.name} - Sprinklers` }); setPlan(r.data?.data?.plan); return r.data?.data?.plan; }
|
||
catch(e){ toast.error('Failed to create plan'); return null; }
|
||
};
|
||
|
||
const onPlace = async (latlng) => {
|
||
const p = await ensurePlan(); if (!p) return;
|
||
try {
|
||
const eq = sprinklers.find(s=> s.id === (selectedSprinklerId? parseInt(selectedSprinklerId): -1));
|
||
const base = eq ? {
|
||
mount: eq.sprinklerMount || sprinklerForm.mount,
|
||
type: eq.sprinklerHeadType || sprinklerForm.type,
|
||
gpm: eq.sprinklerGpm || sprinklerForm.gpm,
|
||
throwFeet: eq.sprinklerThrowFeet || sprinklerForm.throwFeet,
|
||
degrees: sprinklerForm.degrees,
|
||
lengthFeet: eq.sprinklerLengthFeet || sprinklerForm.lengthFeet,
|
||
widthFeet: eq.sprinklerWidthFeet || sprinklerForm.widthFeet
|
||
} : sprinklerForm;
|
||
const payload = {
|
||
lat: latlng[0], lng: latlng[1], durationMinutes: sprinklerForm.durationMinutes,
|
||
mountType: base.mount,
|
||
sprinklerHeadType: base.type,
|
||
gpm: base.gpm,
|
||
throwFeet: base.throwFeet,
|
||
degrees: base.degrees,
|
||
lengthFeet: base.lengthFeet,
|
||
widthFeet: base.widthFeet,
|
||
headingDegrees: sprinklerForm.headingDegrees || 0
|
||
};
|
||
const r = await wateringAPI.addPlanPoint(p.id, payload);
|
||
setPoints(prev => [...prev, r.data?.data?.point]);
|
||
toast.success('Sprinkler location added');
|
||
setPlacing(false);
|
||
} catch(e){ toast.error('Failed to add sprinkler point'); }
|
||
};
|
||
|
||
const center = useMemo(() => {
|
||
if (selectedProperty?.latitude && selectedProperty?.longitude) return [Number(selectedProperty.latitude), Number(selectedProperty.longitude)];
|
||
if (sections?.length){
|
||
const pts = sections.flatMap(s => (s.polygonData?.coordinates?.[0]||[]));
|
||
if (pts.length){ const lat = pts.reduce((a,p)=> a + Number(p[0]), 0) / pts.length; const lng = pts.reduce((a,p)=> a + Number(p[1]), 0) / pts.length; return [lat, lng]; }
|
||
}
|
||
return [39.8,-98.6];
|
||
}, [selectedProperty, sections]);
|
||
|
||
const CenterOnChange = ({ center }) => {
|
||
const map = useMap();
|
||
useEffect(() => { if (center && Array.isArray(center)) map.setView(center); }, [center, map]);
|
||
return null;
|
||
};
|
||
|
||
const startGuidance = () => {
|
||
if (points.length === 0) { toast.error('Add at least one point'); return; }
|
||
if (!navigator.geolocation) { toast.error('GPS not available'); return; }
|
||
setGuiding(true); setGuideIndex(0);
|
||
const id = navigator.geolocation.watchPosition(pos => {
|
||
setCurrentPos({ lat: pos.coords.latitude, lng: pos.coords.longitude });
|
||
}, err => { console.warn(err); toast.error('GPS error'); }, { enableHighAccuracy:true, maximumAge: 1000, timeout: 10000 });
|
||
setWatchId(id);
|
||
};
|
||
|
||
const stopGuidance = () => { if (watchId){ navigator.geolocation.clearWatch(watchId); setWatchId(null);} setGuiding(false); };
|
||
|
||
const distanceFeet = (a,b) => {
|
||
const R=6371000; const toRad=d=>d*Math.PI/180;
|
||
const dLat=toRad(b.lat-a.lat); const dLng=toRad(b.lng-a.lng);
|
||
const A=Math.sin(dLat/2)**2 + Math.cos(toRad(a.lat))*Math.cos(toRad(b.lat))*Math.sin(dLng/2)**2;
|
||
return (2*R*Math.atan2(Math.sqrt(A),Math.sqrt(1-A)))*3.28084;
|
||
};
|
||
|
||
// Build sector polygon (approx) for Leaflet
|
||
const sectorPolygon = (center, radiusFeet, startDeg, endDeg, steps=60) => {
|
||
const [clat, clng] = [Number(center.lat), Number(center.lng)];
|
||
const Rlat = 111320; // meters per degree lat
|
||
const Rlng = Math.cos(clat*Math.PI/180)*111320; // meters per degree lng
|
||
const rm = radiusFeet*0.3048; // meters
|
||
const pts = [];
|
||
const start = startDeg*Math.PI/180; const end = endDeg*Math.PI/180;
|
||
const span = end - start;
|
||
const n = Math.max(8, Math.round(steps*Math.abs(span)/(2*Math.PI)));
|
||
pts.push([clat, clng]);
|
||
for (let i=0;i<=n;i++){
|
||
const ang = start + (span*i/n);
|
||
const dx = rm * Math.cos(ang);
|
||
const dy = rm * Math.sin(ang);
|
||
const lat = clat + (dy / Rlat);
|
||
const lng = clng + (dx / Rlng);
|
||
pts.push([lat, lng]);
|
||
}
|
||
pts.push([clat, clng]);
|
||
return pts;
|
||
};
|
||
|
||
const coverageSqft = useMemo(() => {
|
||
const type = sprinklerForm.type;
|
||
if (type==='rotor_impact' || type==='spray_fixed') {
|
||
const r = Number(sprinklerForm.throwFeet||0); const deg=Number(sprinklerForm.degrees||360);
|
||
return Math.PI * r * r * (deg/360);
|
||
}
|
||
if (type==='oscillating_fan') {
|
||
return Number(sprinklerForm.lengthFeet||0) * Number(sprinklerForm.widthFeet||0);
|
||
}
|
||
return 0;
|
||
}, [sprinklerForm]);
|
||
const [targetInches, setTargetInches] = useState(0.5);
|
||
const suggestMinutes = useMemo(() => {
|
||
const gpm = Number(sprinklerForm.gpm||0);
|
||
if (!gpm || !coverageSqft || !targetInches) return 0;
|
||
const gallonsNeeded = coverageSqft * targetInches * 0.623; // gal per sqft-inch
|
||
return Math.ceil((gallonsNeeded / gpm));
|
||
}, [sprinklerForm.gpm, coverageSqft, targetInches]);
|
||
|
||
// Select a point to edit (enables popup edits too)
|
||
const onSelectPoint = (pt) => {
|
||
setSelectedPointId(pt.id);
|
||
setEditForm({
|
||
durationMinutes: pt.duration_minutes || 0,
|
||
mountType: pt.sprinkler_mount,
|
||
sprinklerHeadType: pt.sprinkler_head_type,
|
||
gpm: Number(pt.sprinkler_gpm||0),
|
||
throwFeet: Number(pt.sprinkler_throw_feet||0),
|
||
degrees: Number(pt.sprinkler_degrees||360),
|
||
lengthFeet: Number(pt.sprinkler_length_feet||0),
|
||
widthFeet: Number(pt.sprinkler_width_feet||0),
|
||
headingDegrees: Number(pt.sprinkler_heading_degrees||0)
|
||
});
|
||
};
|
||
|
||
// Persist changes to a point and refresh it in local state
|
||
const updatePointField = async (id, patch) => {
|
||
try {
|
||
const r = await wateringAPI.updatePoint(id, patch);
|
||
const np = r.data?.data?.point;
|
||
setPoints(prev => prev.map(p=> p.id===id? np: p));
|
||
} catch(e){ toast.error('Failed to update point'); }
|
||
};
|
||
|
||
return (
|
||
<div className="p-6">
|
||
<h1 className="text-2xl font-bold mb-4">Watering - Sprinklers</h1>
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
||
<div className="lg:col-span-1 space-y-4">
|
||
<div className="card">
|
||
<label className="block text-sm font-medium mb-1">Property</label>
|
||
<select className="input" value={selectedProperty?.id||''} onChange={(e)=> loadProperty(parseInt(e.target.value))}>
|
||
<option value="">Select property</option>
|
||
{properties.map(p=> (<option key={p.id} value={p.id}>{p.name}</option>))}
|
||
</select>
|
||
</div>
|
||
<div className="card space-y-2">
|
||
<div className="font-medium">Sprinkler Settings</div>
|
||
<div className="text-sm">Choose Saved Sprinkler</div>
|
||
<select className="input" value={selectedSprinklerId} onChange={(e)=> {
|
||
const val=e.target.value; setSelectedSprinklerId(val);
|
||
const eq = sprinklers.find(s=> s.id === parseInt(val));
|
||
if (eq) {
|
||
setSprinklerForm(sf=> ({...sf,
|
||
mount: eq.sprinklerMount || sf.mount,
|
||
type: eq.sprinklerHeadType || sf.type,
|
||
gpm: eq.sprinklerGpm || sf.gpm,
|
||
throwFeet: eq.sprinklerThrowFeet || sf.throwFeet,
|
||
lengthFeet: eq.sprinklerLengthFeet || sf.lengthFeet,
|
||
widthFeet: eq.sprinklerWidthFeet || sf.widthFeet
|
||
}));
|
||
}
|
||
}}>
|
||
<option value="">-- none --</option>
|
||
{sprinklers.map(s=> (
|
||
<option key={s.id} value={s.id}>{s.customName || `${s.manufacturer||''} ${s.model||''}`.trim()}</option>
|
||
))}
|
||
</select>
|
||
<div className="text-sm">Mount</div>
|
||
<select className="input" value={sprinklerForm.mount} onChange={e=> setSprinklerForm({...sprinklerForm, mount:e.target.value})}>
|
||
<option value="in_ground">In‑Ground</option>
|
||
<option value="above_ground">Above‑Ground</option>
|
||
</select>
|
||
<div className="text-sm">Type</div>
|
||
<select className="input" value={sprinklerForm.type} onChange={e=> setSprinklerForm({...sprinklerForm, type:e.target.value})}>
|
||
<option value="rotor_impact">Rotor/Impact</option>
|
||
<option value="oscillating_fan">Oscillating/Fan</option>
|
||
<option value="spray_fixed">Spray (Fixed)</option>
|
||
</select>
|
||
{sprinklerForm.type === 'rotor_impact' || sprinklerForm.type === 'spray_fixed' ? (
|
||
<>
|
||
<div className="text-sm">GPM</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.gpm} onChange={e=> setSprinklerForm({...sprinklerForm, gpm: parseFloat(e.target.value)})} />
|
||
<div className="text-sm">Throw distance (ft)</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.throwFeet} onChange={e=> setSprinklerForm({...sprinklerForm, throwFeet: parseFloat(e.target.value)})} />
|
||
<div className="text-sm">Degrees (0‑360)</div>
|
||
<input type="number" className="input" value={sprinklerForm.degrees} onChange={e=> setSprinklerForm({...sprinklerForm, degrees: parseInt(e.target.value||'0',10)})} />
|
||
<div className="text-sm">Heading (0‑359, 0 = East)</div>
|
||
<input type="number" className="input" value={sprinklerForm.headingDegrees||0} onChange={e=> setSprinklerForm({...sprinklerForm, headingDegrees: (parseInt(e.target.value||'0',10)||0)%360})} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="text-sm">Length (ft)</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.lengthFeet} onChange={e=> setSprinklerForm({...sprinklerForm, lengthFeet: parseFloat(e.target.value)})} />
|
||
<div className="text-sm">Width (ft)</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.widthFeet} onChange={e=> setSprinklerForm({...sprinklerForm, widthFeet: parseFloat(e.target.value)})} />
|
||
</>
|
||
)}
|
||
<div className="text-sm">Target Depth (inches)</div>
|
||
<input type="number" step="0.1" className="input" value={targetInches} onChange={e=> setTargetInches(parseFloat(e.target.value||'0'))} />
|
||
<div className="text-xs text-gray-600">Suggested runtime: {suggestMinutes} minutes {sprinklerForm.gpm? '' : '(enter GPM to calculate)'}
|
||
</div>
|
||
<div className="text-sm">Run Duration (minutes)</div>
|
||
<input type="number" className="input" value={sprinklerForm.durationMinutes} onChange={e=> setSprinklerForm({...sprinklerForm, durationMinutes: parseInt(e.target.value||'0',10)})} />
|
||
<button className="btn-primary w-full" disabled={!selectedProperty} onClick={()=> setPlacing(true)}>Place Sprinkler on Map</button>
|
||
</div>
|
||
<div className="card">
|
||
<div className="font-medium mb-2">Plan Points</div>
|
||
<ul className="text-sm space-y-1 max-h-64 overflow-auto">
|
||
{points.map(pt => (
|
||
<li key={pt.id}
|
||
className={(pt.id===selectedPointId? 'bg-blue-50 ' : '') + 'rounded px-2 py-1 hover:bg-gray-50 cursor-pointer'}
|
||
onClick={()=> onSelectPoint(pt)}>
|
||
#{pt.sequence}: {Number(pt.lat).toFixed(5)}, {Number(pt.lng).toFixed(5)} • {pt.duration_minutes} min
|
||
</li>
|
||
))}
|
||
{points.length===0 && <li className="text-gray-500">No points yet</li>}
|
||
</ul>
|
||
{selectedPoint && editForm && (
|
||
<div className="mt-3 border-t pt-3 space-y-2">
|
||
<div className="font-medium">Edit Selected</div>
|
||
{(editForm.sprinklerHeadType==='rotor_impact' || editForm.sprinklerHeadType==='spray_fixed') ? (
|
||
<>
|
||
<label className="text-xs">Degrees</label>
|
||
<input type="number" className="input" value={editForm.degrees}
|
||
onChange={(e)=> setEditForm({...editForm, degrees: parseInt(e.target.value||'0',10)})} />
|
||
<label className="text-xs">Heading</label>
|
||
<input type="number" className="input" value={editForm.headingDegrees}
|
||
onChange={(e)=> setEditForm({...editForm, headingDegrees: parseInt(e.target.value||'0',10)%360})} />
|
||
<label className="text-xs">Throw (ft)</label>
|
||
<input type="number" step="0.1" className="input" value={editForm.throwFeet}
|
||
onChange={(e)=> setEditForm({...editForm, throwFeet: parseFloat(e.target.value||'0')})} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<label className="text-xs">Length (ft)</label>
|
||
<input type="number" step="0.1" className="input" value={editForm.lengthFeet}
|
||
onChange={(e)=> setEditForm({...editForm, lengthFeet: parseFloat(e.target.value||'0')})} />
|
||
<label className="text-xs">Width (ft)</label>
|
||
<input type="number" step="0.1" className="input" value={editForm.widthFeet}
|
||
onChange={(e)=> setEditForm({...editForm, widthFeet: parseFloat(e.target.value||'0')})} />
|
||
<label className="text-xs">Heading</label>
|
||
<input type="number" className="input" value={editForm.headingDegrees}
|
||
onChange={(e)=> setEditForm({...editForm, headingDegrees: parseInt(e.target.value||'0',10)%360})} />
|
||
</>
|
||
)}
|
||
<label className="text-xs">Duration (min)</label>
|
||
<input type="number" className="input" value={editForm.durationMinutes}
|
||
onChange={(e)=> setEditForm({...editForm, durationMinutes: parseInt(e.target.value||'0',10)})} />
|
||
<div className="flex gap-2">
|
||
<button className="btn-primary flex-1" onClick={async ()=>{
|
||
await updatePointField(selectedPointId, editForm);
|
||
}}>Save</button>
|
||
<button className="btn-secondary" onClick={async ()=>{
|
||
await wateringAPI.deletePoint(selectedPointId);
|
||
setPoints(prev=> prev.filter(p=> p.id!==selectedPointId));
|
||
setSelectedPointId(null); setEditForm(null);
|
||
}}>Delete</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="lg:col-span-3">
|
||
<div className="card p-0" style={{height:'70vh'}}>
|
||
<div className="flex items-center justify-between p-3 border-b">
|
||
<div className="text-sm text-gray-700">{guiding && currentPos && points[guideIndex] ? (
|
||
<>Go to point #{points[guideIndex].sequence}: {distanceFeet(currentPos, {lat: Number(points[guideIndex].lat), lng: Number(points[guideIndex].lng)}).toFixed(0)} ft away</>
|
||
) : 'Map'}</div>
|
||
<div className="flex gap-2 items-center">
|
||
<label className="text-xs flex items-center gap-1">
|
||
<input type="checkbox" checked={satellite} onChange={(e)=> setSatellite(e.target.checked)} /> Satellite
|
||
</label>
|
||
{!guiding ? (
|
||
<button className="btn-secondary" onClick={startGuidance} disabled={points.length===0}>Start Guidance</button>
|
||
) : (
|
||
<>
|
||
<button className="btn-secondary" onClick={()=> setGuideIndex(i=> Math.max(0, i-1))} disabled={guideIndex===0}>Prev</button>
|
||
<button className="btn-secondary" onClick={()=> setGuideIndex(i=> Math.min(points.length-1, i+1))} disabled={guideIndex>=points.length-1}>Next</button>
|
||
<button className="btn-primary" onClick={stopGuidance}>Stop</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<MapContainer center={center} zoom={18} style={{height:'100%', width:'100%'}}>
|
||
<CenterOnChange center={center} />
|
||
{satellite ? (
|
||
<TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" />
|
||
) : (
|
||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||
)}
|
||
{sections.map((s)=> (
|
||
<Polygon key={s.id} positions={s.polygonData?.coordinates?.[0]||[]} pathOptions={{ color:'#16a34a', weight:2, fillOpacity:0.1 }} />
|
||
))}
|
||
{placing && <SprinklerPlacement onPlace={onPlace} />}
|
||
{points.map(pt => {
|
||
const cov = computeCoverage({
|
||
type: pt.sprinkler_head_type,
|
||
throwFeet: parseFloat(pt.sprinkler_throw_feet||0),
|
||
degrees: parseInt(pt.sprinkler_degrees||360,10),
|
||
lengthFeet: parseFloat(pt.sprinkler_length_feet||0),
|
||
widthFeet: parseFloat(pt.sprinkler_width_feet||0)
|
||
});
|
||
return (
|
||
<React.Fragment key={pt.id}>
|
||
<Marker position={[pt.lat, pt.lng]} draggable={true}
|
||
eventHandlers={{
|
||
dragend: (e)=>{
|
||
const ll = e.target.getLatLng();
|
||
updatePointField(pt.id, { lat: ll.lat, lng: ll.lng });
|
||
},
|
||
click: ()=> onSelectPoint(pt)
|
||
}}
|
||
/>
|
||
{cov?.kind==='circle' && (
|
||
cov.degrees && cov.degrees < 360 ? (
|
||
<Polygon positions={sectorPolygon({lat:Number(pt.lat),lng:Number(pt.lng)}, cov.radius, (pt.sprinkler_heading_degrees||0), (pt.sprinkler_heading_degrees||0)+cov.degrees)} pathOptions={{ color:'#2563eb', fillOpacity:0.2 }} />
|
||
) : (
|
||
<Circle center={[pt.lat, pt.lng]} radius={cov.radius*0.3048} pathOptions={{ color:'#2563eb', fillOpacity:0.2 }} />
|
||
)
|
||
)}
|
||
{cov?.kind==='rect' && (()=>{
|
||
const clat=Number(pt.lat), clng=Number(pt.lng);
|
||
const L=cov.length, W=cov.width; const hdg=(Number(pt.sprinkler_heading_degrees||0))*Math.PI/180;
|
||
const Rlat=111320, Rlng=Math.cos(clat*Math.PI/180)*111320;
|
||
const hf=L/2*0.3048, wf=W/2*0.3048;
|
||
const corners=[{x:hf,y:wf},{x:-hf,y:wf},{x:-hf,y:-wf},{x:hf,y:-wf}].map(({x,y})=>{
|
||
const xr=x*Math.cos(hdg)-y*Math.sin(hdg);
|
||
const yr=x*Math.sin(hdg)+y*Math.cos(hdg);
|
||
const lat=clat + (yr/Rlat);
|
||
const lng=clng + (xr/Rlng);
|
||
return [lat,lng];
|
||
});
|
||
return <Polygon positions={corners} pathOptions={{ color:'#2563eb', fillOpacity:0.2 }} />;
|
||
})()}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</MapContainer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Watering;
|