Components
Loading preview...
An interactive GPS map with multiple visualization styles and custom map markers
@Scottclayton3d
npx shadcn@latest add https://21st.dev/r/lovesickfromthe6ix/interactive-mapimport React, { useState } from 'react';
import { AdvancedMap } from "@/components/ui/interactive-map";
export default function DemoOne() {
const [markers, setMarkers] = useState([
{
id: 1,
position: [51.505, -0.09],
color: 'blue',
size: 'medium',
popup: {
title: 'London',
content: 'Capital of England',
image: 'https://example.com/london.jpg'
}
},
{
id: 2,
position: [51.51, -0.1],
color: 'red',
size: 'large',
popup: {
title: 'Westminster',
content: 'Political center'
}
}
]);
const polygons = [
{
id: 1,
positions: [
[51.515, -0.09],
[51.52, -0.1],
[51.52, -0.12]
],
style: { color: 'green', weight: 2, fillOpacity: 0.4 },
popup: 'Hyde Park Area'
}
];
const circles = [
{
id: 1,
center: [51.508, -0.11],
radius: 500,
style: { color: 'purple', fillOpacity: 0.3 },
popup: '500m radius from center'
}
];
const handleMarkerClick = (marker) => {
console.log('Marker clicked:', marker);
};
const handleMapClick = (latlng) => {
console.log('Map clicked at:', latlng);
};
return (
<div
style={{ width: '75%' }}
>
<h1>Advanced Map Example</h1>
<AdvancedMap
center={[51.505, -0.09]}
zoom={13}
markers={markers}
polygons={polygons}
circles={circles}
onMarkerClick={handleMarkerClick}
onMapClick={handleMapClick}
enableClustering={true}
enableSearch={true}
enableControls={true}
style={{ height: '600px', width: 'full' }}
/>
</div>
);
};