fix: dotted detections display

Author: mhassanch

examples/live-examples-nextjs/src/app/tasks/object-detection/page.tsx

@@ -225,7 +225,12 @@ export default function ObjectDetection() {
   // Handle results from the worker
   useEffect(() => {
     if (lastResult?.detections && map.current) {
-      MapUtils.displayDetections(map.current, lastResult.detections);
+       MapUtils.displayDetections(map.current, lastResult.detections, {
+        "line-color": "#FFD400", // Yellow - visible and high contrast
+        "line-width": 3,
+        "line-dasharray": [1, 1], // dotted/dashed appearance
+        "line-opacity": 1.0,
+      },"line");
       setDetections(lastResult.detections);
     }
     if (lastResult?.geoRawImage?.bounds && map.current) {

examples/live-examples-nextjs/src/utils/mapUtils.ts

@@ -11,6 +11,7 @@ export class MapUtils {
     map: maplibregl.Map,
     detections: GeoJSON.FeatureCollection,
     paint = MapUtils.defaultDetectionsPaint,
+    type: "symbol" | "fill" | "line" | "raster" | "circle" | "heatmap" | "fill-extrusion" | "hillshade" | "color-relief" | "background" = "fill",
   ) {
     if (!map) return;
 
@@ -29,7 +30,7 @@ export class MapUtils {
     // Add a layer to display the detections
     map.addLayer({
       id: "detections-layer",
-      type: "fill",
+      type: type,
       source: "detections",
       paint: paint,
     });