Fix: Resolve render2 is not a function error

src/components/maps/DynamicParkLocationMap.tsx

@@ -1,28 +0,0 @@
-import React, { Suspense, lazy } from 'react';
-import { Skeleton } from '@/components/ui/skeleton';
-
-interface ParkLocationMapProps {
-  latitude: number;
-  longitude: number;
-  parkName: string;
-  className?: string;
-}
-
-// Lazy load the map component to avoid React 18 issues with react-leaflet
-const ParkLocationMapComponent = lazy(() => 
-  import('./ParkLocationMap').then(mod => ({ default: mod.ParkLocationMap }))
-);
-
-const MapSkeleton = () => (
-  <div className="w-full h-64 rounded-lg border border-border">
-    <Skeleton className="w-full h-full rounded-lg" />
-  </div>
-);
-
-export function DynamicParkLocationMap(props: ParkLocationMapProps) {
-  return (
-    <Suspense fallback={<MapSkeleton />}>
-      <ParkLocationMapComponent {...props} />
-    </Suspense>
-  );
-}

src/components/maps/ParkLocationMap.tsx

@@ -1,16 +1,4 @@
 import React from 'react';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
-import type { LatLngExpression } from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import L from 'leaflet';
-
-// Fix for default markers in react-leaflet
-delete (L.Icon.Default.prototype as any)._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
-  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
-  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
-});
 
 interface ParkLocationMapProps {
   latitude: number;
@@ -20,28 +8,19 @@ interface ParkLocationMapProps {
 }
 
 export function ParkLocationMap({ latitude, longitude, parkName, className }: ParkLocationMapProps) {
-  const position: LatLngExpression = [latitude, longitude];
+  // Create OpenStreetMap iframe URL
+  const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${longitude-0.01},${latitude-0.01},${longitude+0.01},${latitude+0.01}&layer=mapnik&marker=${latitude},${longitude}`;
   
   return (
     <div className={`w-full h-64 rounded-lg overflow-hidden border border-border ${className}`}>
-      <MapContainer 
-        center={position} 
-        zoom={15} 
-        style={{ height: '100%', width: '100%' }}
-        zoomControl={true}
-      >
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
-        <Marker position={position}>
-          <Popup>
-            <div className="text-center">
-              <strong>{parkName}</strong>
-            </div>
-          </Popup>
-        </Marker>
-      </MapContainer>
+      <iframe
+        src={mapUrl}
+        width="100%"
+        height="100%"
+        style={{ border: 'none' }}
+        title={`Map of ${parkName}`}
+        loading="lazy"
+      />
     </div>
   );
 }