How to change icon-size in mapbox gl on click?

Question

I want to change the icon-size on map click based on the turf-nearest. How do i accomplish this? nearestBuilding.properties['icon-size'] = 0.2; does not work.

var retail = {
        type: 'FeatureCollection',
        features: [
            { 
                type: 'Feature',
                properties: {
                    title: 'TEST',
                    description: 'TEST'
                },
                geometry: {
                    type: 'Point',
                    coordinates: [121.051779, 14.550224]
                }
            },
            { 
                type: 'Feature',
                properties: {
                    title: 'TEST',
                    description: 'TEST'
                },
                geometry: {
                    type: 'Point',
                    coordinates: [121.04568958282472, 14.552170837008527]
                } 
            }
        ]
    };

    map.on('load', function() {
        map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Wiki_Loves_Earth_map_marker.svg/600px-Wiki_Loves_Earth_map_marker.svg.png', function(error, image) {
            if (error) throw error;
            map.addImage('marker', image);

            map.addLayer({
                id: 'retail',
                type: 'symbol',
                source: {
                  type: 'geojson',
                  data: retail
                },
                layout: {
                  'icon-image': 'marker',
                  'icon-size': 0.1
                },
                paint: { }
            });
        });
    });
var marker = null;

    map.on('click', function(e){
        if(marker != null) {
            marker.remove();
        }

        var currentLocation = {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [e.lngLat.lng, e.lngLat.lat]
            }
        };

        var el = document.createElement('div');
        el.className = 'currLocMarker';

        marker = new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
          .setLngLat(currentLocation.geometry.coordinates)
          .addTo(map);

        var currentLocation = turf.point([e.lngLat.lng, e.lngLat.lat]);
        var nearestBuilding = turf.nearest(currentLocation, retail);
        var distance = turf.distance(currentLocation, nearestBuilding);

        if (distance <= 0.5) {
             nearestBuilding.properties['icon-size'] = 0.2;
        }
    });

Answer 1

Since icon-size supports data-driven styling(https://www.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-size), have you tried doing that, with an identity function from the property on each feature? You would configure this inside the layout, instead just hard-coding 0.1. More docs on data-driven styling is here - https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type