An interactive GPS map with multiple visualization styles and custom map markers
import 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://cdn.21st.dev/assets/localized/2a96f091fa7b599f6752c827c4d5ba36fa15456d4d3a80a9aa89cf43aead2a9f.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>
);
}