feat: Add OpenStreetMap display

src/components/maps/ParkLocationMap.tsx

@@ -0,0 +1,47 @@
+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;
+  longitude: number;
+  parkName: string;
+  className?: string;
+}
+
+export function ParkLocationMap({ latitude, longitude, parkName, className }: ParkLocationMapProps) {
+  const position: LatLngExpression = [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>
+    </div>
+  );
+}

src/pages/ParkDetail.tsx

@@ -10,6 +10,7 @@ import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Cam
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { RideCard } from '@/components/rides/RideCard';
 import { Park, Ride } from '@/types/database';
+import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
 import { supabase } from '@/integrations/supabase/client';
 export default function ParkDetail() {
   const {
@@ -334,13 +335,23 @@ export default function ParkDetail() {
 
                     <Separator />
 
-                    <div className="space-y-2">
+                    <div className="space-y-4">
                       <div className="font-medium">Location</div>
                       {park.location && <div className="text-sm text-muted-foreground space-y-1">
                           {park.location.city && <div>{park.location.city}</div>}
                           {park.location.state_province && <div>{park.location.state_province}</div>}
                           <div>{park.location.country}</div>
                         </div>}
+                      
+                      {park.location?.latitude && park.location?.longitude && (
+                        <div className="mt-4">
+                          <ParkLocationMap
+                            latitude={Number(park.location.latitude)}
+                            longitude={Number(park.location.longitude)}
+                            parkName={park.name}
+                          />
+                        </div>
+                      )}
                     </div>
                   </CardContent>
                 </Card>