frontend/src/App.jsx

@@ -8,6 +8,7 @@ const APP = () => {
   const mapContainerRef = useRef(null);
   const mapRef = useRef(null);
   const startMarkerRef = useRef(null);
+  const cityMarkersRef = useRef([]);
   const [selectedPoint, setSelectedPoint] = useState({ lat: 51.5074, lon: -0.1278 });
   const [direction, setDirection] = useState(45);
   const [lineOfSightData, setLineOfSightData] = useState(null);
@@ -67,7 +68,8 @@ const APP = () => {
         startMarkerRef.current.setLngLat([lng, lat]);
       }
 
-      // Clear previous final line when moving start point
+      // Clear previous final results when moving start point
+      clearCityMarkers();
       if (mapRef.current.getSource('line-of-sight')) {
         mapRef.current.removeLayer('line-of-sight');
         mapRef.current.removeSource('line-of-sight');
@@ -79,6 +81,13 @@ const APP = () => {
     };
   }, []);
 
+  const clearCityMarkers = () => {
+    if (cityMarkersRef.current) {
+      cityMarkersRef.current.forEach(marker => marker.remove());
+      cityMarkersRef.current = [];
+    }
+  };
+
   useEffect(() => {
     // Update preview whenever point or direction changes
     if (mapRef.current && mapRef.current.isStyleLoaded()) {
@@ -157,8 +166,8 @@ const APP = () => {
         tolerance
       );
       
-      setLineOfSightData(response.data);
+      setLineOfSightData(response.data.data);
-      renderLineOnMap(response.data);
+      renderLineOnMap(response.data.data);
     } catch (error) {
       console.error('Error fetching line of sight:', error);
     } finally {
@@ -170,7 +179,8 @@ const APP = () => {
     const map = mapRef.current;
     if (!map) return;
 
-    // Clear existing line
+    // Clear existing results
+    clearCityMarkers();
     if (map.getSource('line-of-sight')) {
       map.removeLayer('line-of-sight');
       map.removeSource('line-of-sight');
@@ -219,12 +229,14 @@ const APP = () => {
       `;
 
       // Add marker to map
-      new maplibregl.Marker(el)
+      const marker = new maplibregl.Marker(el)
         .setLngLat([city.lon, city.lat])
         .setPopup(new maplibregl.Popup().setHTML(
           `<strong>${city.name}</strong><br/>Population: ${city.population.toLocaleString()}<br/>Distance: ${city.distance_km} km`
         ))
         .addTo(map);
+      
+      cityMarkersRef.current.push(marker);
     });
 
     // Fit bounds to show line