80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
import { Card } from "@heroui/react"
|
|
import { createFileRoute } from "@tanstack/react-router"
|
|
import { Drone } from "lucide-react"
|
|
import { useState } from "react"
|
|
import {
|
|
Map as MapComponent,
|
|
MapMarker,
|
|
type MapViewport,
|
|
MarkerContent,
|
|
MarkerPopup,
|
|
MarkerTooltip
|
|
} from "@/components/maps/map"
|
|
|
|
export const Route = createFileRoute("/_auth/dashboard")({
|
|
component: RouteComponent
|
|
})
|
|
|
|
function RouteComponent() {
|
|
const locations = [
|
|
{
|
|
id: 1,
|
|
name: "Location 1",
|
|
lat: 40.76,
|
|
lng: -73.98
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Location 2",
|
|
lat: 40.77,
|
|
lng: -73.99
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Location 3",
|
|
lat: 40.5874827,
|
|
lng: -1.7925343
|
|
}
|
|
]
|
|
const [viewport, setViewport] = useState<MapViewport>({
|
|
center: [40.5874827, -1.7925343],
|
|
zoom: 8,
|
|
bearing: 0,
|
|
pitch: 0
|
|
})
|
|
return (
|
|
<div>
|
|
<Card className="h-200 p-0 overflow-hidden">
|
|
<MapComponent
|
|
center={[40.5874827, -1.7925343]}
|
|
zoom={10}
|
|
viewport={viewport}
|
|
onViewportChange={setViewport}
|
|
>
|
|
{locations.map((location) => (
|
|
<MapMarker
|
|
key={location.id}
|
|
longitude={location.lng}
|
|
latitude={location.lat}
|
|
>
|
|
{/* Prueba para ssl */}
|
|
<MarkerContent>
|
|
<Drone size={24} color="green" className="text-green-200" />
|
|
</MarkerContent>
|
|
<MarkerTooltip>{location.name}</MarkerTooltip>
|
|
<MarkerPopup>
|
|
<div className="space-y-1">
|
|
<p className="font-medium text-foreground">{location.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{location.lat.toFixed(4)}, {location.lng.toFixed(4)}
|
|
</p>
|
|
</div>
|
|
</MarkerPopup>
|
|
</MapMarker>
|
|
))}
|
|
</MapComponent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|