fix: remove undefined getRefs call and clean up unused HERE checks in CompareView

This commit is contained in:
Hamza-Ayed
2026-08-16 14:14:11 +03:00
parent 844774bd1b
commit b3ffa7c71d
+1 -9
View File
@@ -64,8 +64,6 @@ const CompareView: React.FC = () => {
const [refKey, setRefKey] = useState<RefKey>('google-hybrid');
const [center, setCenter] = useState<{ lng: number; lat: number; zoom: number }>({ lng: 35.91, lat: 31.95, zoom: 15 });
const REFS = getRefs(hereApiKey);
// Create both maps once.
useEffect(() => {
if (!leftDiv.current || !rightDiv.current || leftMap.current) return;
@@ -79,7 +77,7 @@ const CompareView: React.FC = () => {
const lMap = new maplibregl.Map({ container: leftDiv.current, style: '/style.json', center: start, zoom: startZoom, attributionControl: false });
// آيقونات الـ POI تُحمّل عند الطلب — يجب الربط قبل أول رسم للطبقات
attachIconLoader(lMap);
const rMap = new maplibregl.Map({ container: rightDiv.current, style: rasterStyle(REFS['esri-sat']), center: start, zoom: startZoom, attributionControl: false });
const rMap = new maplibregl.Map({ container: rightDiv.current, style: rasterStyle(REFS['google-hybrid']), center: start, zoom: startZoom, attributionControl: false });
lMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
rMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-right');
@@ -155,12 +153,6 @@ const CompareView: React.FC = () => {
<div style={{ position: 'relative', flex: 1 }}>
<div ref={rightDiv} style={{ position: 'absolute', inset: 0 }} />
<Badge text={REFS[refKey].label} />
{refKey.startsWith('here') && !hereApiKey && (
<div style={{ position: 'absolute', bottom: 30, left: '50%', transform: 'translateX(-50%)', zIndex: 10, background: 'rgba(15,23,42,0.92)', border: '1px solid #f59e0b', padding: '8px 14px', borderRadius: '8px', fontSize: '0.75rem', color: '#fbbf24', display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}
onClick={() => setShowKeyModal(true)}>
<span>⚠️ Click here to enter your HERE API Key</span>
</div>
)}
<Crosshair />
</div>
</div>