diff --git a/src/components/panels/MapView.tsx b/src/components/panels/MapView.tsx index e0cd1b3..833af01 100644 --- a/src/components/panels/MapView.tsx +++ b/src/components/panels/MapView.tsx @@ -1,16 +1,16 @@ 'use client'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet'; import L from 'leaflet'; -import { useWaypoints } from '@/contexts/WaypointContext'; +import { useWaypoints, LatLngTuple } from '@/contexts/WaypointContext'; import BreadcrumbTrail from '../BreadCrumbTrail'; import WaypointCreatorWindow from '../WaypointCreatorWindow'; import MapInteractionHandler from '../MapInteractionHandler'; import MapCompass from '../MapCompass'; import { useEnvContext } from 'next-runtime-env'; - - +import { useROS } from '@/ros/ROSContext'; +import ROSLIB from 'roslib'; const getCustomIcon = (color: string) => L.divIcon({ @@ -25,10 +25,33 @@ type MapViewProps = { }; const MapView: React.FC = ({offline}) => { + const { ros } = useROS(); + const [droneLoc, setDroneLoc] = useState([0, 0]); const { waypoints } = useWaypoints(); const { NEXT_PUBLIC_TILE_SERVER } = useEnvContext(); const tileServer = NEXT_PUBLIC_TILE_SERVER || "localhost:80"; + useEffect(() => { + if (!ros) return; + + const droneTopic = new ROSLIB.Topic({ + ros, + name: '/mavros_node/mavros_node/global', + messageType: 'sensor_msgs/NavSatFix', + }); + + const handleDrone = (message: any) => { + // Assuming the /fix message contains 'latitude' and 'longitude' + const { latitude, longitude } = message; + setDroneLoc([latitude, longitude]); + }; + + droneTopic.subscribe(handleDrone); + return () => { + droneTopic.unsubscribe(handleDrone); + }; + }, [ros]); + return ( = ({offline}) => { attribution="© Maptiler server" /> + {waypoints.map((wp, index) => (