Function tryFallbackMapRendering

frontend/src/components/map-view.tsx:482–862

()

    // Fallback map rendering if ROS2D fails
    const tryFallbackMapRendering = () => {
      console.log('Trying fallback map rendering...');
      
      // Clean up any existing fallback
      if (fallbackCleanupRef.current) {
        fallbackCleanupRef.current();
        fallbackCleanupRef.current = null;
      }
      
      const mapListener = new ROSLIB.Topic({
        ros: connection.ros!,
        name: showCostmap ? '/move_base/global_costmap/costmap' : '/map',
        messageType: 'nav_msgs/OccupancyGrid'
      });

      let mapInfo: any = null;
      let mapCanvas: HTMLCanvasElement | null = null;
      let robotMarker: HTMLDivElement | null = null;
      let handleMouseMove: ((e: MouseEvent) => void) | null = null;
      let handleMouseUp: (() => void) | null = null;
      
      // Use a state object to ensure closures work properly
      const state = {
        scale: 1,
        translateX: 0,
        translateY: 0,
        isDragging: false,
        dragStartX: 0,
        dragStartY: 0,
        viewport: null as HTMLDivElement | null
      };

      mapListener.subscribe((message: any) => {
        if (message.info && message.data) {
          console.log('Fallback: Map data received, attempting manual render', {
            width: message.info.width,
            height: message.info.height,
            resolution: message.info.resolution,
            origin: message.info.origin
          });
          
          mapInfo = message.info;
          
          const container = document.getElementById('ros2d-map');
          if (!container) return;
          
          // Clear container
          container.innerHTML = '';
          
          // Create main wrapper with overflow hidden
          const mainWrapper = document.createElement('div');
          mainWrapper.style.position = 'relative';
          mainWrapper.style.width = '100%';
          mainWrapper.style.height = '100%';
          mainWrapper.style.overflow = 'hidden';
          mainWrapper.style.backgroundColor = '#1a1a1a';
          mainWrapper.style.cursor = 'grab';
          mainWrapper.style.userSelect = 'none';