Help Needed: Visualizing Detected Objects on Oriented Imagery

[MuhammadElbagoury]

Hi everyone,

I’ve been working with oriented imagery (360°) and have used the Oriented Imagery Viewer to explore it. Recently, I applied the "Detect Objects Using Deep Learning" tool with the Text SAM model to detect objects within my imagery.

Now, I’d like to overlay the detected objects directly onto the imagery within the Oriented Imagery Viewer. My goal is to visually inspect the detected objects to identify and remove noisy or irrelevant ones.

Does anyone know how to:

1. Display the detected objects on the oriented imagery?
2. Streamline the process for identifying and removing noise objects?

Any tips, workflows, or tools that could help me accomplish this would be greatly appreciated!

Thanks in advance!

[SumitMishra_016]

To overlay detected objects onto 360° oriented imagery and streamline the process of identifying and removing noisy objects, you can use a custom implementation with Photo Sphere Viewer. This tool allows you to display markers, polygons, and other overlays directly on a 360° image.
https://photo-sphere-viewer.js.org/demos/markers/polygon-pattern.html 
Add Detected Objects as Markers

• Parse the GeoJSON to extract object positions and other details.
• Add markers or polygons to the viewer using the coordinates of detected objects. Example code:

const viewer = new PhotoSphereViewer.Viewer({
    container: document.getElementById('viewer'),
    panorama: 'path/to/your/image.jpg', // Replace with your 360° image path
    plugins: [
        [PhotoSphereViewer.MarkersPlugin],
    ],
});

const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

// Example marker data
const detectedObjects = [
    { id: 'object1', longitude: 2.3, latitude: 1.1, label: 'Detected Object 1' },
    { id: 'object2', longitude: 2.5, latitude: 1.3, label: 'Detected Object 2' },
];

detectedObjects.forEach(obj => {
    markersPlugin.addMarker({
        id: obj.id,
        longitude: obj.longitude,
        latitude: obj.latitude,
        tooltip: obj.label,
        color: 'rgba(255, 0, 0, 0.5)', // Red overlay for detection
    });
});
​