Function MapView

frontend/src/components/map-view.tsx:29–982

({ className = '' }: MapViewProps)

}

export default function MapView({ className = '' }: MapViewProps) {
  const { connection } = useRobotConnection();
  const { t } = useLanguage();
  const mapContainerRef = useRef<HTMLDivElement>(null);
  const viewerRef = useRef<any>(null);
  const gridClientRef = useRef<any>(null);
  const robotMarkerRef = useRef<any>(null);
  const [mapError, setMapError] = useState<string | null>(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);
  const [showCostmap, setShowCostmap] = useState(false);
  const tryFallbackMapRenderingRef = useRef<(() => void) | null>(null);
  const fallbackCleanupRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    if (!connection.ros || !connection.online || !mapContainerRef.current) {
      return;
    }

    setMapError(null);
    setIsMapLoaded(false);

    // List available topics to help debug
    const listTopics = () => {
      if (connection.ros && connection.online) {
        const topicsClient = new ROSLIB.Service({
          ros: connection.ros,
          name: '/rosapi/topics',
          serviceType: 'rosapi/Topics'
        });

        topicsClient.callService({}, (result: any) => {
          console.log('Available ROS topics:', result.topics);
          const mapRelatedTopics = result.topics.filter((topic: string) => 
            topic.includes('map') || topic.includes('costmap') || topic.includes('grid')
          );
          console.log('Map-related topics:', mapRelatedTopics);
          
          // Check for common map topics
          const commonMapTopics = ['/map', '/map_metadata', '/move_base/global_costmap/costmap'];
          const availableMapTopics = commonMapTopics.filter(topic => result.topics.includes(topic));
          if (availableMapTopics.length === 0) {
            console.warn('No standard map topics found. You may need to run a map server or navigation stack.');
            setMapError('No map topics available. Please ensure map_server or navigation is running.');
          } else {
            console.log('Found map topics:', availableMapTopics);
          }
        }, (error: any) => {
          console.warn('Could not list topics:', error);
        });
      }
    };

    listTopics();

    // Dynamically load the required scripts
    const loadScripts = async () => {
      try {
        // Make ROSLIB available globally for ros2d