入力が選択され、ボタンで送信された後、マップボックスの不透明度を更新するにはどうすればよいですか?

I can initialize the map and add the geojson polygons. But I can't get the opacity to update based on the options selected. I'm able to retrieve the values and calculate a normalized value for each zipcode but I can't get the opacity to reflect the new values.

Everything works to return an updated geojson with values based on the selections. But I can't update the layer with the new opacity levels.

fetch('https://vizibalmaps.s3.amazonaws.com/2023_zipcode_20mb.json')
            .then(response => response.json())
            .then(data => {
                // Initialize the map
                console.log('GeoJSON Data:', data);
                console.log('GeoJSON Zipcode Type:', typeof data.features[0].properties.ZCTA5CE20);

                const map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/light-v10',
                    center: [-74.5, 40], // Default center coordinates
                    zoom: 4, // Adjust the zoom level
                });

                // Store the fetched data in the global variable
                geojsonData = data;

                map.on('load', function () {
                    map.addSource('polygons', {
                        type: 'geojson',
                        data: geojsonData, // Use the global variable to set the data
                    });

                    map.addLayer({
                        id: 'polygons',
                        type: 'fill',
                        source: 'polygons',
                        paint: {
                            'fill-color': '#FF5733',
                            // 'fill-opacity': 0.3,
                            'fill-outline-color': '#088',
                        },
                    });

            .catch(error => console.error('Error fetching GeoJSON:', error));

 // Function to update the map based on new data
        function normalize(value, min, max) {
            // Map the value from the range [min, max] to [0, 1]
            return (value - min) / (max - min);
        }   

        function getValueFromData(outputData, zipcode) {
            // Find the entry with the matching zipcode
            var entry = outputData.find(entry => entry.zipcode === zipcode);
            // Return the output_value if the entry is found, otherwise return null or handle appropriately
            return entry ? parseInt(entry.output_value) : null;
        }

        function updateMap(data) {

            // Log the data to the console to examine its structure
            // console.log(data);

            // Extract the output data
            var outputData = data.output;

            // Get the min and max values from the data
            var values = outputData.map(entry => parseInt(entry.output_value));
            var minValue = Math.min(...values);
            var maxValue = Math.max(...values);

            // Iterate over the GeoJSON features to calculate normalized opacity based on the value
            geojsonData.features.forEach(feature => {
                // Check if the zipcode property exists in feature.properties
                if (feature.properties.hasOwnProperty('ZCTA5CE20')) {

                    // console.log('GeoJSON Zipcode:', feature.properties.ZCTA5CE20); // check geojson zipcode format
                    // console.log('GeoJSON Zipcode Type:', typeof geojsonData.features[0].properties.ZCTA5CE20);


                    var zipcode = feature.properties.ZCTA5CE20;
                    var value = getValueFromData(outputData, zipcode); // Assuming you have a function to extract the value from the data
                    
                    // console.log('var Zipcode:', zipcode); // check geojson zipcode format
                    // console.log('outputData value:', value);

                    
                    // Check if a value was found for the zipcode
                    if (value !== null) {
                        
                        var normalizedValue = normalize(value, minValue, maxValue);
                        var opacity = normalizedValue;
                        console.log(`Zipcode: ${zipcode}, Output Value: ${value}, normalizedValue: ${normalizedValue}`); // Log the zipcode and corresponding output value
                        feature.properties.opacity = opacity;
                        

                        // Log the variables to the console
                        console.log("Zipcode:", zipcode);
                        console.log("Value:", value);
                        console.log("Normalized Value:", normalizedValue);
                        console.log("Opacity:", opacity);

                    } else {
                        console.log(`No output value found for zipcode: ${zipcode}`);
                    }
                
                } else {
                    console.log('Zipcode property not found for feature:', feature);
                }

                // Optionally, you can set other properties such as color based on the opacity value

                // Update the 'fill-opacity' property of the feature in the map layer

                
                map.setPaintProperty('polygons', 'fill-opacity', opacity);


            });

            // Log the map object to the console
            console.log(map);


            // Update the data source for the 'polygons' layer
            // map.getSource('polygons').setData(geojsonData);
            }






    </script>

</body>
</html>