Function initializeMap

frontend/src/components/map-view.tsx:150–479

()

    };

    const initializeMap = async () => {
      try {
        console.log('Initializing map viewer...');
        console.log('ROS2D available:', !!window.ROS2D);
        console.log('createjs available:', !!window.createjs);
        
        // Clear previous viewer if exists
        if (viewerRef.current) {
          viewerRef.current.scene.removeAllChildren();
        }

        if (!window.ROS2D) {
          throw new Error('ROS2D library not loaded');
        }

        // Create the main viewer
        const viewer = new window.ROS2D.Viewer({
          divID: 'ros2d-map',
          width: mapContainerRef.current!.clientWidth,
          height: mapContainerRef.current!.clientHeight,
          background: '#1a1a1a'
        });
        viewerRef.current = viewer;

        // Setup the map client - use either costmap or regular map based on toggle
        const mapTopic = showCostmap ? '/move_base/global_costmap/costmap' : '/map';
        console.log(`Subscribing to map topic: ${mapTopic}`);
        
        // Create the occupancy grid client with error handling
        let gridClient;
        try {
          // First, let's verify the map topic exists and has data
          const mapTestListener = new ROSLIB.Topic({
            ros: connection.ros!,
            name: mapTopic,
            messageType: 'nav_msgs/OccupancyGrid'
          });

          let mapDataReceived = false;
          mapTestListener.subscribe((msg: any) => {
            if (!mapDataReceived) {
              mapDataReceived = true;
              console.log('Map test successful - data structure:', {
                hasHeader: !!msg.header,
                hasInfo: !!msg.info,
                hasData: !!msg.data,
                dataLength: msg.data?.length,
                width: msg.info?.width,
                height: msg.info?.height,
                resolution: msg.info?.resolution,
                origin: msg.info?.origin
              });
              mapTestListener.unsubscribe();
            }
          });

          // Small delay to ensure ROS connection is stable
          await new Promise(resolve => setTimeout(resolve, 500));