64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { Map, View } from 'ol';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import { OSM } from 'ol/source';
|
|
import { fromLonLat } from 'ol/proj';
|
|
import './Map_page.css';
|
|
import Dock from './Dock';
|
|
// ✅ Make sure these are imported from 'react-icons/vsc'
|
|
import { VscHome, VscArchive, VscAccount, VscSettingsGear } from 'react-icons/vsc';
|
|
|
|
const Map_page = () => {
|
|
const mapRef = useRef<Map | null>(null);
|
|
const mapDivRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!mapRef.current) {
|
|
const map = new Map({
|
|
target: mapDivRef.current as HTMLDivElement,
|
|
layers: [new TileLayer({ source: new OSM() })],
|
|
view: new View({
|
|
center: fromLonLat([-117.1611, 32.7157]), // Default to San Diego
|
|
zoom: 10,
|
|
}),
|
|
});
|
|
mapRef.current = map;
|
|
}
|
|
}, []);
|
|
|
|
const items = [
|
|
{ icon: <VscHome size={18} />, label: 'Home', onClick: () => alert('Home!') },
|
|
{ icon: <VscArchive size={18} />, label: 'Archive', onClick: () => alert('Archive!') },
|
|
{ icon: <VscAccount size={18} />, label: 'Profile', onClick: () => alert('Profile!') },
|
|
{ icon: <VscSettingsGear size={18} />, label: 'Settings', onClick: () => alert('Settings!') },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div className="container">
|
|
<div className="map-container">
|
|
<div ref={mapDivRef} className="map" />
|
|
</div>
|
|
|
|
<div className="sidebar">
|
|
<input type="text" placeholder="Enter a location..." className="input-field" />
|
|
<button className="submit">Submit</button>
|
|
</div>
|
|
|
|
<Dock
|
|
|
|
items={items}
|
|
|
|
panelHeight={68}
|
|
|
|
baseItemSize={50}
|
|
|
|
magnification={70}
|
|
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Map_page;
|