export default function Map()

in src/components/map/index.tsx [57:131]
68 lines of code
10 McCabe index (conditional complexity)

export default function Map({
  longitude = 6.625,
  latitude = 46.51,
  zoom = 14,
  mapStyle = `https://demo.baremaps.com/style.json`,
  getMapStyle,
  mapOptions = {} as maplibregl.MapOptions,
  getControls = getDefaultControls,
  geocoder = true,
  ipToLoc = true,
  styleSelect = false,
  rounded = true,
  style = {}
}: MapProps) {
  const mapContainer = useRef(null);
  const [map, setMap] = useState(null);

  // Initialize map when component mounts
  useEffect(() => {
    if (maplibregl.getRTLTextPluginStatus() === 'unavailable') {
      maplibregl.setRTLTextPlugin(
        'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
        null,
        true
      );
    }

    const initMap = async () => {
      if (ipToLoc) {
        try {
          const response = await fetch(`https://demo.baremaps.com/api/iploc`);
          const results = await response.json();
          if (results.length > 0) {
            longitude = results[0].longitude;
            latitude = results[0].latitude;
          }
        } catch (err) {
          // For the moment, we fallback to the default values
        }
      }
      const newMap = new maplibregl.Map({
        container: mapContainer.current,
        style: getMapStyle !== undefined ? await getMapStyle() : mapStyle,
        center: [longitude, latitude],
        zoom: zoom,
        ...mapOptions
      });
      // Add default controls
      getControls().forEach(control => {
        newMap.addControl(control);
      });

      setMap(newMap);
    };
    if (!map) {
      initMap();
    }
  }, []);

  return (
    <div
      className={cn(styles.wrap, rounded ? styles.rounded : '')}
      style={style}
    >
      {geocoder && (
        <GeocoderSearch
          url="https://demo.baremaps.com/api/geocoder"
          map={map}
        />
      )}
      {styleSelect && <MapStyleSelect map={map} mapStyles={STYLES} />}
      <div ref={mapContainer} className={styles.map} />
    </div>
  );
}