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,
};

@@ -165,16 +165,28 @@
 sLayer(%7B
+ locationId,
  map, so
@@ -485,111 +485,594 @@
     
-return () =%3E %7B%0A      if (map.getLayer('mobile-points')) map.removeLayer('mobile-points');%0A    %7D;%0A  %7D, %5B
+if (locationId) %7B%0A      map.addLayer(%7B%0A        id: 'mobile-location-points',%0A        source: sourceId,%0A        'source-layer': 'default',%0A        type: 'circle',%0A        paint: %7B%0A          'circle-color': '#198CFF',%0A          'circle-radius': 5,%0A          'circle-opacity': 0.6,%0A        %7D,%0A        filter: %5B'==', 'locationId', locationId.toString()%5D,%0A      %7D);%0A    %7D%0A%0A    return () =%3E %7B%0A      if (map.getLayer('mobile-points')) map.removeLayer('mobile-points');%0A      if (map.getLayer('mobile-location-points'))%0A        map.removeLayer('mobile-location-points');%0A    %7D;%0A  %7D, %5BlocationId
 %5D);%0A
@@ -1122,16 +1122,53 @@
 pes = %7B%0A
+  activeParameter: PropTypes.string,%0A
   map: P

Add layer to highlight the location's mobile data