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>
+  );
+}