leaflet marker issue fixed

locane/src/components/CachedTileLayer.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useMap } from 'react-leaflet';
-import L from 'leaflet';
+import L from '../leafletConfig.js'; // Use configured Leaflet
 import 'leaflet.tilelayer.fallback';
 
 // Function to create a custom tile layer with caching

locane/src/components/CreateTask.jsx

@@ -2,6 +2,7 @@ import Upload from "./Upload.jsx";
 import React, { useEffect, useState } from "react";
 import exifr from "exifr";
 import 'leaflet/dist/leaflet.css';
+import '../leafletConfig.js'; // Configure Leaflet icons
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import { authorizedFetch } from '../utils/api.js';
 import './createtask.css';

locane/src/components/GcpInterface.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { MapContainer, TileLayer, Marker, Tooltip, useMap, useMapEvents } from "react-leaflet";
+import '../leafletConfig.js'; // Configure Leaflet icons
 import exifr from 'exifr';
 import proj4 from 'proj4';
 import './GcpInterface.css';

locane/src/components/ResultMap.jsx

@@ -1,5 +1,6 @@
 import {GeoJSON, MapContainer, TileLayer} from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
+import '../leafletConfig.js'; // Configure Leaflet icons
 import {useEffect, useState, useRef} from 'react';
 import "./resultmap.css"
 import {ScaleLoader, SyncLoader} from "react-spinners";

locane/src/leafletConfig.js

@@ -0,0 +1,15 @@
+import L from 'leaflet';
+
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: import.meta.env.DEV 
+    ? '/node_modules/leaflet/dist/images/marker-icon-2x.png'
+    : '/images/marker-icon-2x.png',
+  iconUrl: import.meta.env.DEV 
+    ? '/node_modules/leaflet/dist/images/marker-icon.png'
+    : '/images/marker-icon.png',
+  shadowUrl: import.meta.env.DEV 
+    ? '/node_modules/leaflet/dist/images/marker-shadow.png'
+    : '/images/marker-shadow.png',
+});
+
+export default L;