Files
thrilltrack-explorer/src-old/components/maps/ParkLocationMap.tsx

26 lines
784 B
TypeScript

import React from 'react';
interface ParkLocationMapProps {
latitude: number;
longitude: number;
parkName: string;
className?: string;
}
export function ParkLocationMap({ latitude, longitude, parkName, className }: ParkLocationMapProps) {
// 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}`}>
<iframe
src={mapUrl}
width="100%"
height="100%"
style={{ border: 'none' }}
title={`Map of ${parkName}`}
loading="lazy"
/>
</div>
);
}