import { useEffect } from 'react';
import PropTypes from 'prop-types';

import { unusedBorderColor } from '../../utils/colors';

export default function MobilePointsLayer({ locationId, map, sourceId }) {
  useEffect(() => {
    map.addLayer({
      id: 'mobile-points',
      source: sourceId,
      'source-layer': 'default',
      type: 'circle',
      paint: {
        'circle-color': unusedBorderColor,
        'circle-radius': 5,
        'circle-opacity': 0.3,
      },
    });

    if (locationId) {
      map.addLayer({
        id: 'mobile-location-points',
        source: sourceId,
        'source-layer': 'default',
        type: 'circle',
        paint: {
          'circle-color': '#198CFF',
          'circle-radius': 5,
          'circle-opacity': 0.6,
        },
        filter: ['==', 'locationId', locationId.toString()],
      });
    }

    return () => {
      if (map.getLayer('mobile-points')) map.removeLayer('mobile-points');
      if (map.getLayer('mobile-location-points'))
        map.removeLayer('mobile-location-points');
    };
  }, [locationId]);

  return null;
}

MobilePointsLayer.propTypes = {
  activeParameter: PropTypes.string,
  map: PropTypes.object,
  sourceId: PropTypes.string,
};

import { useEffect } from 'react';
import PropTypes from 'prop-types';

import { unusedBorderColor } from '../../utils/colors';

export default function MobilePointsLayer({ map, sourceId }) {
  useEffect(() => {
    map.addLayer({
      id: 'mobile-points',
      source: sourceId,
      'source-layer': 'default',
      type: 'circle',
      paint: {
        'circle-color': unusedBorderColor,
        'circle-radius': 5,
        'circle-opacity': 0.3,
      },
    });

    return () => {
      if (map.getLayer('mobile-points')) map.removeLayer('mobile-points');
    };
  }, []);

  return null;
}

MobilePointsLayer.propTypes = {
  map: PropTypes.object,
  sourceId: PropTypes.string,
};

--- 
+++ 
@@ -3,7 +3,7 @@
 
 import { unusedBorderColor } from '../../utils/colors';
 
-export default function MobilePointsLayer({ map, sourceId }) {
+export default function MobilePointsLayer({ locationId, map, sourceId }) {
   useEffect(() => {
     map.addLayer({
       id: 'mobile-points',
@@ -17,15 +17,33 @@
       },
     });
 
+    if (locationId) {
+      map.addLayer({
+        id: 'mobile-location-points',
+        source: sourceId,
+        'source-layer': 'default',
+        type: 'circle',
+        paint: {
+          'circle-color': '#198CFF',
+          'circle-radius': 5,
+          'circle-opacity': 0.6,
+        },
+        filter: ['==', 'locationId', locationId.toString()],
+      });
+    }
+
     return () => {
       if (map.getLayer('mobile-points')) map.removeLayer('mobile-points');
+      if (map.getLayer('mobile-location-points'))
+        map.removeLayer('mobile-location-points');
     };
-  }, []);
+  }, [locationId]);
 
   return null;
 }
 
 MobilePointsLayer.propTypes = {
+  activeParameter: PropTypes.string,
   map: PropTypes.object,
   sourceId: PropTypes.string,
 };
Add layer to highlight the location's  mobile data
