Click event from small polygon

[pixunen]

Hey,

I'm trying to implement a simple map, where user can click on a polygon and do stuff with it. The app is running on NextJS and I've attached the package.json + the component

I've encountered a issue where the onClick event is not registered if the polygon is small (so if the coordinates are close together).
Seems to work fine with bigger polygons so don't know if it's a library limitation.

Any help would be appreciated.

'use client'

import Map, { Source, Layer, NavigationControl, FillLayer, MapRef, MapLayerMouseEvent, LineLayer } from 'react-map-gl';
import bbox from '@turf/bbox'
import { useRef } from 'react';

function RandomColor() {
    let color = (Math.random() * 0xFFFFFF << 0).toString(16);
    return '#' + ('000000' + color).slice(-6);
}


function flipCoordinates(geojson: any) {
    const flippedGeoJSON = JSON.parse(JSON.stringify(geojson)); // Deep copy

    flippedGeoJSON.features.forEach((feature: { geometry: { coordinates: any[]; }; }) => {
        if (feature.geometry && feature.geometry.coordinates) {
            feature.geometry.coordinates = feature.geometry.coordinates.map(coords => {
                if (Array.isArray(coords[0])) { // If it's a polygon or multi-point
                    return coords.map((coord: any[]) => [coord[1], coord[0]]);
                } else { // If it's just a single point
                    return [coords[1], coords[0]];
                }
            });
        }
    });

    return flippedGeoJSON;
}


const geojson: any = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: [[
                [60.978030139536195, 25.6479810912917],
                [60.984169898835944, 25.651145275590864],
                [60.991669688703446, 25.663699942326247],
                [60.97778254372033, 25.665639281090254]
            ]]
        },
        properties: {
            id: 1,
            neighborhood: 'Keskusta',
            color: RandomColor()
        }
    },
    {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: [[
                [60.991966673743704, 25.663597872522047],
                [61.00226043561559, 25.65073699404524],
                [61.026091661849826, 25.648398894109917],
                [61.02135796859642, 25.67740941169497],
                [61.00771157209782, 25.68329648414777],
                [60.98979177159787, 25.680990208844506]
            ]]
        },
        properties: {
            id: 2,
            neighborhood: 'Mukkula',
            color: RandomColor()
        }
    },]
};

const fillLayer: FillLayer = {
    source: 'sourcedata',
    id: 'data-fill-map',
    type: 'fill',
    paint: {
        'fill-outline-color': '#ffffff',
        'fill-color': ['get', 'color'],
        'fill-opacity': 0.5,
    },
};
const lineLayer: LineLayer = {
    source: 'sourcedata',
    id: 'data-line-map',
    type: 'line',
    paint: {
        'line-width': 2,
        'line-color': '#000'
    }
};

export default function MapBox() {
    const mapRef = useRef<MapRef>();
    const onClick = (event: MapLayerMouseEvent) => {
        const feature = event.features[0];
        console.log(event.features)
        if (feature) {
            // calculate the bounding box of the feature
            const [minLng, minLat, maxLng, maxLat] = bbox(feature);

            mapRef.current.fitBounds(
                [
                    [minLng, minLat],
                    [maxLng, maxLat]
                ],
                { padding: 40, duration: 1000 }
            );
        }
    };


    const flippedGeoJSON = flipCoordinates(geojson);


    return (
        <Map
            mapStyle="mapbox://styles/pixunen/cl6v2qgxl00kz14pdadpkvmta"
            mapLib={import('mapbox-gl')}
            mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_GL_ACCESS_TOKEN}
            initialViewState={{
                longitude: 25.65453277060866,
                latitude: 60.98325849641564,
                zoom: 11
            }}
            interactiveLayerIds={['data-fill-map', 'data-line-map']}
            style={{ width: 'auto', height: '100vh' }}
            onClick={onClick}
            doubleClickZoom={false}
            ref={mapRef}>
            <Source id="sourcedata" type="geojson" data={flippedGeoJSON}>
                <Layer {...fillLayer} />
                <Layer {...lineLayer} /> 
            </Source>
            <NavigationControl position='bottom-right' />
        </Map>
    );
}

{
  "name": "turbo-baldur",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.0",
    "@radix-ui/react-alert-dialog": "^1.0.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@supabase/supabase-js": "^2.33.1",
    "@tailwindcss/forms": "^0.5.4",
    "@turf/bbox": "^6.5.0",
    "@types/mapbox-gl": "^2.7.13",
    "@types/node": "20.5.0",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "@types/react-map-gl": "^6.1.3",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "encoding": "^0.1.13",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.17",
    "lucide-react": "^0.269.0",
    "mapbox-gl": "^2.15.0",
    "next": "13.4.17",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.4",
    "react-map-gl": "^7.1.3",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "supabase": "^1.88.0"
  }
}